오늘 학습 정보
- 날짜/Day: 2026/01/19 (Day6)
- 교재 범위: ~ 5.5 다양한 선택자 조합하기 (종이책 p.141~169)
- 출처: 코딩 자율학습단 카카오톡 채널 메시지 캡처
오늘의 핵심 키워드 3개
- 핵심 키워드 1: 기본 선택자(전체/태그/id/class/속성/문자열 속성)
- 핵심 키워드 2: 조합 선택자(그룹, 자식>, 하위(공백), 형제 +, ~)
- 핵심 키워드 3: 가상 선택자(가상 요소 ::before/::after, 가상 클래스 :hover/:nth-child 등) + 조합 활용
내용 정리
2-1) 기본 선택자(전체/태그/id/class)
CSS에서 “어떤 요소에 스타일을 적용할지” 가장 기본적으로 고르는 방법이에요.
역할: 스타일 적용 대상을 가장 기본 규칙으로 선택
핵심 포인트: 전체/태그/id/class는 가장 자주 쓰는 출발점
기본 형식:
- 전체 선택자: * { 속성: 값; }
- 태그 선택자: 태그명 { 속성: 값; }
- id 선택자: #id값 { 속성: 값; }
- class 선택자: .class값 { 속성: 값; }
짧은 예시(코드):
- * { margin: 0; }
- p { color: red; }
- #title { font-weight: bold; }
- .box { border: 1px solid; }
2-2) 속성 선택자(기본/문자열 속성)
요소의 “속성”과 “속성값 조건”으로 대상 요소를 고르는 방식입니다. 링크(a), input 같은 태그에서 특히 자주 써요.
역할: 특정 속성을 가진 요소/특정 속성값 조건을 만족하는 요소 선택
핵심 포인트: 값 일치/포함/시작/끝 조건으로 더 정밀하게 선택 가능
기본 형식:
- 속성 존재: [속성] { }
- 속성 값 일치: [속성=“값”] { }
- 문자열 속성(시작/끝/포함): [속성^=”문자열”], [속성$=”문자열”], [속성*=”문자열”]
- 짧은 예시(코드)
- a[href] { text-decoration: none; }
- a[href=”https://www.naver.com”] { color: green; }
- a[href^=”https”] { /* https로 시작 / }
- a[href$=”.pdf”] { / .pdf로 끝 / }
- a[href=”naver”] { /* naver 포함 */ }
2-3) 그룹 선택자(,)
여러 선택자에 동일한 스타일을 한 번에 적용할 때 씁니다.
역할: 여러 선택자를 묶어서 같은 스타일 적용
핵심 포인트: 쉼표(,)로 구분, 대상 묶기
기본 형식:
- 선택자1, 선택자2, 선택자3 { 속성: 값; }
짧은 예시(코드)
h1, h2, p { color: red; }
2-4) 자식 선택자(>)
부모의 “바로 아래(직계)” 자식만 선택합니다.
역할: 부모 요소의 직계 자식만 선택
핵심 포인트: 한 단계 아래만 적용(손자/그 아래는 제외)
기본 형식:
- 부모 > 자식 { 속성: 값; }
짧은 예시(코드)
div > p { color: red; } /* div 바로 아래 p만 */
2-5) 하위(후손) 선택자(공백)
부모 안에 있는 모든 후손(자식+손자+그 아래)을 선택합니다.
역할: 특정 요소 내부의 모든 후손 요소 선택
핵심 포인트: 깊이 제한 없음, 범위가 넓어 의도보다 많이 잡힐 수 있음
기본 형식:
- 조상 후손 { 속성: 값; }
짧은 예시(코드)
section div { color: red; } /* section 안의 모든 div */
2-6) 인접 형제 선택자(+)
기준 요소 바로 “다음”에 붙어있는 형제 요소 1개만 선택합니다.
역할: 기준 요소 바로 다음 형제 요소 선택
핵심 포인트: 바로 다음 1개만, 중간에 다른 요소가 끼면 적용 안 됨
기본 형식:
- A + B { 속성: 값; }
짧은 예시(코드)
label + input { border: 1px solid #000; }
2-7) 일반 형제 선택자(~)
기준 요소 뒤에 나오는 형제 요소를 여러 개 선택할 수 있습니다.
역할: 기준 요소 이후의 형제 요소들을 선택
핵심 포인트: 뒤에 나오는 형제 전부, 기준 요소 이전 형제는 대상 아님
기본 형식:
- A ~ B { 속성: 값; }
짧은 예시(코드)
h1 ~ h2 { color: red; } /* h1 뒤의 모든 h2 */
2-8) 가상 요소 선택자(::before, ::after)
HTML에 실제 태그를 추가하지 않아도, 요소 앞/뒤에 콘텐츠를 “가상으로” 붙일 수 있습니다.
역할: 요소 앞/뒤에 가상 콘텐츠를 생성해 꾸미기
핵심 포인트: 보통 content가 핵심, 장식/라벨/구분표시에 유용
기본 형식:
- 선택자::before { content: “텍스트”; }
- 선택자::after { content: “텍스트”; }
짧은 예시(코드):
p::before { content: '<before>'; color: red; }
p::after { content: '<after>'; }2-9) 가상 클래스 선택자(:link/:visited/:hover/:active/:focus/:checked/:disabled/:enabled)
요소의 “상태”에 따라 선택하는 방식입니다.
역할: 방문/동작/입력 상태에 따라 스타일 적용
핵심 포인트: 같은 요소라도 상태가 바뀌면 스타일이 달라짐
기본 형식:
- 선택자:상태 { 속성: 값; }
짧은 예시(코드):
a:link { color: orange; }
a:visited { color: green; }
p:hover { color: red; }
button:active { color: red; }
input:focus { color: red; }
input:checked + label { color: red; }
input:disabled, button:disabled { background-color: #ccc; }
input:enabled, button:enabled { background-color: #ccc; }
2-10) 구조적 가상 클래스(:first-, :last-, :nth-*)
부모-자식 관계에서 “순서”와 “타입(태그)” 기준으로 선택합니다.
역할: 특정 위치(첫/마지막/n번째)에 있는 요소 선택
핵심 포인트: child는 전체 자식 기준(자리), of-type은 같은 태그 기준(타입)
기본 형식:
- E:first-child
- E:last-child
- E:nth-child(n)
- E:nth-last-child(n)
- E:first-of-type
- E:last-of-type
- E:nth-of-type(n)
- E:nth-last-of-type(n)
짧은 예시(코드):
li:first-child { color: red; }
li:last-child { color: red; }
p:nth-child(1) { color: red; }
p:nth-of-type(2) { color: red; }2-11) 다양한 선택자 조합하기(복합 선택)
여러 조건을 붙여서 원하는 요소만 정확히 골라내는 단계입니다.
역할: 선택 조건을 더 구체화해서 정확히 선택
핵심 포인트: id+class, 태그+class, 상태+관계 선택자 등을 섞어 쓸 수 있음
기본 형식:
- 태그.class / 태그#id / #id.class
- A:hover B / A:hover > B
- a[속성=”값”] span
짧은 예시(코드)
#title.box0 { }
section div { }
a[href="https://www.naver.com"] span { }
div:hover button { }
div:hover > button { }이슈 로그
- :nth-child(n)과 :nth-of-type(n)이 비슷해 보여서 헷갈렸는데, “자리 기준 vs 타입 기준”으로 구분하니 정리가 확실히 됐습니다.
- 형제 선택자도 +와 ~를 “바로 다음 1개 vs 뒤에 나오는 형제 전부”로 정리해두면 실수가 줄 것 같아요.
학습단 도서
- 「코딩 자율학습 HTML + CSS + 자바스크립트」
“코딩자율학습단 19기 | 6일차 학습일지 – 구조적 가상 클래스, 가상 요소, 형제/하위 선택자”에 대한 2개의 생각