선택자(selector)란?
CSS의 효과가 적용될 태그를 지정
Id 선택자
- id 속성은 전체 문서에서 하나의 태그를 식별하기 위해서만 사용됨
- 우선순위가 가장 높음
- css 선택자에서는 #을 사용해서 id임을 표시
- 다음 예제는 id값이 memo인 태그의 컨텐츠를 빨간색으로 표시하도록 함
1 2 3 4 5 6 7 8 | < style type = "text/css" > #memo { color:red; } </ style > < div id = "memo" > red </ div > |
Class 선택자
- class 속성은 일련의 태그를 그룹핑해서 하나처럼 제어하기 위해서 사용
- class 속성에는 공백으로 구분된 여러개의 class가 표시될 수 있음
- css선택자에서는 '.'을 사용해서 class임을 표시
1 2 3 4 5 6 7 | < style type = "text/css" > .red{ color:red; } </ style > < div class = "red" >red</ div > < p class = "red intro" >Hello world</ p > <!-- 하나의 클래스에 두개의 클래스 이름이 정의됨 --> |
type 선택자
- 특정 태그명을 가진 엘리먼트 전체를 제어하기 위해서 사용
- css선택자에서는 태그의 이름을 사용함
1 2 3 4 5 6 7 | < style type = "text/css" > h1{ color:red; font-size:30px; } </ style > < h1 >Hello world</ h1 > |