2012년 10월 5일 금요일

[CSS-웹표준 교과서]3. 선택자와 가상 클래스.가상 요소

@ 선택자와 가상클래스, 가상 요소


- CSS 에서는 패턴 매칭(pattern matching) 규칙을 근거로 스타일을 적요하는 요소를 결정한다. 여기서 '패턴'은 선택자의 지정방법과 조합하는 방법을 말하며 이를 사용하여 스타일의 적용대상을 결정한다. 또 가상 클래스와 가상 요소라는 조금 복잡한 방법을 사용하여 스타일을 적용하는 것도 가능하다.


1. 타입 선택자와 전체 선택자

# 타입 선택자(요소명)

- 요소명만 선택자로 하는 것을 타입 선택자(type selector)라고 한다.

body {
 color : black;
 background-color : white;
}

# 전체 선택자(*)
- 요소명이 아니라 애스터리스크(*)를 기술하여 모든 요소에 대한 스타일을 지정할 수 있다.

 * {  
  color : black;  
  background-color : white ;  
  }  

 - 전체 선택자는 class 선택자나 id 선택자, 속성 선택자, 가상 클래스, 가상 요소에서 한 종류라도 함께 사용할 때엔 생략할 수 있다.
  • '*.note'와 '.note'는 같다.

2. class 선택자와 id 선택자

- class 선택자와 id 선택자는 특정 요소를 대상으로 스타일을 적용하기 위한 것이다.
- class 선택자와 id 선택자의 차이는 문서 안의 '복수'의 요소에 스타일을 적용하는 것인가 아니면 '유일'한 요소에 스타일을 적요하는 것인가이다.

# class 선택자(요소명, class명)
- 요소명에 피어리드(.)와 class명(임의의 이름)을 붙여 구별한다.
 p.note { color : red; }  
 <p class="note"> 웹 콘텐츠 접근성.. </p>  


 - 요소명을 지정하지 않고 피어리드(.)와 class명만 기술하는 경우나 요소명 대신 전체 선택자(*)를 지정하는 경우에는 모든 요소에 그 스타일을 지정할 수 있다.
 .note { color : red; }  
 <p class="note"> 웹 콘텐츠 접근성.. </p>  

 *.note { color : red; }   
  <p class="note"> 웹 콘텐츠 접근성.. </p>   

- class 선택자를 복수 적용하는 경우 class 속성에 공백문자로 구분하여 class명을 나열한다.

 *.note { color : red; }   
 p.emph { text-decoration : underline; }  
  <p class="note emph"> 웹 콘텐츠 접근성.. </p>   

- 복수의 class 명을 동시에 지정할 수 있게 되었다.

 p.note.emph { color : red; text-decoration : underline; }  
  <p class="note emph"> 웹 콘텐츠 접근성.. </p>   

# id 선택자(요소명 #id 명)

 - id 선택자는 문서 안에 있는 단 하나의 요소에 스타일을 적용하는 경우에 사용한다. [하나의 문서 안에 한 번빡에 출현 할 수 없다.]

div#gnavi { font-size : small ; }

 div#gnavi { font-size : small ; }  
 <div id="gnavi" >  
  <ul>  
  <li><a href="./references/">리퍼런스</a></li>  
  <li><a href="./tips/">팁</a></li>  
  </ul>  
 </div>  

# class 선택자와 id 선택자로 사용할 수 있는 문자

- CSS2 에서는 선택자명은 반드시 알파벳(a~z, A~Z)으로 시작하고 알파벳, 숫자(0~9), 하이폰(-), Unicode(ISO 10646) 에서 인정하는 일부문자로 구성해야 한다.그리고 알파벳의 대문자와 소문자를 구별한다. [ 콜론(:), 피어리드(.) 를 사용할 수 없다]

# name 속성과 id속성의 충돌 문제

- XHTML1.0에서는 이전 버전의 브라우저와의 호환성을 위해 a 요소 등에 name 속성과 id 속성을 모두 같은 값으로 지정하면 스타일이 충동할 가능성이 있다.

 a [name="c01"]{color : maroon; }  
 a#c01 { color : purple; }  
 <a href="./chapter1.html" name="c01" id="c01">충돌 </a>  
- 이 같은 지정은 하나의 대상에 대해 속성 선택자와 id 선택자가 충돌한다.
- 스타일 개별성 규칙에 따르면 'a[name="c01"]'은 '11', 'a#c01'를 '101'이므로 id 선택자가 우선된다.

 a [name="c01"]{color : maroon !important; }  
 a#c01 { color : purple; }  
 <a href="./chapter1.html" name="c01" id="c01">충돌 </a>  
- 이 경우 위와 같이 !important 선언을 사용하여 속성 선택자를 우선시킬 수 있다.

# '구조와 표현'의 충돌 문제

- 구조와 표현의 충돌을 피하려면 div 요소나 span 요소 남용을 자제하고 class나 id 선택자는 의미(semantic)에 맞는 이름을 사용하는 것이 중요하다.


3. 속성 선택자


- 속성 선택자(attribute selector)는 특정 속성명이나 속성값을 가진 요소에 스타일을 적용하기 위한 선택자다. 속성 선택자에는 네 가지 서식이 있다.

# 요소명[속성명]

 - 요소 중에 그 속성명을 가진 요소에 스타일을 적용한다. 속성값은 관계없다.
 h3[id] { color : olive; }  
 <h3 id="r508">속성값은 상관없다 </h3>  

# 요소명[속성명="속성값"]

 - 요소 중에 그 속성명과 속성값을 가진 요소에 스타일을 적용한다.
 h3[id="r508"] { color : olive; }  
 <h3 id="r508">속성값은 상관있다 </h3>  

# 요소명[속성명~="속성값"]

- 요소 중에 그 속성명을 가지고 속성값을 공백문자로 구분하여 복수지정한 경우 그 속성 값이 포함된 요소에 스타일을 적용한다.

 p[class~="note"]{color:red; }  
 <p class="w3c wcag note">복수지정한 경우 적용</p>  

# 요소명[속성명|="속성값"]

- 요소 중에 그 속성명을 가지고 속성값을 하이픈(-)으로 구분하여 복수지정한 경우, 그 속성값의 앞 부분이 일치하도록 포함된 요소에 스타일을 적용한다. 일반적으로 lang 속성에 사용된다.

 *[lang|="en"] { font-family : Verdana, Arial, sans-serif; }  
 <p>  
 <span lang="en-US"> Time files like an arrow. </span>  
 </br>  
 <span lang="ko">시간은 화살처럼 빠르다.</span>  
 </p>  
 <p>  
 <span lang="fr">블라블라</span>  
 </br>  
 <span lang="ko">블라블라</span>  
 </p>  
- 'en-US'라는 언어코드에만 속성이 적용된다.

- lang 속성은 HTML 4.01 과 XHTML 1.0에는 사용할 수 있지만 XHTML 1.1에서는 폐지되었기 때문에 속성 선택자에도 lang  속성이 아니라 xml:lang 속성을 사용한다.
 *[xml:lang|=*en*] { font-family : Verdana, Arial, sans-serif; }  

- 속성 선택자는 CSS2에 새롭게 도입된 선택자이며 일부 브라우저가 지원하지 않는 점에서 주의하자.

4. 선택자 조합


- 타입 선택자(요소명)나 전체 선택자(*)는 조합하여 지정할 수 있다. class선택자나 id 선택자, 속성 선택자 등과 함께 사용할 수 있다.

# 선택자와 선택자(공백문자로 구분)

 - 부모 요소에 포함된 모든 자식 요소를 대상으로 스타일을 적용하는 방법이며 자손 선택자라고 한다.
  div.note p{color :red}  
  div.note p abbr {text-decoration : underline }  
  <div class="note">  
 <p> 자식이다 <abbr title="w3c">W3C</abbr> </p>  
 </div>  

- div 요소와 p 요소 사이에 전체 선택자(*)가 지정되어 있으므로 p요소가 div 요소의 직접적 자식 요소는 스타일이 적용되지 않고 자식 요소 이하의 경우에 스타일이 적용된다.(손자가 p이면 적용)
 div * p { color : blue; }  

 # 선택자 > 선택자(왼쪽 부등호로 구분)

 - 부모 요소 바로 뒤의 자식 요소(자식 요소 이하를 포함하지 않는다)를 대상으로 스타일을 적용하는 방법이며 자식 선택자(child selector)라고 한다.
  blockquote.wcag > p {font-size : small; }  
  <blockquote class="wcag" cite="http://www.w3c.org/TR/WAI-WEBCONTENT">  
  <p> 부모 요소 바로 뒤의 자식 요소 선택</p>  
  </blockquote>  

 - 자식 선택자를 연결하여 스타일을 적용하는 대상의 범위를 더 좁힐 수 있다.
 blockquote.wcag > p> abbr {text-decoration : underline; }  

 - 하위 선택자 등 다른 조합 방법으로 사용할 수도 있다.
 blockquote.wcag > ul p {font-size: small ; }  

# 선택자 + 선택자(플러스기호로 구분)

- 문서 트리구조상 동일한 부모 요소를 가진 병렬 관계에 있는 요소 가운데 먼저 등록한 요소를 형 요소, 나중에 등록한 요소를 동생 요소라 한다. 인접 선택자는 요소의 직접적 동생 요소를 대상으로 스타일을 적용하는 방법이며 선택자와 선택자 플러스기호(+)로 구분하여 지정한다.
 h1+h2 { color : green;}  
 <h1>선택자 형</h1>  
 <h2>선택자 동생</h2>  

 - 아래 같은 경우는 적용 안된다.
 h1+h2 { color : green;}  
 <h1>선택자 형</h1>  
 <p> 적용 안된다 </p>  
 <h2>선택자 동생</h2>  

- 아래 같은 경우도 가능하다.
 h1+h2+h3 { color: green;}  

 h1.chapter+h2.chapter+h3.chapter { color: green;}  

# 선택자 그룹화

- 선택자는 콤마(,)로 구분하여 그룹화하고 복수의 요소에 같은 스타일을 한 번에 적용할 수 있다.
 th, td { font-size : small; }  

 div#title dl, div#title p {display : none; }  

6. 가상 클래스


- 가상 클래스는 스타일을 적용하는 대상을 요소명이나 속성명, 속성값에 따라 분류하는 것이 아니라 '상황'에 따라 분류한다.

#:first-child 가상 클래스

- :first-child 가상 클래스는 부모 요소의 범위에서 처음 등장하는 자식 요소에만 스타일을 적용한다.

 div > p:first-child { text-indent: 0;}  
 <p> 앞 단락 </p>  
 <div class="note">  
  <p> 최초 단락 </p>  
 </div>  
- div 요소에 포함된 직접적 자식 요소 중 최초에 등장하는 p 요소에만 스타일이 적용

 div > p:first-child { text-indent: 0;}  
 <p> 앞 단락 </p>  
 <div class="note">  
  <h3>주의</h3>  
  <p> 최초 단락 </p>  
 </div>  
- div의 직접적 자식 요소이지만 최초에 등장하는 자식 요소가 아니기 때문에 스타일 적용 안됨.

 p:first-child em {font-weight : bold; }  
 <div class="note">  
   <p> 주의문 <em>최초</em>의 단락 </p>  
   <p> 주의문 <em> 두번째 </em> 의 단락 </p>  
 </div>  
- 자식 요소로 최초에 등장하는 p요소 중에 하위 요소로서 포함된 em 요소에 스타일이 적용된다. (두번째 em요소에는 적용안됨)

# 링크 가상 클래스(:link, :visited)

- :link : 아직 열린 적이 없는 페이지로의 링크에 적용된다.
- :visited : 이미 열린 적 있는 페이지로의 링크에 적용된다.

 :link { color : blue; }  
 a:link { color: blue; }  
 a[href]:link {color:blue; }  
 :visited { color:purple; }  
 a:visited { color:purple; }  
 a[href]:visited {color:purple;}  
- (X)HTML 에서 각각 의미가 같은 것이 된다.(다만 개별성은 각각 위에서부터 '10','11','21'이라는 차이가 있다.

- 링크 가상 클래스는 class선택자나 id 선택자와 조합하여 지정하는 것도 가능하다.
 a.external:link {color : blue;}  
 a.external:visited {color:purple;}  
 <a class="external" href="http://www.w3c.net">w3c</a>  

 div#gnavi a:link {color : blue;}  
 div#gnavi a:visited {color : purple; }  
 <div id="gnavi">  
   <ul>  
    <li><a href="./references/">리퍼런스</a></li>  
    <li><a href="./tips/">팁</a></li>  
    <li><a href="./reported/">리포트</a></li>  
    <li><a href="./selected/">추천</a></li>  
   </ul>  
 </div>  

# 다이내믹 가상 클래스(:hover, :active, : focus)

- :hover => 어떤 요소를 마우스 커서 등의 지시 장치로 가리키는 경우 표시되지만 활성 상태가 아닌 경우에 적용된다.
- :active => 어떤 요소가 활성 상태일 때 적용된다. 예컨대 사용자가 그 요소를 마우스로 클릭한다든지 실행키를 누른 다음 손을 떼기까지의 시간 등이 해당된다.
- :focus => 어떤 요소가 포커스될 때 적용된다. 단축키나 Tab키 등의 키보드 입력에 의한 포커스나 텍스트 입력폼이 포커스되는 경우가 해당된다.

 a:link { color : blue; }  
 a:visited { color : purple; }  
 a:hover { color: yellow; }  
 a:active { color: red; }  

- 여기서 :link 가사 클래스, :visited 가상 클래스, :hover 가상 클래스, :active 가상 클래스라는 지정순서에 주의해야 한다.

 a:focus {background-color : yellow; }  
  a:focus :hover { background-color : fuchsia; }  

- CSS1에서는 :active 가상 클래스는 :link 가상 클래스, :visited 가상 클래스와 함께 앵커 가상 클래스로 분류되어 a 요소에만 지정할 수 있었고, 이들 가상클래스는 상호 배타적인 것으로 분류 되어 있었다.

- CSS2에서는 :active 가상 클래스는 다이내믹 가상 클래스에 분류되어 링크 가상 클래스와 상호배타적이지 않는다.

- :focus 가상 클래스는 아우트라인 관련 속성과 조합하여 사용되는 경우가 있다.(여백을 제외하고 선이 그어짐)

 :focus {outline : 2px dotted red }  

# 언어 가상 클래스(:lang)


 *.lang(en) { font-family : Verdana, Arial, sans-serif; }   
  <p>   
  <span lang="en-US"> Time files like an arrow. </span>   
  </br>   
  <span lang="ko">시간은 화살처럼 빠르다.</span>   
  </p>   
  <p>   
  <span lang="fr">블라블라</span>   
  </br>   
  <span lang="ko">블라블라</span>   
  </p>   

- 'en-US'라는 언어코드에만 속성이 적용된다.


7. 가상 요소

 # :first-line 가상 요소

 - 어떤 요소의 첫 번째 줄에만 스타일을 적용하는 데는 :first-line 가상 요소를 사용한다.

 p:first-line { font-weight : bold; }  
 <p> 블라블라.. </p>  

 - 적용 가능 속성
  • color
  • word-spacing
  • 배경 관련 속성
  • 글꼴 관련 속성
  • text-transform
  • clear
  • text-decoration
  • line-height
  • text-shadow
  • vertical-align
  • letter-spacing

 # :first-letter 가상 요소

 - 인쇄 매체에서  '드롭 캡'이나 '이니셜 캡'이라 하는 레이아웃 방법을 실현하기 위한 가상 요소이다.

  p:first-letter {  
      float : left;  
      font-weight : bold;  
      font-size : 200%;  
  }  
  <p> 하하하히히히 </p>  

 - 적용 가능 속성
  • color
  • float
  • 배경 관련 속성
  • 글꼴 관련 속성
  • text-transform
  • clear
  • text-decoration
  • line-height
  • text-shadow
  • vertical-align

  •  p { color : black; }  
      p:first-line { color : blue; }  
      p:first-letter {color : red; }  

    # :before 가상 요소와 :after 가상 요소

    - :before 가상 요소와 :after 가상 요소는 어떤 요소에 포함된 내용의 앞뒤에 내용을 생성하기 위한 가상 요소다.

     p.note: before { content : "Note!";}  
     <p class="note"> 사용자...</p>  
    

     p.note: before { content : "Note!";}  
     p.note:first-letter {color :red; }  
    

     p.note: before { content : "Note!";}  
     p.note {border : 1px solid blue; }  
    

     q {font-style : italic }  
     q:before {  
         content : "Note!" ;  
         color : green ;  
     }  
    

     body :after {  
       content : "종료" ;  
       display : block ;  
       margin-top : 20px ;  
       text-align : center ;  
     }  
    

    댓글 없음:

    댓글 쓰기