[CSS3] CSS3 선택자

CSS 선택자

 

선택자에 대해서 알아보겠다.

h1 { color: blue; }

 

위에서 h1이 선택자이고 color는 속성, blue는 속성값이다.

선택자는 스타일을 적용할 태그를 선택해주는 것이다.

 

 

선택자에는 5가지 종류가 있다.

• 전체 선택자
• 타입 선택자
• class 선택자
• id 선택자
• 그룹 선택자

 

 

전체 선택자

 

전체선택자를 사용하면 모든 태그에 스타일이 적용된다.
웹문서에는 기본브라우저 스타일이 있다.(default style)
기본스타일을 초기화 시키고 싶을때, 전체선택자를 많이 사용한다.

 

모든 태그에 글자색 빨간색 적용

 

 

브라우저 기본스타일 초기화

이처럼 전체선택자는 웹문서 전체에 적용하는 선택자기 때문에, 브라우저의 기본스타일을 초기화시킬때 많이 사용한다.

 

 

 

타입 선택자

 

타입 선택자는 태그 선택자라고도 한다.
웹문서에서 특정 태그에만 스타일을 적용하고싶을때 사용한다. 

 

 

 

 

class 선택자

 

class선택자와 id선택자는 특정부분에만 스타일을 적용하는 선택자이다.
둘다 특정한 부분에만 다르게 스타일을 주고싶을때 사용한다.

class선택자는 문서안에서 여러번 사용할 수 있다. id선택자는 문서안에서 한번만 사용한다.(고유성을 가짐)

 

class선택자는 문서안에서 여러번 적용할 수 있으며 앞에 .을 붙인다.

 

예제를 보면 알 수 있듯이 class선택자를 적용할때는 class라는 속성을 사용하는데,
p태그 전체에 적용하고 싶을때는 <p class="redtext"> 라고 쓰면 스타일이 적용된다.

 

 

 

 

id 선택자

 

id선택자는 문서안에서 한번만 사용할 수 있다.(고유성)

id선택자는 선택자 이름 앞에 #을 붙인다.

id선택자를 적용할때는 id속성을 사용한다.

 

 

 

그룹 선택자

 

같은 스타일규칙을 가진 여러개의 선택자를 나열해서 표시하는것.

 

p와 h1에 같은 스타일이 적용되었을때, 아래처럼 그룹선택자를 사용할 수 있다.

 

 

 

그룹선택자는 여러 선택자를 쉼표로 구분해서 나열할 수 있다.
이렇게해서 간단하게 소스를 줄일 수 있다.

 

 

 

 

 

---

* Reference

Do it! HTML+CSS+자바스크립트 웹 표준의 정석