티스토리 뷰
선택자란?
선택자 Selector 는 스타일을 지정할 HTML의 요소를 선택하는 것이다.
선택자의 종류
1. 타입 선택자 Type
2. 아이디 선택자 Id
3. 클래스 선택자 Class
4. 가상 선택자 Pseudo1-class
5. 속성 선택자 Attribute
6. 전체 선택자 Universal
가 있다.
1. 타입 선택자 Type
HTML 요소(태그) 이름을 사용한다.
Ex> 타입 선택자
1 | h2 { color: green; } | cs |
모든 h2 요소를 선택하는 예제이다.
* 선택자 묶기
1 | p, h1, a { color: white; } | cs |
','(콤마)를 사용하여 선택자를 분리하고 나열할 수 있다.
2. 아이디 선택자 Id
같은 태그를 사용하여도 서로 다른 스타일을 부여하고 싶을 때, id 선택자 또는 class 선택자를 사용하면 된다.
1. HTML 요소에 id 속성을 이용하여 id를 부여한다.
2. CSS에서 id 앞에는 '#'을 붙인다.
Ex> 아이디 선택자
HTML :
1 | <h2 id="id_name">CSS Selector</h2> | cs |
CSS :
1 | h2#id_name { color: blue; } | cs |
h2 요소 중에서 id가 id_name인 것을 선택하는 예제이다.
3. 클래스 선택자 Class
1. HTML 요소에 class 속성을 이용하여 class를 지정한다.
2. CSS에서 class 앞에는 '.'을 붙인다.
* id와 class의 차이점
id : 하나의 요소에만 지정 가능
class : 여러 개의 요소에 지정 가능
Ex> 클래스 선택자 1
HTML :
1 2 | <h2 class="class_name">CSS Selector</h2> <p class="class_name">Let's learn about CSS Selector!</p> | cs |
CSS :
1 | .class_name { color: yellow; } | cs |
class가 class_name인 모든 요소를 선택하는 예제이다.
Ex> 클래스 선택자 2
HTML :
1 2 | <h2 class="class_name">CSS Selector</h2> <h2 class="hi_hello">CSS Selector</p> | cs |
CSS :
1 | .class_name { color: yellow; } /* class 이름이 class_name인 것만 선택 됨 */ | cs |
h2 요소 중에서 class가 class_name인 것만을 선택하는 예제이다.
* 스타일 우선순위
스타일 적용이 서로 충돌할 경우를 대비하여 스타일 우선순위가 정해져있다.
" 타입 선택자 < 클래스 선택자 < id 선택자 "
스타일 적용 범위가 적은 id 선택자가 가장 우선 순위가 높다.
스타일 적용 범위가 동일한 코드가 있다면, 가장 아래에 있는 코드가 적용된다. (Cascading)
모든 우선순위를 뛰어넘고 강제로 우선순위를 높이려면 '!important'를 사용할 수 있다.
이는 비권장 문법이다.
Ex> 우선순위 1
1 2 3 | h2 { color: red; } .class { color: aqua; } #id { color: grey; } | cs |
우선순위 규칙에 따라서 #id의 스타일이 적용되는 예제이다.
Ex> 우선순위 2
1 2 3 | h2 { color: red; } .class { color: aqua !important; } #id { color: grey; } | cs |
!important를 사용하여 우선순위를 무시하고 .class의 스타일이 적용되는 예제이다.
* 후손 관계와 자식(직계) 관계
1. 후손 관계
선택자 : s1 s2
뜻 : s1 요소에 포함된 s2 요소를 선택한다.
Ex> 후손 관계
HTML:
1 2 3 4 5 6 | <body> <p>body의 직계 단락 p</p> <div> <p>body의 직계 단락이 아닌 p</p> </div> </body> | cs |
CSS:
1 | body p { color: cyan; } | cs |
body에 포함된 모든 p 요소를 선택하는 예제이다.
2. 자식(직계) 관계
선택자 : s1 > s2
뜻 : s1 요소의 직계 자식 요소인 s2만을 선택한다.
Ex> 자식(직계) 관계
HTML:
1 2 3 4 5 6 | <body> <p>body의 직계 단락 p</p> <div> <p>body의 직계 단락이 아닌 p</p> </div> </body> | cs |
CSS:
1 | body > p { color: olive; } | cs |
body의 직계 p만을 선택하는 예제이다.
4. 가상 클래스 Pseudo-class
클래스가 지정된 것처럼 간주하여 선택하는 선택자이다.
요소명 뒤에 ':' (콜론)을 사용한다.
1 2 3 4 5 6 | a:link { color: blue; } /* 아직 방문하지 않은 링크 */ a:visited { color: purple } /* 방문한 적이 있는 링크 */ a:hover { color: red; } /* 마우스를 가져다 댔을 때 */ a:active { color: yellow; } /* 마우스를 클릭했을 떄 */ input:focus { background-color: black; } /* 입력 칸에 커서를 둘 때 */ | cs |
이외에도 많은 가상 클래스가 있다.
5. 속성 선택자 Attribute
특정한 속성을 가지는 요소를 선택하는 선택자이다.
요소명 뒤에 '[ ]' (대괄호)를 사용하고,
대괄호 안에는 속성 이름만을 넣거나 속성 이름과 속성 값까지 넣어줄 수 있다.
Ex> 속성 선택자 1
1 2 3 4 5 6 7 8 | input[placeholder] { color: red; } /* placeholder 속성을 갖고 있는 input 요소 */ input[required] { color: green; } /* required 속성을 갖고 있는 input 요소 */ input[name="clouds"] { color: white; } /* name 속성을 갖고 있고, 그 속성의 값이 clouds인 input 요소 */ | cs |
6. 전체 선택자 Universal
HTML 문서의 모든 요소를 선택하는 선택자이다.
'*'을 사용하여 전체 요소를 선택한다.
Ex> 전체 선택자
1 | * { font-size: 50pt; } | cs |
모든 텍스트의 크기를 50pt로 바꾸는 예제이다.
- 거짓의, 가짜의 [본문으로]