4/20(월) HTML, CSS 기초(1)

허경수·2026년 4월 20일

CSS html 선택자 클래스 프론트엔트

프론트엔드

목록 보기

7/21

📝 클래스(Class) 중첩과 선택자 우선순위 정복하기

HTML 요소에 별명을 붙여주는 class. 하나의 요소에 여러 개의 별명을 붙일 수도 있고, 특정 조건이 맞아야만 스타일이 적용되기도 합니다. 실습 예제를 통해 클래스 선택자의 핵심 개념을 알아봅시다.

1. 클래스(Class)의 핵심 특징

중복 가능: 하나의 클래스 이름을 여러 태그에 사용할 수 있습니다.
다중 부여: 하나의 태그에 여러 개의 클래스를 공백으로 구분하여 넣을 수 있습니다. (예: class="d black")
선택자 조합: 특정 클래스들을 동시에 만족할 때만 스타일을 적용할 수 있습니다.

2. 실습 예제: 클래스 조합과 스타일 우선순위

📝 HTML 구조

태그에 하나 혹은 두 개의 클래스(별명)를 부여했습니다.

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

<!-- 아래 엘리먼트는 별명이 2개 입니다.(.d, .black) -->
<div class="d black"></div>

<!-- 아래 엘리먼트는 별명이 2개 입니다.(.d, .black) -->
<div class="b black"></div>

<div class="f"></div>

🎨 CSS 스타일링

body {
  text-align: center;
}

/* 모든 div 공통 스타일 */
div {
  width: 30%;
  display: inline-block;
  height: 100px;
  background-color: red; /* 기본값: 빨강 */
  margin: 10px;
}

/* 1. 태그와 클래스의 조합 (div이면서 클래스가 a인) */
div.a {
  background-color: green;
}

/* 2. 일반 클래스 선택자 */
.b {
  background-color: blue;
}

.black {
  background-color: black;
}

/* 3. 클래스 두 개가 동시에 있는 경우 (d이면서 동시에 black인) */
.d.black {
  background-color: #565656; /* 진한 회색 */
}

3. 핵심 개념 분석

💡 클래스 두 개를 가진 요소는 어떻게 보일까?

<div class="d black">:
- .d.black 선택자가 정확히 일치하여 #565656(회색)이 적용됩니다.
- 만약 .d.black 스타일이 없다면 .black 스타일인 검정색이 적용되었을 것입니다.
<div class="b black">:
- 이 요소는 .b 스타일(파랑)과 .black 스타일(검정)을 모두 가집니다.
- CSS 코드 상에서 .black이 더 아래에 작성되었기 때문에 검정색이 최종적으로 적용됩니다. (CSS는 아래에 있는 코드가 우선순위가 높습니다.)

💡 선택자 작성 팁

.class1.class2: 클래스 사이에 공백이 없으면 "두 클래스를 모두 가진 요소"를 뜻합니다.
div.a: "div 태그 중 클래스가 a인 요소"를 뜻합니다. 그냥 .a보다 더 구체적인 선택자입니다.

4. 📢 요약: 클래스 vs ID

구분	클래스 (Class)	아이디 (ID)
기호	`.` (점)	`#` (샵)
중복 사용	한 페이지 내 여러 번 가능	단 한 번만 사용 가능 (고유값)
우선순위	낮음	높음 (클래스보다 우선함)
비유	이름, 별명, 특징 (예: 안경 쓴 사람)	주민등록번호 (유일무이)