CSS Selector

 Selector

   Selector 란 CSS Property 1개 또는 그 이상의 Property들을 Property block ({})속에 넣어 놓은 것을 의미 한다.

■ 선택자에 따른 우선 순위

   ID선택자 > CLASS선택자 > 조합 셀렉터 > HTML선택자  

■ 종류

 1) Universal Selector

     Universal selector 는 HTML 의 모든 Element 에 같은 CSS Property 를 사용하도록 지정하는 Selector 로 사용법은 Asterisk(*) 뒤에 style block 이 오면 된다.

    - 예 : 문서의 모든 글자 크기를 12px

   <style type="text/css">

     * {font-size : 12px} 

   </style>

  2) Type Selector

     Type Selector 는 HTML Element 에 직접 CSS Property 를 지정하는 방법으로 지정된 HTML Element 는 별도의 CSS Property 를 지정하지 않아도 지정된 Property Value가 적용된다.

     - 형식 : 선택자 {속성: 값;}

  3) Descendant selector(Contextual Selector) - 하위(조합) 셀렉터

     이 Selector 는 Type selector와 같은 Level의 Selector 로써, 일명 contextual selector 라고도 부른다. HTML Element 2개 이상을 원하는 순서대로 나열하여 뒤에 표기한 selector에 해당되는 element를 앞에 표기한 selector에 해당되는 element 속에서 사용했을 때만 유효하며 child element(한 단계 직속 하위 element) 뿐만 아니라 descendant element(2 단계 이상의 하위 element) 에도 똑 같이 작용 한다. 따라서 아래 code 중에 2 번째 h2 element 속의 i element와 같이, 중간에 div element가 끼어들어 h2의 직속 하위 element가 아닌 경우도 마찬 가지로 적용 된다.

    - 형식 : parent 선택자{속성1 : 값1; 속성2 : 값2; ....}

    - 지정 : h4 em {color: red;}

    - 사용 : <h4>여기서는 <em>적용되고</em>.</h4>

            <p>여기서는 <em>적용되지 않는다</em>.</p>

 4) Child Selector - 자식 선택자

     하위요소 중에 바로 아래 하위 요소에게만 해당. (IE6 미지원)

     - 형식 : 상위선택자>선택자 {속성: 값;}

     - 예

       HTML : <div class="d"><div class="c"></div></div>

       css : #d>.c {width:100px;}

 5) Sibling Selector - 인접 선택자

     인접요소에게만 해당. (IE6 미지원)

    - 형식 : 상위선택자+선택자 {속성: 값;}

    - 예

       HTML : <div class="d"><div class="c"></div></div>

       css : #d+.c {width:100px;}

 6) Class Selector

     Class Selector 는 지정하고 싶은 HTML Element 에만 선택적으로 CSS Property를 지정하는 방법 으로 Type selector 처럼 지정한 모든 Element 에 일괄 지정 하는 게 아닌 'Class' 라는 HTML Attribute 를 사용하여 원하는 Tag에 선택적으로 지정한다. 가장 많이 사용되는 Selector로 사용 방법은 Period (. : 點)를 찍고 공백 없이 영문자 대소문자 A~Z, 숫자 0~9, Hyphen(-), Underscore(_) 를 사용해서 이름을 지어 준다. 이 때 이름은 기호나 숫자로 시작해서는 안 된다.

    - 형식 : .선택자{속성1 : 값1; 속성2 : 값2; ....}

    - 지정 : .example {color: brown;}

    - 사용 : <p class="example">저의 폰트색는 브라운입니다.</p>

 7) 특정 Element 에만 적용되는 Class Selector 

     특정 Element 에만 적용되는 Class란 즉, 특정 Element로 지정한 Element 이외의 다른 Element에는 Class를 지정하더라도 Property value가 적용이 안 되며 이러한 Class를 사용하는 이유는 Type selector로 어떤 Element에 CSS 를 지정하고 Type selector로 지정한 Element 중 몇 개만 다른 Property value 를 지정하고 싶을 때 주로 사용한다. 사용 방법은 Element.Class selector 와 같이 HTML Element와 Class selector 사이를 Period (점)으로 구분해 준다.

   - 지정 : b.big { font-size: 20px; color: blue }

   - 사용 : <b class=big>저의 폰트크기는 20px, 폰트색은 블루입니다.</b>

 8) ID Selector

    ID Selector 는 DHTML 이나 JavaScript 등 동적인 웹 페이지를 만들거나, 데이터를 다루는데 있어서 매우 중요한 역할을 하는 Selector로 사용 방법은 앞에 Hash(#)를 붙이고, 이름 주는 방법은 Class selector 와 동일하다.

   - 형식 : #선택자{속성1 : 값1; 속성2 : 값2; ....}

   - 지정 : #sample {color: brown;}

   - 사용 : <p id="sample"> 저의 폰트색은 브라운입니다.</p>

 9) Grouping - 동시 지정

    Grouping 이란 같은 Property 와 같은 Value를 사용하는 Selector 가 여러 개 일 경우 Selector 마다 일일이 지정하지 않고 Group 을 만드는 방법이다. 사용법은 Selector 들을 comma(,)로 구분하여 나열 한다.

   - 지정 : h1, h2, h3, h5 {color: blue;} /* 해당 헤딩을 모두 청색으로 지정.*/ 

 10) Alttribute Selector - 속성 선택자

      요소가 가진 속성으로 선택할 때 사용 (IE6 미지원)

   - 예

     HTML :  <div id="d"></div> 

     CSS : #d[id] {width:100px;}

■ 기타사항

  1) 스타일의 상속

    스타일은 객체 지향 프로그래밍의 클래스처럼 상속된다. 즉, 스타일 시트의 경우 상위 요소에서 하위 요소로 상속된다.

    <h3> 안녕 하세요 ? <h1> 저 </h1>는 현재 html을 편집중입니다. </h3>

  2) 가상 클래스(Pseudo class)

     Pseudo class(가상 클래스)란 실제로 HTML Element가 지원하지 못하는 기능을 지원하는 class로서, 예를 들어 문장의 첫 글자나 첫 줄을 다룬다든지, Printing 할 때 필요한 만큼 페이지를 나눈다든지 하는 HTML Element는 없기 때문에 이런 가상 Element를 사용하여 class를 지정하게 된다.

     - link

       링크 걸린 글자에 관련된 가상 클래스에는 :link, :visited, :hover, :active 의 4 가지로 단순히 글자의 색상만을 다루는 것이 아니라 글자에 class로 지정할 수 있는 여러 가지 CSS Property들을 지정할 수 있다.

     - 형식

       [a]:link(visited, hover, active) {srules }

  

      - 가상 클래스

        :link → 방문하지 않은 link에 대한 CSS Property를 지정

        :visited → 방문한 link에 대한 CSS Property를 지정

        :hover → 마우스를 link에 올렸을 때의 글자에 대한 CSS Property를 지정

        :active → 링크를 클릭했을 때의 글자에 대한 CSS Property를 지정

     - 예

    <style type="text/css">

        a:link{color:royalblue;}

        a:visited{color:gray;} 

        a:hover{color:orange;text-decoration:underline;}

        a:active{color:tomato;}

    </style>