클래스 선택자

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 12번째.

클래스 선택자는 class 속성의 값을 기반으로 HTML 요소를 선택하는 데 사용됩니다. 이는 문서 전체에서 여러 요소에 동일한 스타일을 적용할 수 있게 해줍니다. 클래스 선택자는 태그 이름에 상관없이 일련의 요소 그룹을 동일한 방식으로 스타일링하고 싶을 때 특히 유용합니다.

CSS에서 특정 클래스를 가진 요소를 대상으로 하려면 마침표(.) 뒤에 클래스 이름을 붙여 사용합니다. 클래스 선택자를 사용하기 위한 기본 구문은 다음과 같습니다:

.classname {
    property: value;
}

예를 들어:

.highlight {
    background-color: yellow;
    color: black;
}

이 예제에서 클래스 선택자 .highlight는 클래스가 "highlight"인 모든 요소를 대상으로 합니다. 선언문은 이 요소들의 배경색을 노란색으로, 텍스트 색상을 검은색으로 설정합니다.

챌린지

쉬움

제목(<h1>, <h2>), 단락(<p>), 그리고 디비전(<div>)을 포함한 다양한 요소가 포함된 HTML 문서가 주어집니다. 이 요소들 중 일부는 class 속성을 가지고 있습니다. 여러분의 작업은 클래스 선택자를 사용하여 이러한 요소의 스타일을 지정하는 것입니다. 아래 단계를 따르세요:

<h1> 요소와 첫 번째 <p> 요소에 값이 "blue-text"인 class 속성을 추가합니다.
<h2> 요소와 두 번째 <p> 요소에 값이 "large-text"인 class 속성을 추가합니다.
"blue-text" 클래스를 가진 모든 요소를 대상으로 하는 클래스 선택자를 사용하여 CSS 규칙을 작성하세요. 이 요소들의 텍스트 색상을 blue로 설정하세요.
"large-text" 클래스를 가진 모든 요소를 대상으로 하는 클래스 선택자를 사용하여 CSS 규칙을 작성하세요. 이 요소들의 글꼴 크기를 24 픽셀로 설정하세요.

치트 시트

클래스 선택자(class selector)는 class 속성 값을 기반으로 HTML 요소를 타겟팅합니다. 마침표(.) 뒤에 클래스 이름을 붙여서 사용합니다:

.classname {
    property: value;
}

예시:

.highlight {
    background-color: yellow;
    color: black;
}

이것은 class="highlight"를 가진 모든 요소를 타겟팅하고 지정된 스타일을 적용합니다.

직접 해보기

<html>
<head>
    <title>Class Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <div>This is a division.</div>
</body>
</html>