CSS - Class 선택자 사용 :: 열공의 기록

CSS - Class 선택자 사용

2025. 3. 18. 21:45

CSS에서 Class Selector는 HTML 요소의 class 속성을 사용하여 특정 요소를 선택하는 방법입니다. Class Selector는 .(마침표)로 시작하며, 뒤에 클래스 이름을 지정합니다. 이 방법은 다양한 타입의 요소에 동일한 스타일을 적용하거나, 특정 타입의 요소 중에서 클래스가 지정된 요소만 선택할 때 유용합니다

CSS 클래스(Class) 선택자(Selector) 사용 방법

CSS 클래스(Class) 선택자(Selector) 사용 방법

1. HTML 코드 예제

2. 코드 설명

3. 클래스(Class) 선택자(Selector)의 특징

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

HTML 코드 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Class Selector 예제</title>
  <style>
    /* Class Selector: 모든 .highlight 요소 선택 */
    .highlight {
      background-color: yellow;
      font-weight: bold;
    }

    /* Class Selector + Type Selector: <p> 요소 중 .highlight 클래스가 있는 요소 선택 */
    p.highlight {
      color: red;
    }

    /* Class Selector: 모든 .note 요소 선택 */
    .note {
      font-style: italic;
      color: blue;
    }
  </style>
</head>
<body>
  <h1 class="highlight">이것은 제목입니다 (h1)</h1>
  <p>이것은 일반 문단입니다 (p).</p>
  <p class="highlight">이것은 강조된 문단입니다 (p.highlight).</p>
  <div class="note">이것은 노트입니다 (div.note).</div>
  <span class="note">이것은 또 다른 노트입니다 (span.note).</span>
</body>
</html>

코드 설명

1) Class Selector: .highlight

.highlight {
  background-color: yellow;
  font-weight: bold;
}

class="highlight"가 지정된 모든 요소를 선택합니다.
배경색을 노란색(yellow)으로, 폰트 두께를 굵게(bold) 설정합니다.

2) Class Selector + Type Selector : p.highlight

p.highlight {
  color: red;
}

<p> 요소 중 class="highlight"가 지정된 요소만 선택합니다.
텍스트 색상을 빨간색(red)으로 설정합니다.

3) Class Selector : .note

.note {
  font-style: italic;
  color: blue;
}

class="note"가 지정된 모든 요소를 선택합니다.
텍스트를 기울임꼴(italic)로, 색상을 파란색(blue)으로 설정합니다.

클래스(Class) 선택자(Selector)의 특징

유연성: 다양한 타입의 요소에 동일한 스타일을 적용할 수 있습니다.
특정성: 특정 타입의 요소 중에서 클래스가 지정된 요소만 선택할 수 있습니다.
재사용성: 동일한 클래스를 여러 요소에 적용하여 스타일을 재사용할 수 있습니다.

저작자표시 비영리 변경금지

'web 언어 > HTML5 & CSS & Javascript' 카테고리의 다른 글

CSS - 속성 선택자(Selector) 7가지 사용방법 (0)	2025.03.19
CSS - 선택자(Selector) 결합하여 사용하는 방법 (0)	2025.03.18
CSS - Type 선택자 사용 (0)	2025.03.18
HTML5 - 테이블(Table) 목록 표현 방법 (0)	2025.03.18
JS - 바닐라js로 DOM 요소 복사하기 (0)	2025.03.17

열공의 기록