CSS의 위치
css는 인라인 스타일 시트, 내부 스타일 시트, 외부 스타일 시트로 작성할 수 있습니다.
CSS우선순위
CSS의 우선순위는 인라인 스타일 > 내부 스타일 시트 > 외부 스타일 시트 > 브라우저 기본 스타일 순으로 적용됩니다.
또한 인라인 스타일 시트가 아래와 같이 중복될 경우
p { color: blue; }
p { color: yellow; }
p { color: red; }우선순위와 상관없이 강제 적용
p { color: blue!important; }
p { color: yellow; }
p { color: red; }다음과 같이 우선순위와 상관없이 강제 적용이 가능하다.
CSS 선택자
css의 선택자에는 전체 선택자, 타입 선택자, 클래스 선택자, 아이디 선택자, 속성 선택자가 있습니다. 사용 방법은 위의 표와 같습니다.
CSS Attribute Selectors
우리는 attribute selectors를 집중적으로 봐야 합니다.
이에 대한 예시 코드를 작성 해보겠습니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="attr-selec">
<p text="hello">모든 텍스트</p>
<p text="red">텍스트 매칭 속성</p>
<p text="aa bb cc">리스트 매칭 속성</p>
<p text="a1-a2-a3">범위 텍스트 매칭 속성</p>
<p text="img/pic.jpg">텍스트 시작 매칭 속성</p>
<p text="img/pic.png">텍스트 끝 매칭 속성</p>
<p text="Hyunseo seo">텍스트 패턴 매칭 속성</p>
</div>
</body>
</html>main.css
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#attr-selec {
padding: 10px;
}
#attr-selec p + p {
margin-top: 10px;
}
#attr-selec p[text] {
color: red;
}
#attr-selec p[text="red"] {
color: yellow !important;
background-color: purple;
}
#attr-selec p[text~="bb"] {
color: yellow !important;
background-color: green;
}
#attr-selec p[text|="a1"] {
color: yellow !important;
background-color: blue;
}
#attr-selec p[text^="img"] {
color: yellow !important;
background-color: red;
}
#attr-selec p[text$="png"] {
color: yellow !important;
background-color: gray;
}
#attr-selec p[text*="seo"] {
color: yellow;
background-color: pink;
}
다양한 속성으로 attribute selector를 다룰 수 있습니다.
pseudo Class Selector
또한 위의 가상 선택자 말고도 HTML문서의 구졸ㄹ 분석하여 특정 위치에 있는 태그를 선택하는 구조적 가상 클래스가 있습니다.
여기서 저희는 *of-type과 *child의 차이점에 대해서 분명히 알고 넘어갈 필요가 있습니다.
*of-type은 실제 E 엘리먼트만을 기준으로 카운트를 합니다. 반면 *child는 만약에 :first-child를 예시로 들면 p:first-child를 했는데 p의 부모 엘리먼트가 div라면 div의 처음 자식요소가 p가 아니라면 적용되지 않습니다. 아래 예시를 보겠습니다.
<div>
<div>text1</div>
<p>text2</p>
<p>text3</p>
</div>
/* Case 1 */
div p:first-child { ~ }
/* Case 2 */
div p:first-of-type { ~ }위와 같이 있다고 하면 text2를 감싸고 있는 p태그를 가리킬 수 있는건 Case2경우라는 것입니다.
이 외에도 :nth-child의 인자에는 수열이 들어가 짝수, 홀수 엘리먼트를 선택할 수도 있습니다.
기타 가상 클래스 선택자
기타 가상 클래스 선택자에는 위와 같이 있습니다.
폼 선택자부터 해서, 언어 선택자, 부정 선택자, 목적 선택자, 가상 엘리먼트 선택자 등이 있습니다.
이에 대한 예시는 아래와 같습니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="pseudo-selector">
<span></span>
<p>Hello</p>
</div>
</body>
</html>main.css
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#pseudo-selector span:after {
content: "";
padding: 0;
margin: 30px;
display: block;
width: 0px;
height: 0px;
border: 100px solid #ccc;
border-top-color: red;
border-right-color: yellow;
border-bottom-color: blue;
border-left-color: hotpink;
}
#pseudo-selector p {
position: relative;
width: 100px;
background: #000;
height: 4rem;
color: #fff;
text-align: center;
font-weight: bold;
font-size: 1rem;
margin: 30px;
line-height: 4rem;
}
#pseudo-selector p:after {
content: "";
display: block;
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
border: 10px solid;
border-top-color: #000;
}
조합 선택자
CSS Combinators는 기존의 여러 선택자를 조합, 지정된 부분에만 스타일 시트를 적용하는 기술입니다.
가장 헷갈릴 만한 일반 형제 선택자와 인접 형제 선택자의 차이는 아래와 같습니다.
그 외의 선택자는 직관적이여서 쉽게 이해할 수 있습니다.
'Web > Advanced Web Programming' 카테고리의 다른 글
| 고급 웹 프로그래밍 - 정리 - 2 (0) | 2022.06.04 |
|---|---|
| 고급 웹 프로그래밍 - 기말 정리 - 1 (0) | 2022.06.04 |
| Advanced Web Programming - CSS (2) (0) | 2022.04.04 |
| Advanced Web Programming - 멀티미디어 태그 (0) | 2022.03.15 |
| Advanced Web Programming - HTML 기본태그 (0) | 2022.03.08 |