선택자와 캐스케이드
유형, class, ID, 속성 선택자로 요소를 선택합니다. 특이성, 상속, 캐스케이드를 이해해 어떤 스타일이 우선 적용될지 예측합니다.
선택자와 캐스케이드은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
CSS란 무엇인가
CSS(계단식 스타일 시트)는 시각적 표현을 제어하는 언어입니다. 규칙을 작성하며, 각 규칙에는 요소를 대상으로 지정하는 선택자와 속성-값 쌍으로 이루어진 선언 블록이 있습니다.
selector {
property: value;
another-property: value;
}유형, 클래스 및 ID 선택자
세 가지 기본 선택자는 다음과 같습니다. 유형은 태그의 모든 요소를 대상으로 지정하고(p), 클래스는 클래스가 있는 요소를 대상으로 지정하며(.card), ID는 ID로 하나의 요소를 대상으로 지정합니다(#logo). ID는 명시도가 매우 높으므로 클래스를 우선 사용하는 것이 좋습니다.
p { color: #333; } /* type */
.card { padding: 16px; } /* class */
#logo { width: 200px; } /* ID */속성 및 의사 클래스 선택자
[type="email"]을 사용하면 속성 값으로 선택할 수 있습니다. 상태에는 의사 클래스를 사용합니다. 예를 들어 :hover, :focus, :active, :checked, :nth-child(), :first-child, :last-child가 있습니다.
input[type="email"] { border-color: blue; }
a:hover { text-decoration: underline; }
li:nth-child(odd) { background: #f5f5f5; }결합자
결합자는 요소 사이의 관계를 나타냅니다. 공백(자손), >(직접 자식), +(인접 형제), ~(일반 형제)입니다.
nav a { color: white; } /* descendant */
nav > ul { list-style: none; } /* child */
h2 + p { margin-top: 0; } /* adjacent sibling */명시도: 어느 규칙이 적용될까요
여러 규칙이 같은 요소를 대상으로 지정할 때는 명시도에 따라 적용할 규칙이 결정됩니다. ID 선택자(0,1,0,0)가 클래스 선택자(0,0,1,0)보다 우선하고, 클래스 선택자가 유형 선택자(0,0,0,1)보다 우선합니다. 인라인 스타일은 모두보다 우선합니다. !important는 모든 규칙보다 우선하므로 최후의 수단으로만 사용합니다.
명시도 계산하기
ID, 클래스·속성·의사 클래스, 유형을 각각 따로 셉니다. 열을 하나씩 비교합니다. 예를 들어 #nav .link:hover = (0,1,1,1)이고 .nav a = (0,0,1,1)입니다. 첫 번째 선택자가 우선합니다.
/* Specificity: 0,0,1,1 — loses */
.nav a { color: red; }
/* Specificity: 0,1,1,1 — wins */
#nav .link:hover { color: blue; }캐스케이드: 순서가 중요합니다
명시도가 같다면 스타일시트에서 나중에 나타나는 규칙이 우선합니다. 이것이 CSS에서 C가 의미하는 캐스케이드입니다. 가져오기 순서와 소스 순서가 모두 중요합니다.
상속
일부 CSS 속성은 기본적으로 상속됩니다. 즉, 별도로 설정하지 않아도 자식 요소가 부모 요소의 값을 받습니다. color, font-family, line-height와 같은 텍스트 관련 속성은 상속됩니다. margin과 같은 박스 모델 속성은 상속되지 않습니다.
body {
font-family: 'Inter', sans-serif; /* all text inherits this */
color: #1a202c; /* all text inherits this */
}:is() 및 :where() 선택자
:is()와 :where()를 사용하면 목록에 있는 항목 중 하나와 일치하는 간결한 선택자를 작성할 수 있습니다. 차이점은 다음과 같습니다. :is()는 인수 중 가장 높은 명시도를 상속하고, :where()는 항상 명시도가 0입니다.
/* Instead of h1 a, h2 a, h3 a: */
:is(h1, h2, h3) a {
color: inherit;
}범용 선택자 *
범용 선택자 *는 모든 요소와 일치합니다. CSS 초기화에 흔히 사용됩니다. 예를 들어 *, *::before, *::after { box-sizing: border-box; }를 사용하면 박스 모델을 훨씬 더 예측하기 쉽게 만들 수 있습니다.
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}브라우저 기본 스타일
브라우저는 작성한 스타일보다 먼저 자체 기본 스타일시트(사용자 에이전트 스타일시트)를 적용합니다. CSS 초기화(normalize.css)나 CSS 계층을 사용하면 이러한 기본값을 중화하여 알려진 기준 상태에서 스타일을 시작할 수 있습니다.
빠른 확인
명시도가 가장 높은 선택자는 무엇입니까?
복습: 선택자와 캐스케이드
유형, 클래스, ID, 속성, 의사 클래스 선택자로 요소를 대상으로 지정합니다. 명시도가 충돌을 해결합니다(ID > 클래스 > 유형). 캐스케이드는 소스 순서로 동률을 해결합니다. 상속은 텍스트 스타일을 자손 요소에 자동으로 전달합니다.
자주 묻는 질문
“선택자와 캐스케이드” 강의는 무료인가요?
네 — “선택자와 캐스케이드” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“선택자와 캐스케이드”에서 뭘 배우나요?
유형, class, ID, 속성 선택자로 요소를 선택합니다. 특이성, 상속, 캐스케이드를 이해해 어떤 스타일이 우선 적용될지 예측합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“선택자와 캐스케이드” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 선택자와 캐스케이드
- 색상, 타이포그래피 및 박스 모델
- display: block, inline, flex, grid 기초
- 위치 지정: relative, absolute, fixed, sticky