[CSS 정리]02 주요 선택자

도입 

선택자는 태그 하나하나가 될 수 았지만 여러 개의 요소를 묶어 별도의 선택자로 지정할 수 있다. 이렇게하면 일일이 스타일을 지정하지 않고도 스타일을 쉽게 지정할 수 있다. 여기서는 주 되게 사용하는 선택자 5개를 알아보겠다.

1. 전체 선택자(Universal selector)

 전체 선택자는 모든 요소에 적용할 때 사용한다. 주로 하위 요소에 한꺼번에 스타일을 적용할 떄 사용한다. 전체 선택자로는 *를 사용한다. 문서의 여백이나 글꼴 크기등 기본 스타일을 초기화 할 떄 사용한다. 

 예를 들어 웹 문서를 브라우저에 표시할 때 문서 내용 바깥쪽에는 마진을 두고 문서 내용 안쪽에는 패딩이라는 여백을 두는데 이런 여백 때문에 디자인이 깔끔하지 않는 경우, 전체 선택자를 이용해 웹 문서 전체에 마진과 패딩 여벡을 0으로 지정할 수 있다. 

형태 : * {속성: 속성 값; 속성: 속성 값; }

2. 태그 선택자(Tag selector)

특정 태그가 쓰인 모든 요소에 스타일을 적용한다.

예를 들어 p선택자를 정의하면 웹 문서의 모든 p요소들에 스타일이 적용된다. 

p {

font-size: 12px

font-family: 돋음

}

3. 클래스 선택자(Class selector)

태그 선택자는 태그 선택자를 지정하면 그 태그가 사용된 모든 요소에 적용된다. 클래스 선택자는 태그 대신 클래스 이름을 사용하는데 클래스 이름은 나중에 기억하기 일므을 젖아하면 된다. 클래스 이름 앞에 .를 붙여야 한다.

.클래스명 {스타일}

태그 명과 클래스명을 같이 쓰면 해상 태그의 클래스 명을 가지고 있는 곳에 스타일을 적용할 수 있다. 

예] h2.bluetext{   } 라고 쓰면 h2태그를 사용한 bluetext이름의 클래스에 적용된다.

요소 전체가 아니라 일부에만 클래스 선택자를 적용하고 싶을 때는 <span> 태그를 사용하면 된다. 

4. id 선택자(Id selector)

클래스 선택자와 마찬가지로 웹 문서 아느이 특정 부분에 스타일을 지정할 떄 사용한다. #을 사용하면 된다.

#아이디명 {스타일}

클래스 선택자와 달리 문서 안에서 한 번만 적용할 수 있다.

5. 그룹 선택자(Group selector) - 둘 이상 요소에 같은 스타일 적용하기

,를 사용해서 한꺼번에 정의할 수 있다.

예] h1, h2{    

text-align:center; 

}

출처 : HTML5 + CSS3 웹 표준의 정석을 정리한 것입니다.