[HTML/CSS]4.CSS 선택자

Mar 10, 2025

Contents

CSS 선택자 및 스타일링 특징 선택자 우선순위 및 결과 분석 CSS 선택자 우선순위 이해하기

먼저 아래의 HTML 및 CSS 코드를 살펴보겠습니다:


html
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .red-box{
      background-color: red;
    }
    .box {
      border: 1px solid black;
      padding: 10px;
      margin: 10px;
      border-radius: 10px;
    }
    #box {
      display: block;
    }
    div {
      background-color: aqua;
      font-size: 16px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div>Hello World</div>
  <div class="box">Hello World</div>
  <div class="box">Hello World</div>
  <span id="box">Hello World</span>
  <span>Hello World</span>
  <div class="red-box">빨간박스</div>
</body>
</html>

CSS 선택자 및 스타일링 특징

1. 태그 선택자 (Element Selector)


css
Copy
div {
  background-color: aqua;
  font-size: 16px;
  font-weight: bold;
}

모든 div 요소에 적용됩니다.

배경색: 아쿠아(하늘색)

글자 굵기: 굵게(bold)

2. 클래스 선택자 (Class Selector)


css
Copy
.box {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
}

class="box"가 적용된 모든 요소에 적용됩니다.

테두리: 1px 검은색 실선

안쪽 여백(padding): 10px

바깥쪽 여백(margin): 10px

모서리 둥글게(border-radius): 10px


css
Copy
.red-box {
  background-color: red;
}

class="red-box"가 적용된 요소에 빨간색 배경을 적용합니다.

3. ID 선택자 (ID Selector)


css
Copy
#box {
  display: block;
}

id="box"가 적용된 요소(span 태그)에 적용됩니다.

display: block으로 설정하여 인라인(inline) 요소인 span을 블록 요소처럼 표시합니다.

선택자 우선순위 및 결과 분석

이 코드를 실행하면 다음과 같은 결과가 나타납니다:

첫 번째 <div>Hello World</div>

div 태그 스타일이 적용됩니다.

아쿠아색 배경, 16px 굵은 글씨

두 번째와 세 번째 <div class="box">Hello World</div>

div 태그 스타일(아쿠아색 배경, 16px 굵은 글씨)과

.box 클래스 스타일(테두리, 여백, 둥근 모서리)이 함께 적용됩니다.

<span id="box">Hello World</span>

span 태그이지만 display: block으로 인해 블록 요소처럼 표시됩니다.

기본 스타일은 유지됩니다(배경색 없음).

<span>Hello World</span>

기본 인라인 요소로 표시됩니다.

특별한 스타일이 적용되지 않습니다.

<div class="red-box">빨간박스</div>

div 태그 스타일(아쿠아색 배경, 16px 굵은 글씨)이 적용되지만

.red-box 클래스의 빨간색 배경이 아쿠아색 배경을 덮어씁니다.

결과적으로 빨간색 배경에 16px 굵은 글씨로 '빨간박스'가 표시됩니다.

CSS 선택자 우선순위 이해하기

이 예제에서 중요한 부분은 CSS 선택자의 우선순위(Specificity)입니다:

ID 선택자(#box)가 가장 높은 우선순위를 가집니다.

클래스 선택자(.box, .red-box)가 중간 우선순위를 가집니다.

태그 선택자(div)가 가장 낮은 우선순위를 가집니다.

따라서 마지막 div에서는 태그 선택자의 배경색(아쿠아)보다 클래스 선택자의 배경색(빨간색)이 우선 적용됩니다.

Contents

CSS 선택자 및 스타일링 특징 선택자 우선순위 및 결과 분석 CSS 선택자 우선순위 이해하기

html Copy <!DOCTYPE html> <html lang="en"> <head> <style> .red-box{ background-color: red; } .box { border: 1px solid black; padding: 10px; margin: 10px; border-radius: 10px; } #box { display: block; } div { background-color: aqua; font-size: 16px; font-weight: bold; } </style> </head> <body> <div>Hello World</div> <div class="box">Hello World</div> <div class="box">Hello World</div> <span id="box">Hello World</span> <span>Hello World</span> <div class="red-box">빨간박스</div> </body> </html>