CSS는 단순한 HTML태그에 여러가지 스타일 속성을 부여해서 보다 아름다운(?) 웹 페이지를 만들 수 있도록 도와줍니다. 하지만 모든 태그에 동일한 스타일 속성을 지정한다면 정말 무미건조 해지겠지요. 그래서 특정 태그만을 지정 하여 속성을 적용 할 수 있도록 범위를 한정 지을 수 있습니다. 그 때 사용되는 것이 바로 CSS Selector 입니다.

CSS Selector를 사용하여 스타일 적용 범위를 한정 하는 것에는 간단하게 세 가지 방법으로 나뉩니다. 물론 앞의 세 가지 방법들을 조합해서 사용하는 것도 가능하구요 :

  • 태그를 이용해 구분하는 방법
  • 클래스를 이용해 구분하는 방법
  • 아이디를 이용해 구분하는 방법

그럼 위의 세 가지 방법에 대해서 보다 자세히 알아 보도록 하겠습니다.

태그를 이용해 구분하는 방법

처음으로 태그를 이용한 selector에 대해서 알아보도록 하겠습니다. 예를 들어 '<DIV> 태그에 포함 되어진 모든 <H1> 태그들에 대해서 이런저런 스타일 속성을 지정하라!' 같은 것은 아래와 같이 표시 될 수 있을 겁니다 :

DIV H1 { color: red; }

위의 코드를 한번 다시 살펴 볼까요. 먼저 'DIV H1' 이라는 것에 주목을 해보도록 하겠습니다. 왠지 디렉토리 경로 표시에서 '\'나 '/'를 제외한 것 같지 않습니까? 네~ 맞습니다. CSS는 기본적으로 DOM 문서 규칙을 채택하고 있기 때문에 문서를 하나의 트리 형태, 즉, 디렉토리 구조와 같이 계층형으로 문서의 구조를 유지 하고 있습니다. 특정한 엘리먼트를 찾으려면 디렉토리 패스를 따라가듯이 경로를 지정 해 주시면 됩니다.

'{ color: red; }' 라는 것은 CSS를 적용하는 방법으로써, 찾아진 엘리먼트에 대해서 빨간색을 적용 하라는 뜻입니다.

클래스를 이용해 구분하는 방법

태그의 속성 중에 'class'라는 것이 있습니다.  class 속성을 이용하여 선택을 하려면 '.'를 클래스 앞에 붙여 주면 됩니다. 예를 들어 'callout이라는 클래스 속성을 가진 <div>태그 안에 있는 텍스트는 이런저런 속성을 지정 하라!' 라는 규칙을 적어 주고 싶다면 아래와 같이 하면 됩니다 :

.callout { border: solid blue 1px; background-color: cyan; }

위의 스타일을 태그에 지정하기 위해서는 태그의 클래스 속성을 'callout'이라고 하기만 하면 됩니다. 아래와 같이 말입니다 :

<div>이 텍스트는 일반 텍스트 형태로 보여 집니다</div>
<div class='callout'>이 텍스는 callout 스타일 속성이 적용된 체로 보여 집니다</div>

또한 한 개 이상의 클래스에도 중복적인 스타일 지정이 가능합니다. 아래와 같이 'loud'라는 클래스에 대한 스타일 속성이 추가적으로 지정되었다고 가정해 봅시다 :

.loud {color: orange }

그리고 이전에 했던것 과 비슷하게 두 스타일을 하나의 태그에 적용 시켜 보도록 하겠습니다 :

<div class='loud'>오랜지색 텍스트입니다</div>
<div class='callout'>callout 스타일 속성이 적용된 텍스트입니다</div>
<div class='callout loud'>위의 두 가지 스타일 속성이 동시에 적용된 텍스트입니다</div>

아이디를 이용해 구분하는 방법

아이디를 이용하여 selector를 적용하는 방법은 클래스를 이용한 것과 거의 비슷합니다. 다만 '.'가 '#'로 변경 된 것 외에는 다른 것이 없습니다. 다만 클래스는 한 HTML문서에서 여러번 나타날 수 있지만, 아이디는 한번만 나타나야만 한다는 것이 차이점이라고 할 수 있습니다. 그러니까  아이디를 이용해 속성을 적용한다는 것은 하나의 태그에만 속성을 적용한다는 뜻이지요. 간단하게 아래의 예를 보도록 하겠습니다 :

#close { color: red }

close라는 아이디를 가진 태그의 문자는 빨간색으로 스타일 속성을 지정하라는 뜻입니다. 그리고 이것이 의미하는 것은 여러 태그에 지정되는 것이 아니라  단 하나의 태그에만 지정된다는 것입니다.

위의 방법들을 복합적으로 사용

위에서 나온 방법들은 하나씩 따로 쓸 수 있을 뿐만 아니라, 원하는 만큼 서로 섞어서 사용 할 수도 있습니다. 예를 들어 '<span> 태그 중 클래스 속성이 highlight인 태그들에게 이런저런 스타일 속성을 지정하라!'라고 한다면 아래와 같이 태그에 대한 select방법과 클래스에 대한 select방법을 복합해서 사용 할 수 있습니다 :

span.highlight { backgroud-color: yellow }

그리고 계층적으로 구성 되어 있는 태그일지라도 복합적인 방법을 이용해서 사용하는 것이 가능합니다. 아래 처럼요 :

div.prose span.highlight { background-color: yellow }

Ref.

  • Ajax in Action

'진리는어디에 > Web' 카테고리의 다른 글

CSS 로딩하는 세 가지 방법  (0) 2008.04.19
CSS Selectors  (0) 2008.04.18
XMLHttpRequest 의 속성과 메소드  (2) 2008.04.17
HTTP 트랜젝션의 구조  (0) 2008.03.05
Posted by kukuta
TAG ,

댓글을 달아 주세요