posted by 희정냥★ 2011. 9. 18. 23:13
CSS에서 가장 중요한 개념은 선택자(Selector)라고 할 수 있습니다. 선택자(Selector)가 있어야 선언된 CSS가 어디에 적용될지를 결정할 수 있기 때문입니다. 특히 CSS는 상속의 개념을 가지므로 선택자(Selector)에 대한 확실한 이해가 없이는 CSS를 제대로 활용하지 못합니다.

선택자(Selector)의 종류

선택자(Selector)는 아래와 같이 4개로 나누어볼 수 있습니다.

공통 선택자(Universal Selector)
타입 선택자(Type Selector)
ID 선택자(ID Selector)
Class 선택자(Class Selector)
 

공통 선택자(Universal Selector)
공통 선택자(Universal Selector)는 *로 표현되는 선택자입니다.

* { color: gray; }
위와 같이 정의하면 모든 element 에 color: gray; 라는 스타일을 지정한다는 의미입니다.

 

타입 선택자(Type Selector)
타입 선택자(Type Selector)는 p, div, span, table, td, form...등과 같은 HTML 태그를 선택하는 선택자 입니다.

p { color: gray; }
이런식으로 정의하면 P element에 color: gray; 라는 스타일을 지정한다는 의미입니다.

 

ID 선택자(ID Selector)
#이라는 지시어를 사용하면서 element의 아이디값을 지정해주면 됩니다. 즉 특정 element에만 스타일을 지정한다는 의미입니다. 

#gray_text { color: gray; }
위와 같이 지정하면 id 값이 gray_text 인 element에만 스타일이 적용됩니다.

 

Class 선택자(Class Selector)
.이라는 지시어를 사용하면서 element의 클래스값을 지정해주면 됩니다. 특정 element에만 스타일을 지정한다는 의미로 ID 선택자와 차이점이라면 클래스의 경우는 한 문서에 동일한 이름의 클래스가 여러개 위치해도 괜찮으나 아이디는 유일해야 한다는 차이가 있습니다.

.gray_text { color: gray; }
위와 같이 지정하면 클래스 값이 gray_text 인 element에만 스타일이 적용됩니다.

 

'Computer > Web' 카테고리의 다른 글

HTML5 웹소켓  (4) 2012.06.29
CSS Box Model  (0) 2011.09.18
CSS 선택자  (0) 2011.09.18
Web 2.0 기반의 Presentation On The Web  (0) 2009.08.06
syntaxhighlighter를 tistory에서 사용 하는 방법  (0) 2008.10.08
IE6,IE7 ,FireFox 에 대해 CSS 맞추기  (0) 2008.07.09

댓글을 달아 주세요