CSS작성에서 정확한 선택자를 아는 것은 매우 중요합니다.

정확한 선택자를 이해하면 CSS의 문턱을 넘어섰다고 볼 수 있습니다..

먼저, 기본 선택자를 소개합니다.

1. 요소 선택

선택자의 기본은 '요소' 선택입니다. HTML문서는 요소로 구성되어 있습니다.

제공되는 모든 컨텐츠는 요소로 래핑됩니다. 

예를 들어, 웹문서의 모든 단락을 선택하려면 다음과 같이 하면 됩니다.

p { }

문서내 모든 표를 선택하기 위해서는 다음과 같이 합니다.

table { }

2. 클래스(class)선택

문서내의 특정 요소에 선택을 하면 해당 요소에 영향을 미칩니다. 반면 일부 항목을 기본 스타일과 다르게 하고 싶다면 어떻게 하면 될까요?

클래스 선택자를 사용하면 됩니다.

-, 먼저 원하는 요소에 클래스를 추가합니다.

<p class="box">내용이 들어갈 자리</p>

-, CSS에 클래스선택자를 사용합니다. 클래스 선택자는 .문자로 시작합니다.

.box { }

위와 같이 하면 요소내 해당 클래스를 추가하면 동일한 스타일을 적용할 수 있습니다. 특정 요소에 구애받지 않고 원하는 요소에 위 스타일을 적용할 수 있습니다.

-, 특정 요소안에 해당 클래스를 추가할 수도 있습니다.

p.box { }

위와 같이 하면 단락요소(p)내의 클래스가 추가된 곳만 해당 스타일이 적용됩니다.

클래스를 선언하고 하나의 웹문서내 여러 요소에 클래스를 추가할 수 있으며, 동일한 스타일을 적용합니다.

3. 아이디(ID) 선택

문서내 특정 요소만 선택하는 방법은 아이디(ID)선택자를 사용하는 것입니다.

<p id="box">내용이 들어갈 자리</p>

CSS에서 ID선택자는 #문자로 시작합니다.

#box { }

아이디는 문서내에 한번만 사용할 수 있습니다. 재사용 가능한 CSS를 만들려면 ID보다 클래스를 사용하는 것이 좋을 수 있습니다.