Ch.3 CSS 첫걸음 — 색과 글꼴

셀렉터의 세계

요소, 클래스, ID 셀렉터를 구별하고 사용할 수 있다셀렉터 우선순위(특이성)의 기본 규칙을 이해한다여러 셀렉터를 조합하여 원하는 요소만 선택할 수 있다

수백 개의 요소 중 원하는 것만 골라 꾸밀 수 있을까?

웹 페이지에는 수십 개의 p 태그, h2 태그가 있습니다. 그중 특정 문단만 빨갛게, 특정 제목만 크게 만들려면?

CSS에서 원하는 요소만 정확히 겨냥하려면?

셀렉터 — CSS가 HTML 요소를 '선택'하는 방법입니다. 요소, 클래스, ID 세 가지를 마스터합시다.

article

핵심 내용

요소, 클래스, ID — 세 가지로 모든 것을 선택합니다

/* 1. 요소 셀렉터 — 모든 p 태그 */
p { color: gray; }

/* 2. 클래스 셀렉터 — .으로 시작 */
.highlight { background: yellow; }

/* 3. ID 셀렉터 — #으로 시작 */
#main-title { font-size: 2.5rem; }

<!-- HTML에서 class와 id 사용 -->
<h1 id="main-title">김짓의 홈페이지</h1>
<p class="highlight">중요한 내용입니다.</p>
<p>일반 문단입니다.</p>
<p class="highlight">이것도 중요합니다.</p>

class = 여러 요소에 재사용 (`.highlight`를 여러 곳에) id = 페이지에서 딱 하나 (`#main-title`은 유일) 대부분의 경우 class를 사용하는 것이 좋습니다.

같은 요소에 여러 규칙이 겹치면 누가 이길까?

요소: p { } — 가장 약함

클래스: .class { } — 중간

ID: #id { } — 강함

인라인: style="" — 가장 강함

우선순위: 인라인 > ID > 클래스 > 요소 같은 우선순위면 나중에 작성된 규칙이 이긴다 (Cascade).

홈페이지에 클래스를 추가하고 스타일을 적용해봅시다

CSS에서 클래스 셀렉터의 올바른 표기법은?

하나의 HTML 요소에 여러 class를 동시에 적용할 수 있다

color 속성은 글자 색이 아니라 배경 색을 바꾼다

CSS 셀렉터

edit_note

정리 노트

셀렉터의 세계

기본 셀렉터

태그 셀렉터: 태그 이름으로 선택 — p, h1, div
클래스 셀렉터: 점(.)으로 시작 — .highlight, .card
ID 셀렉터: 샵(#)으로 시작 — #header, #main

조합 셀렉터

자손 셀렉터: 공백으로 구분 — div p (div 안의 모든 p)
그룹 셀렉터: 쉼표로 구분 — h1, h2 (둘 다 선택)

★

클래스는 여러 요소에 재사용, ID는 페이지당 하나만 사용하세요.

image

시각 자료

check_circle

핵심 정리

1요소(p), 클래스(.name), ID(#name) 셀렉터 3종
2우선순위: 인라인 > ID > 클래스 > 요소
3대부분의 경우 class 셀렉터를 사용한다

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작