[css] 선택자(Selector)

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에만 스타일이 적용된다.