기본선택자

앞서 CSS 세가지 요소에 대해 말했습니다.

S (Selector, 선택자) P (Property, 속성) V (Value, 속성값) 이 있고 문법은 S {P : V;} 와 같이 사용할 수 있습니다.

이렇게 CSS 문법을 적용할 때 스타일 적용 대상을 명확히 해야 의도한대로 웹 페이지의 스타일이 적용될 수 있습니다.

따라서 스타일을 적용할 대상을 지정하는 선택자는 매우 중요한 요소라고 생각합니다. ★★★★★ (별이 다섯개!)

이번 포스팅에서는 선택자 중에서 기본이 되는 선택자들을 살펴보겠습니다.

Tag 선택자

선택자 중 가장 많이 사용하는 선택자가 바로 Tag 선택자입니다.

적용할 태그 이름 { 속성1 : 속성값; ...}과 같은 방식으로 사용할 수 있습니다. 이전 포스팅에서 <p>태그에 적용한 방법이 태그 선택자 방법입니다.

태그 선택자는 스타일을 적용하고자 하는 HTML 문서 안에 있는 모든 선택된 tag에 대해 스타일을 적용합니다.

*

전체 선택자입니다. 문서 내의 모든 태그를 지칭하는 방법으로 사용합니다.

전체 선택자에 지정된 속성은 문서의 모든 태그로 상속됩니다. 따라서 문서 전반에 걸쳐 한꺼번에 스타일을 적용하고 싶을 때 사용하는 선택자입니다.

id 선택자

id 선택자는 단 하나의 단일 요소만 선택하여 스타일을 지정하는 선택자입니다. (id는 HTML 문서에서 원칙적으로 1개밖에 존재하지 않으므로...)

id 선택자는 '#'으로 시작하여 스타일을 적용할 대상을 지정합니다. #id이름 { 속성1 : 속성값; ...} 과 같이....

class 선택자

class 선택자는 id와 비슷하지만 중복이 가능하다는 점에서 다릅니다

따라서 비슷한 스타일을 가져야 할 경우 class를 적용하여 스타일을 입힐 수 있습니다.

class 선택자는 '.'으로 시작하여 스타일을 적용할 대상을 지정합니다. .클래스이름 { 속성1 : 속성값; ...} 과 같이...

또한 특정 태그의 특정 클래스에만 스타일을 지정할 수도 있습니다. tag.class이름 {속성1 : 속성값1...} 과 같이 태그 선택자와 class 선택자를 함께 조합하여 사용할 수 있습니다.

만약 선택자들 간에 속성이 충돌한다면 대상을 더 직접적으로 지정하는 선택자를 기준으로하여 스타일을 지정합니다. (id > class)

그룹 선택자

그룹 선택자는 여러 선택자(태그, id, class)에 똑같은 속성을 지정할 때 사용합니다. 선택자들을 콤마로 구분하여 나열하면 나열된 선택자들에게 동일한 스타일이 부여됩니다.

S1, S2, S3 {속성1 : 속성값1;...} 과 같이 사용할 수 있습니다.