2014-06-13
참조 : http://www.carpeau.net/?p=168


삭제 대비용 원본글 복사

  • 속성 선택자(attribute selector)는 매우 편리한 도구이다. 이 선택자를 사용하면 href라는 속성이 있는지 또, 구체적으로 그 속성값으로 엘리먼트를 선택해서 스타일을 부여할 수 있게 할 수 있다.아래에 나오는 예제를 보고 참고하자.

    ※ title이라는 속성을 갖는 모든 링크는 빨간색으로 만들 수 있다.
    
    a[title] {
      color : #c00;
    }
    
    ※ 좀 더 구체적으로, rant라는 클래스를 갖는 모든 문단은 굵고 대문자로 보여진다.
    
    p[classs="rant"] {
      font-weight : bold;
      text-transfor : uppercase;
    }
    
    <p class="rant" >But I am done apologizing. I am reallizing... </p>
    
  • 자식선택자를 사용하면 정의된 요소의 바로 한 단계 하위에 있는 자식요소를 선택할 수 있다. 예를 들면 페이지에 있는 나머지 링크는 그대로 놔두고 특정 리스트의 바로 한 단계 아래에 있는 링크만 다른 스타일을 지정할 수 있다.아래에 나오는 예제를 보고 참고하자.

    ※ 이 스타일은 <div> 엘리먼트의 한 단계 하위인 <a> 엘리먼트에 대해서만 영향을 끼친다. 
    
    div > a {
      text-indent: -9990px;
    }
    
    <div>
       <a href="#content">Skip to content</a>
       <ul>
          <li><a href="#Andy">Andy buddy</a></li>
          <li><a href="#Jermy">Jermy Keith</a></li>
          <li><a href="#Richard">Richard Rutter</a></li>
       </ul>
    </div>
    
  • 인접 형제 선택자는 2개의 선택자 사이에 + 조합자가 들어가는 형태로 구성된다. 이 선택자는 마크업의 순서상 앞에 정의된 선택자 바로 다음에 두 번째 선택자가 놓인 경우를 선택한다. 반드시 두 엘리먼트 모두 동일한 부모를 갖는 구조이어야 한다.아래에 나오는 예제를 보고 참고하자.

    h2 + p {
      font-size : 110%;
      border-bottom : 1px solid #666;
    }
    
    <h2>Carpeau</h2>
    <p>Let's share web information!</p>
    <p>I come back home!</p>
    
  • 가상클래스(pseudo-classes)와 가상요소(pseudo-elements)를 사용하면 DOM에 정의되지 않은 내용을 기반으로 엘리먼트를 찾아 스타일을 적용할 수 있다. 아래에 나오는 예제를 보고 참고하자.

    ※가상클래스는 개념적인 관계에 따라 특정 엘리먼트를 선택할 수 있게 해 준다.
       - 가상클래스 :first-child의 경우 어떤 엘리먼트의 첫 번째 자식 엘리먼트를 지칭한다.
    
    div.news p:first-child {
      font-size : 110%;
      font-weight : bold;
    }
    
    <div class="news">
       <p>We are really pleased that this year d.Construct sold out in...</p>
       <p>Brighton is a popular little spot and hotels get booked</p>
    </div>
    
    ※가상크래스 중에는 동적인 가상클래스(dynamic pseudo-class)라는 것도 있다.
        - :focus를 사용하면 엘리먼트에 포커스가 맞춰지는 동안만 스타일이 적용된다.
    
    input[type=text]:focus {
      color : #000;
      background-color : #ffc;
    }
    
    ※다른 가상클래스 :lang과 같은 언어 가상클래스도 있다.
        - :lang을 사용하면 사이트 전반에 사용된 언어와는 다르게 특정 언어로 만들어진 컨텐츠
        부분에 다른 스타일을 적용할 수 있다. 
    
    blockquote:lang(de) {
      padding-right : 30px;
      background : url(images/de.png) no-repeat right top;
    }
    
    <blockquote lang="de">
       <p>Die Webkrauts setzen sich dafur ein...</p>   
    </blockquote>
    <p>Brighton is a popular little spot and hotels get booked</p>
    
    ※가상요소도 마찬가지로 DOM에 정의되지 않은 내용을 기반으로 특정 부분을 찾아서 스타일을 지정할
        수 있게 한다. 
        - :first-line은 문단 또는 텍스트의 첫 줄을 지칭한다. 브라우저 창 크기나 글자 크기에 따라서
        한 줄에 보이는 글자 수는 달라질 수 있다. 
    
    p:first-line {
      font-size : 120%;
      font-style : italic;
    }
    
    - :first-letter는 엘리먼트의 첫 번째 글자나 숫자를 지칭한다.
    
    p.intorduction:first-letter {
      font-size : 400%;
      font-weight : bold;
    }