[CSS] 선택자(selector)-요소 선택자

완성도 있는 디자인을 표현하기 위해서는 반드시 내가 원하는 요소를 선택할 수 있어야 한다.

그래서 CSS에서 선택자는 중요하다.

나중에 고급 레벨까지 활용하게 되면 생각보다 어려운 부분이니 잘 익혀둬야 한다.

선택자 중 기본이 되는 선택자는 4개이다.

1. 요소 선택자
2. class 선택자
3. id 선택자
4. 속성 선택자

이번 장은 우선 요소 선택자를 학습하겠다.

요소 선택자(태그)

선택자 중 기본이 되며 태그 선택자라고도 한다.

선택자의 부분에 태그의 이름이 들어가게 된다.

h1{ color: red; }
h2{ color: red; }
h3{ color: red; }
h4{ color: red; }
h5{ color: red; }
h6{ color: red; }

선택자는 그룹화가 가능하다.

h1,h2,h3,h4,h5,h6 { color: red; }

쉼표를 이용해서 나열해주면 된다.

 

전체 선택자

전체선택자는 별표(*) 기호를 이용해서 문서 내에 있는 모든 요소를 선택하는 선택자이다.

* { color: red; }

애스터리스크(asterisk)라고 부르는 별표 기호는 한번의 선언 만으로도

문서내에 있는 모든 요소에 적용된다.

매우 편리한 기능이지만 성능에 좋지 않아서 사용을 가급적 지양하고 있다.