2. 선택자(Selector)
- 선택자란 내부, 외부 스타일에서 CSS가 HTML요소를 선택하기 위한 수단
■ 선택자의 종류
1) 기본 선택자
- 전체 선택자
- 요소 선택자
- id 선택자
- class 선택자
- 가상 클래스
- 가상 요소
2) 조합 선택자
- 그룹 선택자
- 자식 선택자
- 하위(자손) 선택자
- 인접 형제 선택자
(1) 전체 선택자
- 전체 선택자는 문서의 모든 요소를 선택할 때 사용하고 선택자로 *를 사용한다.
1 2 3 4 5 6 7 8 9 10 11 12 | <head> <style type="text/css"> /* 전체 선택자 */ *{color: #00f; } /* 요소 선택자 */ h2{font-size: 50px;} p{font-family: "궁서체"; color: #ccc;} </style> </head> |
(2) 요소 선택자
- 요소 선택자는 문서의 특정요소를 선택자로 요소명을 사용한다.
- 요소 선택자 사용시 문서의 지정된 요소는 모두 선택된다.
(3) id 선택자
- 요소에 id속성, id이름을 생성하고 id이름을 선택자로 사용한다.
- id이름은 html 문서 안에 중복되지 않게 요소 하나에 한 개의 이름만 사용할 수 있다.
■ 사용 예시
1 2 | <p id="txt01">아이디 연습1</p> <p id="txt02">아이디 연습2</p> |
(4) class 선택자
- 요소에 클래스 속성, 클래스 이름을 생성하고 클래스 이름을 선택자로 사용한다.
- 클래스 이름은 서로 다른 요소에서 중복 사용할 수 있다.
- 클래스 이름은 하나의 요소에 2개 이상 적용할 수 있다.
■ 사용 예시
1 2 3 | <p class="txt01">클래스 연습1</p> <p class="txt01">클래스 연습2</p> <p class="txt01 txt02 txt03">클래스 연습3</p> |
★ 아이디와 클래스 ★
- 예시
1 2 | <h1 id="idName">title</h1> <h1 class="className">title</h1> |
- 이름 생성규칙
1) 영문자로 작성
2) 첫글자는 숫자가 나올 수 없음
3) 특수문자는 "_" , "$" 2가지만 사용( _만 권장)
4) 표기법은 언더스코어, 낙타등표기법으로 작성
1 2 | <h1 id="main_title">title</h1> <h2 class="subTitle">title</h2> |
- 선택자로 사용하기
id => 요소명#아이디이름 (띄어쓰기 안됨) → h1#main_title
class => 요소명.아이디이름 → h2.subTitle
- 요소 명은 생략가능
id => #main_title
class => .subTitle
- 클래스 이름 2개 이상 적용하기 (이름과 이름은 공백으로 구분)
1 | <h1 class="txt01 txt02 txt03">content</h1> |