[HTML5 웹 프로그래밍 입문 4판 Chapter 05 연습 문제 포함]

05 CSS3 기초: 선택자와 단위

 

✨선택자의 용도와 사용법✨

스타일시트: style 태그 내부에 CSS 블록을 입력해서 작성한 코드

- CSS3에서 특정 HTML 태그를 선택할 때는 선택자를 사용한다. 

- 아래 예시는 선택자를 사용해 h1 태그를 선택하고, 선택한 h1 태그의 color 스타일 속성에 red 값을 적용한 CSS 블록이다. 

h1 { color: red; }

 

CSS3 선택자 종류

종류	형태	사용 예
전체 선택자	*	*
태그 선택자	태그	h1
아이디 선택자	#아이디	#id
클래스 선택자	.클래스	.header
속성 선택자	선택자[속성 = 값]	input[type = text]
	선택자[속성 ~= 값]	div[data-role ~= row]
	선택자[속성 |= 값]	div[data-role |= row]
	선택자[속성 ^= 값]	div[data-role ^= row]
	선택자[속성 $= 값]	div[data-role $= 9]
	선택자[속성 *= 값]	div[data-role *= row]
후손 선택자	선택자 선택자	header h1
자손 선택자	선택자 > 선택자	header > h1
반응 선택자	선택자: active	div: active
	선택자: hover	div: hover
상태 선택자	선택자: checked	input: checked
	선택자: focus	input: focus
	선택자: enabled	input: enabled
	선택자: disabled	input: disabled
구조 선택자	선택자: first-child	li: first-child
	선택자: last-child	li: last-child
	선택자: nth-child(수열)	li: nth-child(2n+1)
	선택자: nth-last-child(수열)	li: nth-last-child(2n+1)
	선택자: first-of-type	h1: first-of-type
	선택자: last-of-type	h1: last-of-type
	선택자: nth-of-type(수열)	h1: nth-of-type(2n+1)
	선택자: nth-last-of-type(수열)	h1: nth-last-of-type(2n+1)
동위 선택자	선택자  + 선택자	h1 + div
	선택자 ~ 선택자	h1 ~ div

가상 클래스 선택자 = 구조 선택자, : 기호를  사용한다. 

가상 요소 선택자 = 문자 선택자, :: 기호를 사용한다. 

 

 

✨기본 선택자✨

종류	형태	설명
전체 선택자	*	HTML 페이지 내부의 태그를 모두 선택
태그 선택자	태그	HTML 페이지 내부의 특정 태그를 모두 선택
아이디 선택자	#아이디	특정 id 속성이 있는 태그를 선택. 웹 표준에 id 속성은 웹 페이지 내부에서 중복되면 안 된다는 규정이 있으므로 아이디 선택자는 특정 태그 하나를 선택할 때 사용
클래스 선택자	.클래스	특정 클래스가 있는 태그 선택

 

 

✨속성 선택자✨

속성 선택자: 특정 속성 또는 값이 있는 태그를 선택

형태	설명
선택자[속성]	특정한 속성이 있는 태그 선택
선택자[속성=값]	특정한 속성 내부 값이 특정 값과 같은 태그 선택

 

 

✨후손 선택자와 자손 선택자✨

후손 선택자와 자손 선택자는 특정 태그의 후손과 자손을 선택한다. 

 

- 자손: div 태그를 기준으로 바로 한 단계 아래에 위치한 h1, h2, ul 태그

- 후손: div 태그 아래에 위치한 모든 태그

HTML5 웹프로그래밍 입문 4판

① 후손 선택자

형태	설명
선택자A 선택자B	선택자A의 후손인 선택자B 선택

 

** 선택자 여러 개를 함께 사용할 때, 후손 선택자를 아래 코드 처럼 활용할 때가 있다. 

<style>
	#header h1, h2 { color: red; }
</style>

header 태그의 후손인 h1 태그와 header 태그의 후손인 h2 태그를 선택하고 싶다면 아래 코드처럼 사용해야 한다. 

<style>
	#header h1, #header h2 { color: red; }
</style>

② 자손 선택자 

형태	설명
선택자A > 선택자B	선택자A의 자손인 선택자B 선택

 

 

✨반응-상태-구조 선택자✨

① 반응 선택자

사용자 반응으로 생성되는 특정한 상태를 선택한다. 

- hover: 사용자가 특정 태그 위에 마우스 커서를 올린 상태

- active: 특정 태그를 마우스로 클릭한 상태

 

② 상태 선택자

입력 양식의 상태를 선택한다. 

- checked: 체크 상태의 input 태그 선택

- focus: 포커스를 맞춘 input 태그 선택

- enabled: 사용 가능한 input 태그 선택

- disabled: 사용 불가능한 input 태그 선택

 

③ 구조 선택자

특정한 위치에 있는 태그를 선택한다. 

- first-child: 형제 관계에서 첫 번째로 등장하는 태그 선택

- last- child: 형제 관계에서 마지막으로 등장하는 태그 선택

- nth-child(수열): 형제 관계에서 앞에서 수열 번째로 등장하는 태그 선택

- nth-last-child(수열): 형제 관계에서 뒤에서 수열 번째로 등장하는 태그 선택

 

 

✨CSS 단위✨

① 키워드 단위

키워드란 W3C에서 미리 정의한 단어이다. 

 

② 크기 단위

CSS3에서 가장 많이 사용하는 단위는 %, em, cm, mm, inch, px이다.

- %: 백분율 단위

- em: 배수 단위

- px: 픽셀 단위

 

③ 색상 단위

CSS3에서는 색상을 더 다양하게 표현할 수 있도록 색상 단위를 제공한다. 

 

④ URL 단위

 

 

---

✨05장 연습문제✨

추가될 예정입니다