Selector는 말 그대로 선택을 해주는 요소이다. 특정 요소들을 선택하여 스타일을 적용할 수 있다.
스타일 규칙
선택자의 종류
1. 전체 선택자 (Universal Selector)
HTML 페이지 내부의 모든 태그를 선택한다. 보통 margin이나 padding값을 초기화하는 등 기본값을 정해둘 때 사용한다.
* {margin: 0; text-decoration: none;}2. 태그 선택자 (Type Selector)
태그 선택자는 HTML요소를 직접 지칭하는 가장 간단한 선택자이다. 태그에 대한 스타일만 지정되어 있으므로, 태그에는 개발자가 지정해주는 스타일이 적용되지 않는다.
p {background: yellowgreen; color: darkgreen;}3. 클래스 선택자 (Class Selector)
클래스 선택자는 주어진 값을 class속성값으로 가진 HTML요소를 찾아 선택한다. 이때 선택하려는 속성값 앞에 마침표를 추가해서 작성한다. 마침표 앞에 태그를 붙여주면 범위를 그 특정 태그에 한한다.
.class1 {background: yellowgreen; color: darkgreen;}div.class2 {background: darkgreen; color: yellowgreen;}위의 class1이라는 class 속성값을 가진 모든 태그를 선택한다. 하지만 두번째 스타일 규칙처럼 마침표 앞에 태그를 붙여주면 범위를 그 특정 태그에 한한다.
4. ID 선택자 (ID Selector)
ID 선택자는 마침표 대신 #을 사용한다.
#id1 {background: yellowgreen; color: darkgreen;}div#id2 {background: darkgreen; color: yellowgreen;}클래스 선택자를 써야 할지 ID선택자를 써야 할지 고민이 될 때는 네 가지를 고려해본다.
- 한 페이지 내에서 여러 번 반복될 필요가 있는 스타일은 클래스 선택자를 사용하고, 단 한번 유일하게 적용될 스타일은 ID선택자를 사용하는 것이 좋다.
- 클래스 선택자는 글자색이나 글자 굵기 등 나중에 다른 곳에도 적용할 수 있는 스타일을 지정하고, ID선택자는 웹 문서 안에서 요소의 배치 방법을 지정할 때 자주 사용한다.
- class 속성은 속성값을 두 개 이상 가질 수 있다. 그래서 클래스 선택자를 사용하면 한 태그 내에서도 여러종류의 스타일 규칙을 적용할 수 있다.
- ID 선택자의 우선순위가 클래스 선택자의 우선순위보다 높다. 우선으로 적용되어야 할 스타일을 ID선택자를 사용하는 것이 좋다.
5. 복합 선택자 (Combinator)
선택자를 여러 개 쓰는 경우를 복합 선택자라고 한다. 복합 선택자에도 여러 가지 종류가 있다.
- 하위 선택자
- 하위 선택자는 선택자 사이를
공백을 사용하여 나타낸다. - 앞 요소의
자손인 뒷 요소를 선택한다.
- 자식 선택자
- 하위 선택자는 선택자 사이를 > 를 사용하여 나타낸다.
- 앞 요소의 자식 인 뒷 요소를 선택한다.
6. 속성 선택자 (Attribute Selectors)
속성 선택자는 태그 안의 특정 속성들에 따라 스타일을 지정한다. 속성 값의 조건에 따라 다양한 스타일을 지정할 수 있기 때문에 활용도가 높은 스타일 지정 방식이다.
a[href] {background: yellowgreen; color: black;}input[type="text"] {width: 150px; border: 1px solid #000;}속성 선택자는 모두 앞쪽에 태그명과 대괄호 사이에 속성에 관련된 내용을 넣어서 선택한다.
