CSS에서 가장 중요한 개념은 선택자(Selector)라고 할 수 있습니다. 선택자(Selector)가 있어야 선언된 CSS가 어디에 적용될지를 결정할 수 있기 때문입니다. 특히 CSS는 상속의 개념을 가지므로 선택자(Selector)에 대한 확실한 이해가 없이는 CSS를 제대로 활용하지 못합니다.
선택자(Selector)의 종류
선택자(Selector)는 아래와 같이 4개로 나누어볼 수 있습니다.
- 공통 선택자(Universal Selector)
- 타입 선택자(Type Selector)
- ID 선택자(ID Selector)
- Class 선택자(Class Selector)
공통 선택자(Universal Selector)
공통 선택자(Universal Selector)는 *로 표현되는 선택자입니다.
| * { color: gray; } |
위와 같이 정의하면 모든 element 에 color: gray; 라는 스타일을 지정한다는 의미입니다.
타입 선택자(Type Selector)
타입 선택자(Type Selector)는 p, div, span, table, td, form...등과 같은 HTML 태그를 선택하는 선택자 입니다.
| p { color: gray; } |
이런식으로 정의하면 P element에 color: gray; 라는 스타일을 지정한다는 의미입니다.
ID 선택자(ID Selector)
#이라는 지시어를 사용하면서 element의 아이디값을 지정해주면 됩니다. 즉 특정 element에만 스타일을 지정한다는 의미입니다.
| #gray_text { color: gray; } |
위와 같이 지정하면 id 값이 gray_text 인 element에만 스타일이 적용됩니다.
Class 선택자(Class Selector)
.이라는 지시어를 사용하면서 element의 클래스값을 지정해주면 됩니다. 특정 element에만 스타일을 지정한다는 의미로 ID 선택자와 차이점이라면 클래스의 경우는 한 문서에 동일한 이름의 클래스가 여러개 위치해도 괜찮으나 아이디는 유일해야 한다는 차이가 있습니다.
| .gray_text { color: gray; } |
위와 같이 지정하면 클래스 값이 gray_text 인 element에만 스타일이 적용됩니다.
