본문 바로가기
2012.03.15 21:58

CSS 선택자의 종류

조회 수 2768 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print

http://www.cyworld.com/flyhyoyeol/3911134



1. 전체선택자

 - 페이지 안의 모든 엘리먼트에 스타일을 지정할 때 사용합니다. 사용방법은 별표 (*) 문자로 지정해주며 사용빈도가 가장 낮은 선택자입니다.

 

*{padding:0; margin:0;}  // *은 전체선택을 의미하는 문자입니다.

 

 

2. 타입선택자

 - 어떤 엘리먼트에 대한 스타일을 지정하는것으로 엘리먼트 선택자 또는 단순선택자라고도 합니다.

 

p{color:black;} // HTML의 <p>와</p>사이의 내용에 스타일을 지정하는 예입니다.

이렇듯 일반적인 태그안에 스타일을 지정하는 방식입니다.

 

 

3. CLASS 선택자

 - 태그안에 CLASS로 이름을 지정하여 사용하는 선택자입니다. 마침표(.)를 입력하고 그뒤에 지정한 클래스명을 입력하는 방식으로 진행합니다.

 

<font class="CA">클래스선택자</font>

만약 위와 같이 HTML문서의 font부분에 클래스 이름을 CA로 지정해주었다면

 

.CA{font:bold 12px "굴림",Arial;}

위와같이 스타일을 부여하면 됩니다.

 

 

4. ID 선택자

 - 태그안에 ID로 이름을 지정하여 사용하는 선택자입니다. 샾(#)를 입력하고 그뒤에 지정한 아이디명을 입력하는 방식으로 진행합니다.

 

<font ID="CA">클래스선택자</font>

만약 위와 같이 HTML문서의 font부분에 ID 이름을 CA로 지정해주었다면

 

#CA{font:bold 12px "굴림",Arial;}

위와같이 스타일을 부여하면 됩니다.

 

 


여기서 잠깐!

ID 선택자와 CLASS선택자는 방식이 비슷하지만 차이가 있습니다. ID 선택자는 한 페이지 내에서 한 엘리먼트에만 적용할수 있는 반면, CLASS 선택자는 엘리먼트 개수에 제한없이 적용이 가능합니다. 쉽게 말하자면 ID선택자는 ID 이름 하나에만 적용이 되고 CLASS 선택자는 동일한 이름을 여러 태그에 뿌려놓아도 다 적용이 됩니다.             


                                                                       

 

 

5. 선택자 그룹지정

 - 둘 이상의 선택자가 동일한 선언을 할때 사용합니다. 선택자들을 아래와 같이 콤마로 구분하여 그룹으로 지정할수 있습니다.

 

body, table, caption, tr, th, td{margin:0; padding:0;}

 

 

6. 하위선택자

 - 특정 엘리먼트의 하위 엘리먼트들에게 스타일을 적용시키는 선택자입니다. 예를들어 테이블과 TR의 하위태그인 TD에 스타일을 적용시킨다면 아래와 같이 작성합니다.

 

table tr td{text-align:center;}

(그룹지정은 콤마가 들어가고 하위선택자는 콤마가 들어가지 않는다고 생각하면 쉽습니다.)

 

 

7. 자식 선택자

 - 특정 엘리먼트의 바로 하위의 엘리먼트에게만 스타일을 부여하는 선택자입니다.

 

 

예를 들어 아래와 같이 작성한다면


body > p{text-align:center;}  <=   >표시 로 구분을 하여 적용해줍니다.


<body>

 <p>선택됨</p>

   <div>

     <p>선택되지않음</p>    <= div가 부모이므로 선택이 되지 않습니다.

   </div>

</body>


body 바로 아래에 있는 P태그에만 스타일이 적용된다.

 

 

 

8. 인접 선택자 (익스플로러 6버전에선 지원되지 않는다)

 - 특정 엘리먼트가 닫힌 후 처음나오는 엘리먼트를 선택하여 스타일을 부여하는 선택자입니다.

 

예를 들어 아래와 같이 작성한다면


div + p{text-align:center;}  <=  + 로 구분을 하여 적용해 줍니다.


<body>

 <p>선택되지않음</p>

   <div>

     <p>선택되지않음</p>  

   </div>

 <p>선택됨</p>  < = div가 닫힌후 처음나오는 엘리먼트이므로 선택됩니다.

</body>


div안에 있는 p는 부모관계이므로 선택되지 않습니다.

 

 

 

9. 속성 선택자 (익스플로러 6버전에선 지원되지 않는다)

 - 특정 엘리먼트에서 어떠한 속성이 존재할 경우 그 속성을 가진 특정엘리먼트를 선택하는 선택자입니다.

 

예를 들어 아래와 같이 작성한다면


<input type="text" />    <= 속성이 text박스인 인풋타입을 작성하고

<textarea></textarea>


input[type="text"], textarea {     <= 인풋타입의 text박스속성에 스타일을 적용

    border: solid 1px #eee;}


 

 

10. 동적 선택자 (a 태그 수도클래스)

 - 독립접으로 스타일을 적용할 수 있는 특수상태 또는 관련사용법을 말합니다. 대표적인 예가 <a>태그입니다.

 

예를 들어 아래와 같습니다.


<a href="http://blog.naver.com/hyoyeol>늑대털쓴양</a>  <= A태그를 작성


a:link{color:red;}       <= 링크 적용 상태 

a:active{color:red;}   <= 링크를 클릭한 경우 

a:hover{color:red;}   <= 링크위에 마우스가 올라간 경우

a:visited{color:red;}  <= 링크를 클릭하여 방문한 후의 상태

a:focus{color:red;}   <= 화면포커스를 가지고 있는 상태


 

 

 

 

11. 가상선택자 (first-child 수도클래스) (익스플로러 6버전에선 지원되지 않는다)

 - 7번의 자식선택자와 비슷한 원리지만 최초에 등장하는 한가지 엘리먼트에만 적용이 됩니다.

 

예를 들어 아래와 같습니다.


body > p:first-child{text-align:center;}  <=   >엘리먼트:first-chid 로 표시

<body>

 <p>선택됨</p>  <= 첫번째 P에만 적용

 <p>선택되지않음</p> 

   <div>

     <p>선택되지않음</p>    

   </div>

</body>


 

 

 

12. 의사클래스 (first-line, first-letter)

- 텍스트에 스타일을 부여할때 가장 첫번째 글자와 가장 첫번째줄에만 적용할때 사용됩니다.

 

예를 들어 아래와 같이 스타일을 부여하면


p:first-line {text-decoration: underline;}  <= 첫번째 한줄에만 적용

p:first-letter {font-weight:bold;}  <= 첫번째 글자에만 적용


<p>

안녕하세요 늑대털쓴양입니다. 웹디자인 공부하실분들은 제블로그에서 같이 공부하도록 합시다! 이웃, 일촌, 팬, 즐겨찾기 환영입니다^^

</p>


 

 

아래와 같이 적용이 됩니다.


 

녕하세요 늑대털쓴양입니다. 웹디자인 공부하실분들은 제블로그에서 같이 공부하도

록 합시다! 이웃, 일촌, 팬, 즐겨찾기 환영입니다^^


 


Title
List of Articles
번호 제목 글쓴이 날짜 조회 수
11 Refresh HTML Page in Browser Automatically Hojung 2014.06.07 1347
10 div태그와 span태그 비교 Hojung 2013.12.07 2111
9 What is the difference between <section> and <div>? Hojung 2013.12.07 1589
» CSS 선택자의 종류 Hojung 2012.03.15 2768
7 CSS 적용방법 Hojung 2012.03.15 2094
6 CSS 강좌5 - CSS 레이아웃 생성 file Hojung 2012.03.15 3739
5 CSS 강좌4 - 주요 요소 설정 file Hojung 2012.03.13 2118
4 CSS 강좌3 - 갠버스 설정 file Hojung 2012.03.13 2068
3 CSS 강좌2 - 기본 html 작성 Hojung 2012.03.13 1991
2 CSS 강좌1 - 레이아웃 잡기 file Hojung 2012.03.13 8257
1 추천 CSS 강좌 (Good) Hojung 2012.03.13 2184
Board Pagination ‹ Prev 1 Next ›
/ 1

Designed by sketchbooks.co.kr / sketchbook5 board skin

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5