CSS 시작하기 안내서의 5번째 장; 여기서는 Style을 선택적으로 적용하는 방법과, 선택자의 종류에 따라 우선순위가 어떻게 다른지 설명한다. 예제 문서에서 태그에 속성을 추가해보고 샘플 스타일시트내에서 이 속성들을 사용해보자.

정보: 선택자

CSS에는 CSS 언어를 설명하는 고유의 용어가 있다. 이 안내서에서 이전에 여러분은 다음과 같은 스타일시트를 생성하였다.

strong {
  color: red;
}

CSS 용어로는 위 전체 라인을 규칙이라 부른다. 이 규칙은 strong으로 시작하며 strong은 선택자 또는 선택자 목록이다. 선택자는 규칙이 적용될 DOM의 요소들을 선택한다.

세부사항

중괄호, {} 내의 부분은 선언부이다.

키워드 color속성이고, red는 이다.

속성-값 쌍 뒤에 붙는 세미콜론은 동일한 선언부내에서 다른 속성-값 쌍과 구분한다.

이 안내서에서 strong과 같은 선택자는 태그 선태자라 부른다. CSS 규격에서는형식 선택자로 부른다.

이 페이지에서는 CSS 규칙에서 사용할 수 있는 선택자에 대해 좀더 자세히 설명한다.

태그 이름 외에도 선택자에서는 속성 값을 사용 할 수 있다. 이 방법으로 규칙을 보다 특정적으로 만들 수 있다.

CSS에서 두가지 속성은 특별한 상태를 갖는다. classid가 그렇다.

Class 선택자

이름을 갖는 클래스에 요소를 배정하기 위해서는 요소내의 class 속성을 사용한다. 어떤 클래스의 이름을 고르는가는 여러분 몫이다. 문서내에서 동일한 클래스 값을 갖는 요소는 여러개가 될 수도 있다.

스타일 시트에서 클래스명을 선택자로 사용하려면 도트(.)를 클래스명 앞에 붙인다.

ID 선택자

 요소에 아이디를 지정하려면 요소내에 id 속성을 사용한다. 어떤 ID 이름을 고르는가는 여러분의 몫이다.단, ID 이름은 문서에서 유일해야 한다.

선택자에서 ID룰 사용하려면 숫자기호(해시)를 앞에 붙인다.

에제
클래스 속성과 아이디 속성을 갖는 HTML 태그를 예로들어 보자.
<p class="key" id="principal">

원칙적으로 id 속성 값은 문서내에서 유일한 값이어야 하지만 클래스명 key는 문서내의 다른 태그에서도 사용할 수 있다.

CSS 스타일시트에 정의된  이 규칙은  클래스명이 key인 모든 요소를 녹색으로 만든다. (그러나 모든 <p> elements는 아닐 수도 있다.)

.key {
  color: green;
}

이 규칙은  idprincipal인 모든 요소들을 굵은체로 만든다.

#principal {
  font-weight: bolder;
}

 

속성 선택자

특별한 속성이 class와 id로만 제한된 것은 아니다. . 꺽쇠괄호, []를 사용하여 다른 속성들 을 지정할 수 있다. 괄호 내에는 속성의 이름을 지정하며 일치 검색자와 값을 사용할 수도 있다. 값뒤에 "i"를 덧붙이면 대소문자 구분하지 않고 일치여부를 확인할 수 있지만 많은 브라우저에서 아직 지원하지 않는다.

예:

[disabled]
"disabled" 속성을 갖는 모든 요소를 선택한다.
[type='button']
type 속성이 "button"인 요소를 선택한다 .
[class~=key]
클래스가 "key"인 요소들을 선택한다. ("keyed", "monkey", "buckeye"등은 선택하지 않는다). 기능적으로는 .key와 동일하다.
[lang|=es]
lang 속성이 es인, 즉 스페인어인 요소들을 선택한다. 여기에는 "es" 와 "es-MX" 등이 포함되지만 "eu-ES" (Basque임)는 포함되지 않는다.
[title*="example" i]
title 속성값에 "example"이포함된 요소들을 선택한다, 대소문자는 무시하고 검색. "i" 플래그를 지원하지 않는 브라우저에서 이선택자는 어떤 요소도 선택하지 않을 것이다.
a[href^="https://"]
속성값이 무엇으로 시작해야할지 지정한다. 이예에서는 보안 링크를 선택한다.
img[src$=".png"]
제공된 문자열로 끝나는 값을 갖는 요소들을 선택한다. 이예에선는 PNG 이미지를 선택할 것이며 "png"로 끝나지 않는 URL을 갖는 모든 이미지(예를들면 `src="some-image.png?_=cachebusterhash"`)는 선택되지 않을 것이다.

의사클래스(가짜 클래스,Pseudo-classes) 선택자

CSS의 pseudo-class는 특정 상태를 갖는 요소를 지정하기 위해 선택자에 추가되는 키워드이다. 예를들어 :hover는 사용자가 요소 위로 커서를 움직고 있는 상태를 선택자에 추가하게 된다.

(의사요소(pseudo-elements)를 포함하여)의사클래스(Pseudo-classes)는 문서내의 내용에 연결할 뿐 아니라 외부 요인과의 연결, 예를들어 네비게이터 히스토리 (:visited), 내용의 상태 (:checked와 같은 폼의 요소), 마우스 위치(요소위에 마우스 커서가 있는지 여부를 가리키는 :hover)등을 스타일에 적용할 수 있도록 한다. 선택자 전체 목록은  CSS3 Selectors working spec를 참조한다.

문법
selector:pseudo-class {
  property: value;
} 

의사클래스 목록

선택자 목록

선택자를 분리하기 위한 구분자인 컴마(,)를 사용하여 여러 선택자를 한 규칙에 포함시킬 수 있다.

이 예에서는 클래스명이 "content-1"인 요소들과 "content-2"인 요소들이 굵은 글씨체로 표시될 것이다.

.content-1, .content-2 {
  font-weight: bold;
}

Information: Specificity

복수의 선택자가 동일한 요소를 가리키는 경우가 있다. 한 속성이 한 규칙에만 주어진다면 혼동될 이유가 없고 속성은 그 요소에만 대입될 것이다. 한개 이상의 규칙이 한 요소에 적용되고 동일한 속성에 대입된다면 CSS는 그규칙들 중에 보다 특정(specific)적인 선택자를 갖는 규칙에 우선권을 준다. ID 선택자는 클래스, 의사 클래스나 속성 선택자등 보다 더 특정적이며, 또한 이들은 태그나 의사 요소 선택자들보다 더 특정적이다.

상세설명 
선택자들은 결합할 수 있으며 이경우 보다 특정적인 선택자를 만든다. 예를들어 선택자 .key는 클래스명이 key인 모든 요소를 선택한다. 선택자 p.key는 클래스명이 key인 <p> 요소들만 선택한다.

만약 스타일시트 내에서 동일한 특정성을 가리키는 혼동되는 규칙들이 발생하면 CSS는 스타일시트내에서 위치가 뒤에 있는 규칙에 우선순위를 둔다.

혼동이 있는 규칙과 마주하게 되면 규칙중에 한쪽을 보다 특정적으로 만들어서 우선순위를 갖도록 해야 한다. 이것이 불가능할 경우 규칙의 위치를 다른 것에 비해 뒤로 두어 우선하도록 만든다.

중요: 관계에 기반한 선택자

CSS에는 요소들의 관계를 기초로 요소들을 선택할 수 있는 방법이 있다. 이 방법을 사용하면 보다 특정적인 선택자를 만들 수 있다.

관계에 기반한 일반적인 선택자들

선택자 선택결과
A E A 요소의 후손인 모든 E 요소(즉  자식요소, 그 자식의 자식요소,..등등)
A > E A 요소의 자식, 즉 바로 밑의 후손인 모든 E 요소.
E:first-child 부모요소의 첫번째 자식요소인 모든 E 요소.
B + E B 요소와 형제 요소, 즉 동일한 부모요소를 갖는 E 요소.

복합적인 관계를 나타내기 위해 이 선택자들을 결합하여 사용할 수 있다.

모든 요소를 의미하는 '*'(asterisk)도 사용 할 수 있다.

예제

아래 HTML테이블에는 id속성이 있지만 행과 열에는 개별적인 식별자가 없다.

<table id="data-table-1">
...
<tr>
<td>Prefix</td>
<td>0001</td>
<td>default</td>
</tr>
...

<--번역 수정중 -->

이규칙은 첫번째 열을 굵은 글씨로 만들고, 각 열의 두번째 셀은 등간격폰트로 만든다. 이는 document내의 해당 Table에만 영향을 미친다.

    #data-table-1 td:first-child {font-weight: bolder;}
    #data-table-1 td:first-child + td {font-family: monospace;}

결과는 아래와 같다.

Prefix 0001 default
좀더 자세히

일반적으로, 설렉터 조건을 많이 선언할 수록 우선 순위가 점점 높아진다.

이와 같은 기법을 사용할때, document내에 있는 많은 tag들에 class나 id로 할당하는 수고를 CSS를 사용함으로써 덜수 있다.

일정이 급한 대량의 디자인을 해야 할 경우, 이런 방법으로 element간 복잡한 관계설정을 피함으로써 효율적으로 Stylesheet를 만들수 있다.

테이블에 대한 더 많은 예제는 CSS 참조페이지(테이블)를 통해 확인 해 보라.

액션: class와 ID 설렉터 사용법

  1. 예제 HTML파일을 열어서 아래 문단을 복사해 넣어라.
  2. idclass 속성을 위에서 복사해 넣었던 곳에 추가하라. 다시 복사 한번더 넣어서 아래 보이는 것 처럼 id속성만 추가 하라. 혹은 그냥 아래 전체를 두번 복사해 넣어라.
    <!doctype html>
    <html>
      <head>
      <meta charset="UTF-8">
      <title>Sample document</title>
      <link rel="stylesheet" href="style1.css">
      </head>
      <body>
        <p id="first">
          <strong class="carrot">C</strong>ascading
          <strong class="spinach">S</strong>tyle
          <strong class="spinach">S</strong>heets
        </p>
        <p id="second">
              <strong>C</strong>ascading
              <strong>S</strong>tyle
              <strong>S</strong>heets
            </p>
      </body>
    </html>
    
  3. 이제 예제 CSS를 편집 해 보자. 전체 내용을 아래 내용으로 바꾸자.
    strong { color: red; }
    .carrot { color: orange; }
    .spinach { color: green; }
    #first { font-style: italic; }
    
  4. 이제 다 저장하고 브라우저를 갱신해 결과를 보자.
    Cascading Style Sheets
    Cascading Style Sheets

    CSS파일에서 각 라인의 순서를 바꾸더라도 보여주는 내용은 바뀌지 않을 것이다.

    class 설렉터 .carrot와 .spinach는 태그 설렉터 strong보다 우선 순위가 높다.

    ID설렉터 #first는 class 설렉터나 tag 설렉터보다 우선 순위가 높다.

도전과제
  1. 위의 예제 HTML파일을 바꾸지 않고, 첫글자의 색깔은 변하지 않고 그대로 유지하고, 두번째 줄에 있는 문자중 첫글자를 제외한 나머지 글자를 파란색으로 만들 수 있는 규칙 하나를 CSS파일에 추가 하라.
    Cascading Style Sheets
    Cascading Style Sheets
  2. 위에서 추가한 규칙에 (다른 것은 그대로 두고) 첫번째 줄의 글자들도 아래와 같이 파란색으로 만들어 보라.
    Cascading Style Sheets
    Cascading Style Sheets
Possible solution
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below:
    #second { color: blue; }
    
    A more specific selector, p#second also works.
  2. Change the selector of the new rule to be a tag selector using p:
    p { color: blue; }
    
Hide solution
정답 확인

액션: pseudo-classes 설렉터 사용법

  1. 아래와 같이 HTML파일을 생성하라.
    <!doctype html>
    <html>
      <head>
      <meta charset="UTF-8">
      <title>Sample document</title>
      <link rel="stylesheet" href="style1.css">
      </head>
      <body>
        <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
      </body>
    </html>
    
  2. 예제 CSS파일을 아래와 같이 변경하라.
    a.homepage:link, a.homepage:visited {
      padding: 1px 10px 1px 10px;
      color: #fff;
      background: #555;
      border-radius: 3px;
      border: 1px outset rgba(50,50,50,.5);
      font-family: georgia, serif;
      font-size: 14px;
      font-style: italic;
      text-decoration: none;
    }
    
    a.homepage:hover, a.homepage:focus, a.homepage:active {
      background-color: #666;
    }
    
  3. 저장 한 이후 브라우저에서 결과를 확인 해 보자.(결과를 보기 위해서 마우스를 아래 'Home page'로 옮겨 보라.)
    Go to our Home page

액션: 설렉터의 연관관계와 pseudo-classes 사용법

selectors 연관관계 설렉터와 pseudo-classes로 복잡한 케스케이드 알고리즘을 만들 수 있다. 예를 들면, 아래는 pure-CSS 드랍 다운 메뉴 생성 하는 방법이다.(JavaScript없이 CSS로만으로 만든). 이 방법의 핵심은 아래와 같은 규칙으로 생성하는 것이다.

div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover > ul {
  display: block;
}

위의 CSS에 아래 HTML 문서를 적용해 보세요.

<div class="menu-bar">
  <ul>
    <li>
      <a href="example.html">Menu</a>
      <ul>
        <li>
          <a href="example.html">Link</a>
        </li>
        <li>
          <a class="menu-nav" href="example.html">Submenu</a>
          <ul>
            <li>
              <a class="menu-nav" href="example.html">Submenu</a>
              <ul>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
              </ul>
            </li>
            <li><a href="example.html">Link</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

CSS-기반의 드랍다운 메뉴 예제를 확인 해 보라.

다음에는?

지금까지의 예제는 다소 빽빽하고, 복잡하다. 다음 장에는 좀더 알기 쉽게 만드는 방법에 대해 알아보자.

문서 태그 및 공헌자

 이 페이지의 공헌자: ibizcox, yooonmi, hyeonseok, teoli, SpikeYou
 최종 변경: ibizcox,