선택자 2


이번에는 선택자에 관한 두번째 시간입니다. 여기에서는 ID 선택자(ID Selector)와 문장 선택자(Contextual Selector)에 관해서 알아보겠는데요. 이 외에도 Universal selector, Child selector, Adjacent sibling selector가 있지만 자주 사용되는 부분이 아니므로 이곳에서는 생략하겠습니다.


ID (ID Selector)

  • ID선택자는 CLASS 선택자와 비슷하며, 마침표(.) 대신 우물정자(#) 기호를 사용하여 selector를 시작합니다.
  • 차이점 ;
    CLASS는 적용범위가 넓어 HTML의 모든 태그에 삽입하여 적용할 수 있는 반면 ID는 한 페이지에 유일하게 한 군데만 적용할 수 있습니다. 즉, CLASS는 한 문서에서 같은 이름이 존재해도 되지만 ID는 단 하나의 이름만 존재해야 합니다.
  • ID는 한 홈페이지 안에 하나만 존재해야 하므로 ID 선택자 앞에는 적용하고자 하는 선택자를 반드시 기재해 주어야 한다. (☜ 여러 태그에 적용할 수 있는 CLASS의 완전자유형식과 다르죠?)

  1. < STYLE >과 < /STYLE > 내부에 ID를 설정합니다.
  2. ID를 설정할 때는 항상 #name형식으로 지정을 하며, name은 제작자가 임의로 설정하면 됩니다.
  3. 이제 < BODY >와 < /BODY >에 ID를 불러올 스타일 기능을 삽입합니다.
  4. 태그 내부에 id = "name" 형식으로 지정하면 됩니다.


※ 예제를 통해서 살펴볼까요? ^^*

< HTML>
< HEAD>
< TITLE> ID를 선택자로 사용하기< /TITLE>
< STYLE TYPE="text/css">

#one {color:red ; font-family:굴림 ; font-size:20pt;}
#two {color:black ; font-family:굴림 ; font-size:15pt;}
#three {color:blue ; font-faminly:굴림 ; font-size:12pt;}

< /STYLE>
< /HEAD>
< BODY>
< DIV ID="one"> ID사용예제 입니다.< /DIV>
< P ID="two">ID를 사용할 때는 ID앞에 우물정자(#) 표시를 해야 합니다.< /P>
< P ID="three">ID는 class와 유사하게 적용됩니다.< /P>
< /BODY>
< /HTML>
ID를 선택자로 사용하기
ID사용예제 입니다.

ID를 사용할 때는 ID앞에 우물정자(#) 표시를 해야 합니다.

ID는 class와 유사하게 적용됩니다.

선택자의 이름 설정하기

  1. CLASS와 ID의 선택자 이름은 사용자가 임의로 설정할 수 있습니다.
  2. CLASS의 경우는 키워드, ID의 경우는 #name입니다. 즉, name과 키워드에 해당되는 것이 선택자의 이름입니다.
  3. 선택자의 이름으로 사용할 수 있는 문자는 a - z, A - Z, 숫자 0 - 9, 하이픈(-) 등입니다. 단, 문자의 첫 자는 하이픈(-)으로 시작할 수 없습니다. (예 : -id01)
  4. HTML문서는 대소문자를 구별하지 않으므로 id01, ID01, Id01을 모두 동일하게 인식합니다.

CLASS와 ID의 차이점

CLASS와 ID는 아주 흡사한 기능을 하기 때문에 사실상 구별을 한다는 것이 상당히 어렵습니다. 하지만, 한 가지 차이점이 있습니다. 간단한 예를 들어보겠습니다.

< HTML >
< HEAD >
< TITLE >class와 id의 차이점< /TITLE >
< STYLE type="text/css" >

#one{color:blue ; font-size:9pt;}
.two{color:red ; font-size:9pt;}
< /STYLE >
< /HEAD>
< BODY>
< P id="one">나는 id를 적용한 예제입니다.< /P >
< P class="two">나는 class를 적용한 예제 입니다.< /P >
< /BODY >
< /HTML >

class와 id의 차이점

나는 id를 적용한 예제입니다.

나는 class를 적용한 예제 입니다.

위를 한번 보세요. 효과가 똑같죠? 이것으로 보아 ID와 CLASS는 기능면에 있어서 전혀 차이가 없습니다.
하지만.. ID는 현재의 기능에 확장기능을 내포하고 있다고 합니다. 즉, CSS를 확장하여 스크립팅 기능을 넣은 DHTML을 웹 문서에 적용하려면 고유한 이름이 필요합니다. ID선택자는 문서 안에서 하나의 고유한 이름을 가지기 때문에 스크립트 스타일을 제어할 때 사용합니다.

정리를 해보면....
  • 여러 element에 같은 스타일을 지정할 때는 CLASS를 사용하고, 스크립트로 스타일 시트를 제어할 때 ID를 사용할 수 있습니다.
  • ID를 Selector로 사용하는 것은 특정 element에 지정하는 inline style과 기본적으로 같습니다.


문장 (Contextual Selector)

기존의 "HTML을 선택자로 사용하기"에서는 하나의 태그를 선택자로 사용했지만, 여기서 배울 문장선택자(Contextual Selectors)는 두 개의 태그를 선택자로 사용합니다. HTML 문서의 태그에 사용되는 특정 태그에만 서식을 적용하고자 할 때 사용되며 특정 태그는 정의된 태그안에서만 효력을 발휘합니다.
CSS2에서는 문장선택자(Contextual Selectors)를 자식 선택자(Descendant Selectors)로 간주합니다.


< STYLE type= "text/css" >

태그 태그{스타일속성:속성값}

< /STYLE >

  • 아래의 예제를 보면 < STYLE>과 < /STYLE> 내부에 P와 STRONG, P와 EM, P와 I 등 두 개가 선택자로 사용되었습니다.
  • 종전의 사용법으로는 아래의 예처럼, < P>태그 안에 일부 텍스트를 다른 태그를 사용해서 표현하기가 불가능 했습니다.
    이때 태그와 태그를 나란히 적어주면, < P>태그 안에 다른 태그를 넣어 각기 다른 표현을 할 수 있습니다. 여기서 주의 할 사항은 태그와 태그사이는 반드시 띄어쓰기를 해야 합니다.

※ 예제를 볼까요? ^^*

< HTML>
< HEAD>
< TITLE> 문장 선택자< /TITLE>
< STYLE TYPE="text/css">

< style type="text/css">
P STRONG { color : red ; font-style : italic }
P EM { color : blue ; font-weight : bold }
P I { letter-spacing : 1em }
☜ 태그와 태그 사이는
반드시 띄어쓰기를 하세요!!

< /STYLE>
< /HEAD>
< BODY>
< P>html 문서의 태그에 사용되는 < STRONG>특정 속성에만 서식을 적용하고자 할 때
사용된다. < /STRONG>< /P>
< P>입력 방법은 태그와 속성을 < EM>한 칸 공백을 두고 기재하면 된다. < /EM>< /P>
< P>특정 속성은 < I>정의된 태그 안에서만 효력을 발휘한다. < /I>< /P>
< /BODY>
< /HTML>
문장 선택자

html 문서의 태그에 사용되는 특정 속성에만 서식을 적용하고자 할 때 사용된다.

입력 방법은 태그와 태그 사이에 한 칸 공백을 두고 기재하면 된다.

특정 속성은 정의된 태그 안에서만 효력을 발휘한다.