클래스 선택자
Coddy의 CSS 선택자 코스 레슨 — 15개 중 4번째.
클래스 선택자는 특정 class 속성을 가진 요소를 선택하는 CSS 선택자의 한 종류입니다. class 속성은 HTML 요소를 그룹화하기 위해 추가할 수 있는 사용자 정의 속성입니다.
특정 클래스를 가진 요소를 선택하려면 마침표(.) 뒤에 클래스 이름을 사용합니다. 예를 들어, .my-class 선택자는 my-class 클래스를 가진 모든 요소를 선택합니다.
다음은 클래스 선택자를 사용하여 웹 페이지의 스타일을 지정하는 예시입니다:
.my-class {
color: red;
font-size: 2em;
}요소에 클래스를 추가하려면 다음과 같이 작성합니다:
<div class="my-class"></div>이 CSS 규칙은 my-class 클래스를 가진 모든 요소의 색상을 빨간색으로, 글꼴 크기를 2em으로 설정합니다.
챌린지
쉬움- 3개의
h1요소를 가진 웹 페이지를 만드세요. - 첫 번째
h1요소에 클래스를 추가하세요. - 두 번째
h1요소에 다른 클래스를 추가하세요. - CSS 클래스 선택자를 사용하여 첫 번째
h1요소의 색상을 red 로 지정하고 글꼴 크기를 64px로 설정하세요. - 다른 CSS 클래스 선택자를 사용하여 또 다른
h1요소의 색상을 blue 로 지정하고 글꼴 크기를 32px로 설정하세요.
직접 해보기
<html>
<head>
<title>Class Selector Exercise</title>
<style>
/* CSS Code goes here */
</style>
</head>
<body>
</body>
</html>