선택자란 CSS를 적용할 컨텐츠가 무엇인지를 정의해 놓은 것을 의미한다.
CSS를 적용할 수 있는 선택자를 정의하는 방법은 많이 있다. 태그에 적용하는 방법, class를 정의하고 사용하는 방법, id를 정의하고 사용하는 방법은 가장 기본적인 선택자 정의 방법이다.
선택자들을 중복하여 사용할 수 있으며 여러 가지 제공되는 선택자는 많이 있다. 우선 기본을 알아야 응용 작업을 할 수 있으니 기본 선택자인 태그, id, class를 이용하는 방법을 살펴볼 것이다.
태그를 사용하는 방법은 앞에서 살펴보았고 class를 정의하는 방법과 id를 정의하는 방법의 차이가 무엇인지 살펴보도록 하자.
class로 선택자 정의하기
태그 내에 “class”를 속성을 정의하고 원하는 이름을 class명으로 정의할 수 있다. 이 class명은 중복해서 정의할 수 있다. 다음과 같은 방법으로 태그 안에 “class”속성을 정의해 보자. <p>태그나 <div>태그 아무 곳에서나 속성을 정의할 수 있고 중복해서 정의할 수 있다.
class명을 이용해서 CSS속성을 적용하는 방법은 먼저 원하는 태그에 “class”속성을 정의하고 속성값을 정의하는 것이다.작업이 완료되면 <head>태그나 외부문서에 다음과 같이 CSS속성을 정의한다.
.클래스명{속성명:속성값;속성명:속성값…}
실행하면 결과가 나타나며 <p>태그와 <div>태그 서로 선언된 태그는 다르지만 모두 class명을 “myblock”으로 선언했기 때문에 동일한 서식이 적용되는 것을 확인할 수 있다.
class명은 다른 태그로 정의되었지만 공통의 서식을 적용하기 위한 목적으로 사용되는 선택자이다.
id로 선택자 정의하기
태그 내에 “id”를 속성을 정의하고 원하는 이름을 id명으로 정의할 수 있다. id는 identifier이다. 식별자라는 뜻이다. id는 태그를 구분하여 사용할 목적으로 정의하는 식별자이다. 실제로 이 선택자는 Javascript나 JQuery에서 엘리먼트를 식별하기 위한 목적으로 사용된다.
따라서 “id”속성을 정의하는 경우 동일한 이름으로는 반드시 한 개만 정의할 수 있다. 물론 class처럼 쓴다고 해서 문법적으로 문제가 되거나 하지 않는다. 하지만 원래 id명을 정의하는 목적에 위배된다고 생각하면 된다. id는 다음과 같이 #기호를 이용하여 정의한다.
#id명{속성명:속성값;속성명:속성값…}
“id”속성을 원하는 위치에 정의한 후 <head>태그나 외부문서에 정의한 후 속성을 정의한다.
