[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 태그 아래에 위치한 모든 태그
① 후손 선택자
형태 | 설명 |
선택자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장 연습문제✨
추가될 예정입니다
'Study > Web' 카테고리의 다른 글
[HTML5 웹 프로그래밍 입문 4판 Chapter 06] 연습 문제 정답 (0) | 2023.12.22 |
---|---|
[HTML5 웹 프로그래밍 입문 4판 Chapter 04 연습 문제 포함] (0) | 2023.10.24 |
[HTML5 웹 프로그래밍 입문 4판 Chapter 03 연습 문제 포함] (0) | 2023.09.30 |
[HTML5 웹 프로그래밍 입문 4판 Chapter 02 연습 문제 포함] (0) | 2023.09.19 |
[HTML5 웹 프로그래밍 입문 4판 Chapter 01 연습 문제 포함] (0) | 2023.09.17 |