클래스 선택자

Coddy HTML 여정의 CSS로 스타일링하기 섹션에 포함된 레슨. 76개 중 12번째.

클래스 선택자는 class 속성값을 기준으로 HTML 요소를 선택하는 데 사용됩니다. 이를 통해 문서 전체의 여러 요소에 동일한 스타일을 적용할 수 있습니다. 클래스 선택자는 태그 이름과 관계없이 여러 요소 그룹에 같은 방식으로 스타일을 지정하려는 경우 특히 유용합니다.

CSS에서 특정 클래스를 가진 요소를 선택하려면 마침표(.</code) 뒤에 클래스 이름을 사용합니다. 클래스 선택자를 사용하는 기본 구문은 다음과 같습니다.</p><pre><code class="language-css">.classname { property: value; }

예를 들면:

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

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

챌린지

쉬움

여러 요소가 포함된 HTML 문서가 주어집니다. 여기에는 제목(<h1>, <h2>), 단락(<p>), 구획(<div>)이 있습니다. 아직 어느 요소에도 class가 없습니다. 먼저 class 속성을 추가한 다음 클래스 선택자로 요소의 스타일을 지정하세요. 아래 단계를 따르세요.

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

직접 해보기

<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>