CSS Selector (선택자) 작성규칙 정리

CSS 코드를 보면,  아스테리크 * , 또는 마침표 . 와 # 등의 특수기호가 보이는데

각각이 CSS가 적용될 대상을 지정하는 선택자이다

보통 선택자는 아래와 같이, 선택자 이름과 선언구간 두가지로 분류된다.

선택자          선언구간

body       {font-size:10px; color:red; text-align:center}

선택자는 여러가지 방식으로 지정할 수 있는데 다음과 같다.

1. 태그선택자 :  특정한 태그에 CSS 를 적용할 때 사용한다. 

h2 {                             

     color : blue;              

     text-align : left;          

}                                  

      

  <h2>동해둘리의 IT Story </h2>  

2. 클래스 선택자 : 클래스하나를 정의한 후에, 원하는 어떤 태그에도 적용할 수 있다.

선택자                  선언구간

.DefaultFont       {font-size:10px; color:red; text-align:center}

<font class = "DefaultFont" > 동해둘리의 IT Story </font>

3. 아이디 선택자 : 해당 페이지 내에서 하나밖에 없는 유일한 엘리먼트에 CSS 를 적용하기 위해 사용한다. 

선택자                선언구간

#UserName       {font-size:10px; color:red; text-align:center}

<font id = "UserName"> 동해둘리의 IT Story </font>

4. 하위 선택자 : 특정 선택자의 영향에 있는 하위 엘리먼트에 별도로 CSS 를 적용하고자 할 때 사용한다. 

p {                               

     color : red;                

     text-align : left           

}                                  

.myStyle {                      

     color : blue;               

}                                  

/* 아래와 같이 특정 선택자를 입력후 공백을 둔 후에 하위 엘리먼트를 기입하면 된다 */

.myStyle p {                     

     color : white;              

}                                   

<p> 빨간색, 왼쪽정렬 </p>

<div class = "myStyle" >

     <h1> 하위선택자와 상관없이 myStyle 의 영향만 받는다 </h1>

     <p> p태그는 red 로 설정되어 있지만, .myStyle p 에 의해 , white 로 설정되어 보여진다 </p>

</div>

5. 그룹 선택자 : 여러개의 엘리먼트에 동일한 속성을 주고자 할때 사용한다.

h1 { font-family: 돋움체 }

h2 { font-family: 돋움체 }

h3 { font-family: 돋움체 }

위와 같이 선언해야 할 경우에, 아래와 같이 한줄로 선언이 가능하다.

h1, h2, h3 { font-family: 돋움체 }

6. 전체 선택자 : 모든 엘리먼트를 선택할 때 사용

* {font-size : 14px; text-align : center }    /* 모든 엘리먼트에 적용된다 */

#MyId  * { font-size : 14px }   /* 아이디선택자 MyId 로 지정된 엘리먼트의 모든 하위 엘리먼트는 font-size 14pt 로 지정

7. 앵커 유사 클래스 선택자 :  클래스선택자와 유사하여 유사클래스 선택자로 불리며, 앵커에 주로 사용한다.

a:link {color : yellow}      /* 기본색상 yellow

a:visited {color : red}      /* 한번 방문한 이후로는 red

a:hover {color : black }    /* 링크에 커서가 올라가면 black

a:active { color : grey }    /* 링크를 클릭하면 grey