본문 바로가기
강의실/css

css2 선택자

star story 2007. 7. 25. 10:17
선택자 (Selector)
 　

선택자는 style을 사용할 대상을 지정하는 것입니다. 하나의 선택자로 사용할 수 있고 여러 선택자를 그룹으로 같이 지정할 수도 있습니다. 
선택자 { 요소: 값 }
로 선택자에게 요소와 요소의 값을 지정합니다. 선택자를 선언하는 형식도 선택자 하나만 사용할 수 있고 선택자를 두개 이상 나열하고 여러개를 같이 지정할 수 있습니다. 아래가 선택자의 종류입니다.



type 선택자


H3 { font-size: 12pt; color: green; }
에서 H3을 type 선택자라고 합니다. 지정한 style을 사용할 택을 가리킵니다. 위의 대상은 <H3> 택을 가리키는데 이 택에 2개의 요소, font-size, color 로 글자 크기를 12pt로 색은 초록색으로 지정합니다.

class 선택자


택의 "class" 라는 속성으로 지정한 style을 사용할 수 있게 합니다. type 속성이 택에 지정하는 것과 달리 이것은 지정한 이름으로 아무 택에나 사용할 수 있습니다. 어떤 택 하나에 style을 지정해야 하는데, type로 지정하면 그 택외에도 같은 택들에게 style을 적용하지만 이것은 class 속성을 지정한 택에게만 style을 지정합니다. 그래서 type 보다 세밀하게 style을 적용할 수 있습니다. 
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
.my { font-size:12pt; color: red; }
-->
</STYLE>
</HEAD>
<BODY>
<H3 class="my"> 12pt 크기의 빨간색입니다. </H3>
<P class=my> 나도 12pt 크기의 빨간색입니다.</P>
</BODY>
</HTML>
class 선택자로 지정하는 style 구문은 점과 사용할 이름입니다. 이렇게 지정한 class 선택자는 각 택 안에서 class 속성으로 사용합니다. 특정 택에만 지정하는 것이 아니고 <택 class="class선택자 이름" 으로 지정한 택은 모두 사용할 수 있습니다. class 이름의 인용부호("")는 생략해도 됩니다.

이 선택자는 지정한 택에만 style을 사용해서 다른 선택자와 비교하여 더 세밀한 style을 지정할 수 있습니다. 그래서 많이 사용합니다.

"type" 같은 다른 선택자와 연계해서 사용할 수도 있습니다. 지정 형식은 "type" 선택자 다음에 붙여줍니다. 

<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
H3  { font-size:15pt; color: blue; }
H3.myLover  { font-size:12pt; color: red; }
-->
</STYLE>
</HEAD>
<BODY>
<H3> 15pt 크기의 파란색입니다. </H3>
<H3 class=myLover> 나는 12pt 크기의 빨간색입니다.</H3>
</BODY>
</HTML>
로 class 선택자를 덧붙인 <H3> 택에게만 지정합니다. 여기서 보듯이 class 선택자가 type 선택자보다 우선순위가 높습니다. 그래서 type와 class 선택자를 같이 지정하면 class 선택자가 사용됩니다.

ID 선택자


이 선택자는 class 선택자와 비슷하지만 이 선택자는 오직 하나의 택에서만 사용할 수 있습니다. 구문은 hash(#)와 이름입니다. 그리고 각 택에서 사용하기 위해서 ID 속성으로 사용합니다. 
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
#my { font-size:12pt; color: red; }
-->
</STYLE>
</HEAD>
<BODY>
<H3 ID=my> 12pt 크기의 빨간색입니다. </H3>
<P> 나는 12pt 크기의 빨간색이 아닙니다.</P>
</BODY>
</HTML>
이 선택자는 <IMG name="이름" src="image.jpg">처럼 택에게 이름을 지정하는 것과 비슷합니다. 이 이름을 대신하는 속성입니다. 그래서 script(JavaScript, VBscript)로 ID에 지정한 style 자체의 값을 수정할 수 있는 DHTML로 가는 관문 역활을 합니다.

복수 선택자


여러개의 선택자에 같이 style을 지정하게 합니다. 단순히 style 구문의 양을 줄일 수 있는 것입니다. 
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
H3, P, H3.my { font-size:12pt; color: red; }
-->
</STYLE>
</HEAD>
<BODY>
<H3> 12pt 크기의 빨간색입니다. </H3>
<H3 class=my> 나도 12pt 크기의 빨간색입니다. </H3>
<P> 나도 12pt 크기의 빨간색입니다.</P>
</BODY>
</HTML>
로 하면 페이지의 <H3> 택과 class=my 를 지정한 <H3>택 그리고 <P> 택에게 style을 지정합니다. 각 선택자의 구분은 쉼표(,)로 합니다.

자손(descendant) 선택자


택속의 택에게 지정하는 선택자입니다. 지정한 택 안에 있다면 다른 택속에 있는 택에도 지정합니다. 구문은 선택자 사이에 공백을 넣어주어서 지정합니다. 
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
H3 B { font-size:12pt; color: red; }
-->
</STYLE>
</HEAD>
<BODY>
<H3>
	<B>12pt 크기의 빨간색입니다.</B>
	<span><B>나도 12pt 크기의 빨간색입니다.</B><span>
</H3>
<H3> 나는 12pt 크기의 빨간색이 아닙니다.</H3>
</BODY>
</HTML>
로 <H3> 택 안의 모든 <B> 택에게 style을 지정합니다. 위의 style에서 <H3>이 부모고 <B>가 자손입니다. 같은 부모에 있는 모든 자손 택에 적용합니다.

자식(child) 선택자


택이 가지고 있는 바로 아래의 자식 택에게 style을 지정합니다. 부모와 자식 선택자 사이에 공백과 ">" 문자로 지정합니다. 
<HTML>
<HEAD>
<STYLE TYPE="text/css">
BODY > P { color: red }
</STYLE>
</HEAD>
<BODY>
<DIV>
	<P>빨간색이 아닙니다.</P>
</DIV>
<P>빨간색입니다.</P>
</BODY>
</HTML>
로 body 택이 가지고 있는 바로 아래의 <P>택에게 color: red 를 지정합니다. 자손택과 다른점은 자손 택은 부모가 가지고 있는 택이 다른 택의 자식일 때에도 듣지만 이것은 오직 부모 택에서 바로 아래에 있는 택들에게 style을 적용합니다.

nn4는 듣지 않고 ie4는 자손 선택자와 같은 동작을 합니다.

속성(attribute) 선택자


  • [att] : 속성을 가진 택
  • [att=val] : 속성=값 을 가진 택
  • [att~=val] : 속성과 속성의 값중에서 값이 값의 일부문자인 택
  • [att|=val] : 속성과 속성의 값중에서 값이 값의 시작 문자열인 택. 이것은 주로 "lang" 속성같은 경우 여러 언어를 지정할 때 사용합니다. "en", "en-US", "en-cockney" 같은 비슷한 이름의 다른 언어를 지정할 수 있습니다.

택의 속성과 속성값에 따른 지정입니다. nn4, ie4에서 지원하지 않습니다. 지정 방법은 위의 4가지 방식과 다른 선택자와의 조합으로 각 택의 속성과 속성의 값에 따른 택에게 style을 지정할 수 있습니다. 속성과 속성값을 "[" 와 "]"로 감싸줍니다. 

[href] { color: red }
로 하면 택에서 "href" 문자열의 속성이 있는 택에 style을 지정합니다.
<a href="some.htm"> 빨간색의 글자 </a> 으로 됩니다. 
H1[title] { color: blue; }
은 <H1> 택 중에서 "title" 이라는 속성을 가지고 있는 택에게 글자의 색을 파란색으로 지정합니다.

Adjacent sibling 선택자


같은 부모를 가진 택들 중에서 나란히 있는 두개의 택들에서 뒤의 택에게 style을 적용합니다. 구문은 선택자 사이에 "+" 문자를 넣습니다. 주로 두개의 택 사이의 거리를 조정할 때 사용합니다. 
<HTML>
<HEAD>
<STYLE TYPE="text/css">
H1 + H2 { margin-top: -5mm }   
</STYLE>
</HEAD>
<BODY>
<div><h1>...</h1> <h2>...</h2></div>
</BODY>
</HTML>
<h1> 다음에 오는 <h2>에게 <h1>과의 top 거리를 5mm만큼 좁힙니다.

nn4는 지원하지 않습니다.

Universal 선택자


모든 택에 style을 지정합니다. 별표문자(*)만 사용합니다. 
* { color: red }
로 지정하면 페이지의 모든 택에게 color: red를 지정한 것과 같습니다. 다른 선택자와 연결해서 사용할 수 있습니다. 
P + * {color:red }
로 지정하면 <P> 택 다음에 오는 택 글자의 색을 빨간색으로 지정합니다. <P> 택 다음에 오면 택의 종류는 상관이 없습니다. 
<HTML>
<HEAD>
<STYLE TYPE="text/css">
P + * { color: red }
</STYLE>
</HEAD>
<BODY>
<P> 나는 P택입니다. </P>
<B> 나는 빨간색 입니다.</B>
<P> 나는 P택입니다. </P>
<SPAN>나도 빨간색 입니다.</SPAN>
로 <P> 택 다음에 오는 택이 어떤 택이라도 style을 지정할 수 있습니다. 굳이 아래로 사용할 필요가 없습니다. 
p + b { color: red }
p + span { color: red }
속성 선택자에게 '*'는 같은 식으로 사용되므로 생략해도 됩니다. 그래서 *[LANG=fr] 과 [LANG=fr] 은 같습니다. *.warning 과 .warning , *#myid 와 #myid 도 서로 같은 지정입니다.

nn4, ie4 모두 지원하지 않습니다.

가상 class 선택자


실제로는 없는 html을 사용할 수 있게 합니다. 어떤 택의 첫번째 줄이나 첫번째 택같은 양식은 지정할 수 있는 HTML 택, CSS 요소가 없습니다. 이런 존재하지 않는 형식을 지정할 수 있게 하는 선택자입니다.

  • :first-child :
  • :link, :visited :
  • :hover, :active, :focus :
  • :lang :

구문은 colon(:)과 지정자입니다. 지정자는 이름이 아니고 style로 사용하는 약속된 단어, 지정자(keyword)입니다.


:first-child : 택에서 첫번째 자식에게 style을 지정합니다. 

P:first-child { text-indent: 50px; }

<P>
	<span> 단락에서의 들여쓰기 입니다.</span>
	<div> 들여쓰기 안합니다. </div>
</P>
으로 지정하면 <P> 택이 가지고 있는 맨 첫번째의 택을 오른쪽으로 50px 만큼 들여쓰기를 합니다. 
P:first-child EM { font-weight : bold }
는 <P>택의 첫번째 택이 가지고 있는 모든 <EM> 택의 글자들을 굵게 지정합니다.

:link, :visited 는 "href" 속성을 가지고 있는 <A> 택에게만 링크의 style를 지정합니다. :link는 방문하지 않은 링크의 style 설정이고 :visitied 는 방문한 링크의 설정입니다 . 
A:link { color: red }

<a href="http://www.some.com">빨간색의 링크</a>
로 페이지의 모든 링크의 색을 빨간색으로 지정합니다. 특정 링크만 지정하고자 하면 링크에게 class 를 같이 지정하면 됩니다. 
A.thisOnly:link { color: red }

<a class=thisOnly href="http://www.some.com">빨간색의 링크</a>
로 하면 "class=thisOnly" class 를 준 링크만이 빨간색으로 됩니다.

:hover, :active, :focus
사용자가 pointing device로 어떤 택에 동작할 때의 설정입니다. W3C의 문서에는 모든 택에 적용한다고 나와 있지만 주로 링크에게 마우스로 동작했을 때를 말합니다. nn4에서는 3가지 모두 지원하지 않고 ie4에서는 링크에서 :hover, :active 를 사용할 수 있고 :focus는 지원하지 않습니다.

  • :hover 는 마우스를 가져갔을 때의 설정.
  • :active 는 마우스를 누르고 있는 동안의 설정
  • :focus 는 폼의 <input> 택에 주로 사용하고 마우스로 <input>를 처음 누를때의 설정 
A:link    { color: blue } 
A:visited { color: red } 
A:hover   { color: yellow } 
A:active  { color: black }
위의 style은 페이지의 링크들의 색을 파란색으로 지정하고 방문한 링크는 빨간색으로, 링크를 마우스로 누르는 순간의 색을 검정색으로 누르고 있는 동안에는 노란색으로 지정합니다.

A:hover 는 A:link와 A:visited 다음에 지정해야하고 A:active는 A:hover 다음에 지정해야 합니다.

:lang

택의 lang 속성에서 :lang(언어)로 지정한 택에 지정합니다. 각 언어는 [RFC1766] 에 있습니다. 이 선택자는 '|=' 속성 선택자와 같은 지정입니다.

주로 사용하는 사용처는 각 언어에 맞는 style을 지정할 필요가 있을 때입니다. 

HTML:lang(fr) { quotes: '[RFC1766]' '[RFC1766]'}
언어 설정을 "fr"로 시작하는 문자로 지정한 문서의 quote를 [RFC1766] 에 지정되어 있는 문자로 지정합니다.

[T I P] 2개의 다른 hover 설정하기

:hover는 링크에 마우스가 갔을 때의 지정입니다. 그래서 링크의 색상, 밑줄같은 여러 style을 지정할 수 있습니다. 아직 이것이 ie4이상만 지원이 되고 nn4에서는 지원되지 않습니다.

페이지에 있는 모든 링크들에게 같은 style 을 hover로 지정하지 않고 서로 다르게 지정할 수 있습니다. 방법은 class 선택자와 같이 사용하는 것입니다. 

<style>
a.red:hover{color:red}
a.yellow:hover{color:yellow}
</style>

<a href="#" class=red>red</a> 
<a href="#" class=yellow>yellow</a>
로 지정하면 하나는 빨간색으로 되고 다른 하나는 노란색이 됩니다. 이렇게 다른 설정이 필요한 링크에게 각 class 이름을 지정하고 :hover를 지정하면 서로 다른 지정을 사용할 수 있습니다.

가상 element 선택자


"가상 class 선택자" 와 비슷하게 실제로는 없는 html을 사용할 수 있게 합니다. class나 ID 와 다르게 colon(:)과 지정자 이름을 붙여서 사용합니다. block element에게 사용됩니다.

  • :first-line
  • :first-letter
  • :before, :after


:first-line 택의 첫번째 줄을 다룹니다. 
P:first-line { text-transform: uppercase }

<P>
이것은 <br>
 대문자입니다. 
</P>
에서 "이것은" 문자열을 대문자로 바꿉니다. 실제로는 없는 택이지만 택을 지정하는 효과를 냅니다.

:first-letter 택의 첫번째 문자를 다룹니다. 주로 어떤 단락의 첫번째 문자를 크게할 때 사용합니다.

같이 사용할 수 있는 요소들입니다. font, color properties, background,'text-decoration', 'vertical-align', 'text-transform', 'line-height', margin, padding, border, 'float', 'text-shadow', 'clear'

:before, :after 택의 앞, 뒤에 특정 문자, counter, marker 등을 넣을수 있는 것입니다. "content" 요소와 함께 사용합니다. "content" 요소를 참고 하세요.. 

H1:before {content: "주의!! "}
<H1> 택의 글자들 앞에 "주의!! " 라는 문자열을 추가합니다.

선택자 이름짓기


class, ID 선택자의 이름으로 지정할 수 있는 것은 문자 A-Z, a-z, 숫자 0-9, ISO 10646 문자 161 이상, hyphen(-), backslash(\)와 함께 사용하는 특수문자(escaped)입니다.

이름의 시작문자는 hyphen 이나 숫자는 사용할 수 없습니다. 그리고 nn4, ie4에서 underscore(_)도 시작문자로 사용할 수 없고 ie4에서는 hyphen은 시작문자로 지정해도 작동은 합니다.

선택자의 이름에 영어 대소문자는 상관이 없습니다. html 문서에서 선택자의 이름은 대소문자를 구분하지 않기 때문입니다. 그래서 "class=Aa" 나 "class="AA"는 같은 선택자를 사용하는 것입니다. 다만, XML같은 다른 종류의 문서에서는 구분을 하고 JavaScript로 html문서를 다룰때도 영어 대소문자를 구별합니다.

class와 ID의 차이점

class, ID는 택의 속성으로 지정하는 선택자로 지정한 택에게만 지정해준 style을 사용하게 합니다. 둘다 같은 동작을 하지만 차이점이 하나 있습니다. 
#id2 { color: red }
.class2 { color: green }

<H2 id=id2> id2 ID를 지정했습니다. </H2>
<H2 id=id2> 나도 id2 ID를 지정했습니다. </H2>

<H3 class=class2> class2 class를 지정했습니다. </H3>
<H3 class=class2> 나도 class2 class를 지정했습니다. </H3>
로 지정하면 위의 두개의 <H2> 택은 빨간색의 글자로 나오고 두개의 <H3> 택은 초록색의 글자로 나옵니다. 즉, ID와 class 는 선언한 style을 택에 지정하는 속성입니다. 여기까지는 class와 ID는 차이가 없습니다. 하지만, CSS는 문서의 양식을 표현하는 기능뿐만이 아니고 CSS로 지정한 문서의 양식을 JavaScript같은 script로 변경할 수 있는 DHTML로 사용이 가능합니다. 이때, 변경할려는 택에는 이름이 있어야 합니다. 이 이름을 지정하는 것이 ID입니다 . 
택에 지정한 ID 이름.택의 style요소 = 변경할 요소
로 하면 ID를 가지고 있는 택의 style요소를 변경할 수 있습니다.

이렇게 단순히 페이지의 양식을 지정할 때에는 class, ID 둘다 사용할 수 있지만 ID는 이름을 지정하는 것이기 때문에 같은 이름은 하나만 있어야 합니다. 두개 이상의 같은 이름을 사용한 ID는 페이지에 나중에 지정한 택이 그 ID의 이름을 가집니다. 

택에 지정한 ID 이름.택의 style요소 = 변경할 요소
로 지정하면 위의 소스에서 두번째의 <H2>택에 요소를 변경합니다. 첫번째의 <H2> 택은 변하지 않습니다.

이렇게 여러택에 양식을 지정할 때에는 class를 사용하고 script로 style 양식을 제어할 때 ID를 사용합니다.


 

'강의실 > css' 카테고리의 다른 글

<DIV>와 <SPAN>  (0) 2007.07.25
property와 value 사용하기  (0) 2007.07.25
css2 들어가기  (0) 2007.07.25
선택지 사용하기 ID  (0) 2007.07.25
선택자 사용하기-class  (0) 2007.07.25

'강의실/css' Related Articles

티스토리툴바