Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
검색 결과

    설렉터

    CSS 시작하기 안내서의 5번째 장; 여기서는 Style을 선택적으로 적용하는 법과, 다른 종류의 설렉터가 어떻게 각각의 우선순위가질 수 있는지에 대해 설명한다. 예제 Document의 Tag에 속성을 추가 하고, 이 속성을 예제 Stylesheet에 사용 해 보자.

    정보: 설렉터

    CSS는 CSS 언어를 설명하는 자체의 전문 용어가 있다. 이 안내서의 앞부분에서 말하였드시, 아래와 같은 라인을 Stylesheet에 추가 해 보자.

    strong {
  color: red;
}

    CSS 전문 용어에서는, 위 전체 라인이 규칙이다. 설명하자면 이 규칙은 strong으로 시작하는 설렉터이다. 이 설렉터는 DOM내의 element에 적용시킬 규칙을 나타낸다.

    좀더 자세히

    이장에서는 설명하는 설렉터의 '{'와 '}'의 내부는 선언부 몸체이다

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

    속성값 뒤의 세미콜론(;)으로 각 속성을 분리해서 선언부 몸체 내부에서 선언된다.

    이 안내서에서는 strong과 같은 태그 설렉터를 참고로 한다. CSS 사양서에서는 타입 설렉터로서 참조한다.

    이 장에서는 CSS규칙에서 사용가능한 설렉터에 대해 좀더 설명하고자 한다.

    태그 이름뿐 아니라, 설렉터 내의 변수 속성을 사용 할 수도 있다. 이러한 기능으로 인해 위의 규직은 좀더 특별해 질 수 있다.

    CSS의 두개의 속성중 특별한 두가지 상태가 있는데 이것이 class와 id이다.

    Class 설렉터

    명명된 class 요소를  class 속성을 이용해 할당합니다.  class의 이름은 아무 것이나 가능하다. 동일한 Document내에서도 하나 이상의 elements에 서 동일한 class 변수 각각 가질 수 있다.

    예제 stylesheet에서, 설렉터에서 class 이름을 앞에 (.)을 입력하라.

    ID 설렉터

    element내에서 element ID를 할당하기 위해서는 id 속성을 사용하라. ID 이름도 자유롭게 선정하여 사용 가능하다. 단, ID 이름은 document 내에서 유일해야 한다.

    예제 stylesheet에서, 설렉터 내에서 ID를 사용하려면 ID앞에 (#)을 사용하라.

    에제
    여기 HTML태그는 class속성 하나와 id속성 하나를 가지고 있다. 
    <p class="key" id="principal">

    id 변수는, 원칙적으로, document내에서 유일해야 한다. 그러나 동일 document내의 다른 태그에서는 같은 class 이름과 키를 가질 수 있다.

    CSS stylesheet에서, 이 규칙은 모든 key class의 element를 녹색으로 바꾼다. (그러나 모든 <p> elements는 아닐 수도 있다.)

    .key {
  color: green;
}

    이 규칙은 모든 id가 principal인 것들을 굵은 글씨체로 바꾼다.

    #principal {
  font-weight: bolder;
}

    하나의 element에 한개 이상의 규칙이 적용되거나 하나 이상의 같은 속성이 적용되면 특정 설렉터에 우선권을 두고 규칙을 적용한다. ID설렉터가 class설렉터보다 더 특별하게 간주되고, 또 class설렉터가 태그 설렉터보다 더 우선권을 갖는다.

    좀더 자세히

    좀더 특별한 설렉터를 위해 설렉터들의 조합이 가능하다.

    예를 들면, '.key'설렉터는 class이름이 key인 모든 element에 적용된다. 'p.key'설렉터는 class이름이 key인 <p> elements에만 적용된다.

    class와 id 이 두가지 특별한 속성외에도 '[', ']'를 이용하여 다른 속성을 적용할 수도 있다. 예를 들면, [type='button']설렉터는 type속성이 값이 button인 모든 element에 적용된다.

    stylesheet에 어떤 속성을 적용할지에 대한 충돌이 있거나 우선순위가 같은 경우가 발생하면, CSS는 stylesheet의 뒤쪽에 선언된 것에 좀더 우선 순위를 준다.

    만약 규칙 적용에 있어 충돌이 발생한다면, 충돌된 규칙중 하나를 선택하여 그 우선 순위를 위의 우선순위 결정방법에 따라 수정 해 보라. 우선순위 결정 방법대로 변경 하지 않고 하려면, 해당 규칙을 stylesheet의 아래쪽으로 조금씩 이동해 보라.

    Pseudo-classes 설렉터

    CSS의 pseudo-class는 element가 이후에 설렉터에 적용될 것이다 라는 특별한 상태를 나타내기위해 설렉터에 추가된 키워드이다. 예를 들면 :hover는 사용자가 설렉터로 해당 엘리먼트를 hovers로 선언하면 적용될 것이다.

    Pseudo-classes는 pseudo-elements와 함께 사용하면, Document 트리 구조의 내용 연결 되어 있는 것들에 Style을 적용하는 것 뿐만 아니라 (:visited와 같운 히스토리 네비게이터를 통해 외부와 연결된 것들에도 적용된다. 예를 들면), 내용물의 상태나 (form element가 :checked로 되어 있는) 마우스의 위치(:hover처럼 마우스가 element 위에 있는지 아닌지 같은). 모든 종류의 설렉터를 확인 하려면, CSS3 설렉터 동작 상세서를 참고하라.

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

    List of pseudo-classes

    중요: 설렉터 연관관계

    CSS는 element간의 연관관계에 따라 element를 선택적으로 적용된다. 이와 같은 방법으로 설렉터를 좀더 다양하게 사용가능하다.

    일반적인 설렉터의 연관관계
    설렉터 선택
    A E E element는 A element의 후손이다. (즉: 자식, 또는 손자 모두를 말한다.)
    A > E E element는 A element의 자식관계이다.
    E:first-child E element는  자식관계 중 첫번째이다.
    B + E E element는 B element와 형제 관계이다. (즉 부모가 같다.)

    위의 연관관계는 결합해서 사용이 가능하다.

    모든 element를 나타내는 '*'(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. id와 class 속성을 위에서 복사해 넣었던 곳에 추가하라. 다시 복사 한번더 넣어서 아래 보이는 것 처럼 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="https://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-기반의 드랍다운 메뉴 예제를 확인 해 보라.

    다음에는?

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

    문서 태그 및 공헌자

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