CSS 선택자는 웹 문서의 어느 부분에 스타일을 적용할 지 알려주는 것이며, 여러 선택자들이 있습니다.
1. 전체 선택자 : CSS 스타일을 문서의 모든 요소에 적용할 때 사용합니다. 전체 선택자는 웹 브라우저의 기본 스타일을 초기화 할 때 자주 사용합니다.
전체 선택자를 사용하기 전의 이미지를 보면 마진 여백이 존재하였습니다.
전체 선택자를 사용하게 되면 여백이 없어서 이미지가 웹 브라우저 창에 딱 붙어서 나타납니다.
2. 타입 선택자 : 특정 태그를 사요한 모든 요소에 스타일을 적용합니다.
<p> 태그에 font-style 속성을 사용하여 글자 스타일의 변화를 살펴보면
<p>태그의 내용들이 기울임꼴이 되어 있음을 확인 할 수 있습니다.
3. 클래스 선택자와 아이디 선택자
- 클래스 선택자 : 특정 부분만 선택하여 스타일을 여러번 적용 할 수 있다.
- 아이디 선택자 : 특정 부분에 스타일을 한번만 적용할 수 있다.
※ 아이디 선택자의 경우 중복해서 적용 할 수 없으므로 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 웹 요소에 자바스크립트 프로그램을 사용하면서 요소를 구별할 때 사용합니다.
위 사진을 보면 <div> 태그내에는 id를 적용하였고 <h2>에는 클래스를 적용하였습니다.
클래스의 경우 앞서 말한것 처럼 여러번 스타일을 적용 할 수 있습니다.
적용된 결과는 다음과 같습니다.
4. 그룹 선택자 : 같은 스타일 규칙을 사용하는 경우 쉼표로 구분하여 여러 선택자를 나열한 후 스타일 규칙을 한번만 정의 합니다.
캐스케이딩: '위에서 아래로 흐른다' 라는 뜻으로 계단식으로 스타일이 적용되는 의미로 사용하며 선택자에 여러 스타일이 적용 될 때 스타일 충돌을 막기 위해 사용합니다.
캐스케이딩 스타일 시트는 두가지 원칙이 있습니다. 스타일 우선 순위와 스타일 상속의 원칙이 있습니다.
원칙1 : 스타일 우선 순위
- 얼마나 중요한가? → 사용자 스타일 - 제작자 스타일 - 브라우저 기본 스타일
- 적용 범위는 어디까지 인가? → !important - 인라인 스타일 - id 스타일 - 클래스 스타일 - 타입 스타일
- 소스 코드의 작성 순서는 어떠한가?
| !important | 어떤 스타일보다 우선 적용하는 스타일 입니다. |
| 인라인 스타일 | 태그 안에 style 속성을 사용해 해당 태그만 스타일을 적용합니다. |
| id 스타일 | 지정한 부분에만 적용하며 한 문서에 한번만 사용이 가능합니다. |
| 클래스 스타일 | 지정한 부분에만 적용하며 한 문서에 여러번 적용 할 수 있습니다. |
| 타입 스타일 | 웹 문서에 사용한 특정 태그에 스타일을 똑같이 적용합니다. |
원칙2 : 스타일 상속
- 웹 문서에 사용하는 여러 태그는 서로 포함 관계가 있으며 이때 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 하며 자식 요소에 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전달합니다.
