본문 바로가기

Web/css

4. class 선택자

728x90

 

 

 

✔️ class 선택자

CSS 클래스 선택자는 특정한 클래스를 가진 HTML 요소를 선택하여 해당 요소에 스타일을 적용하는 데 사용된다. 클래스는 여러 요소에 동시에 적용할 수 있으며, 동일한 클래스를 여러 요소에 사용할 수 있다. 클래스 선택자는 마침표(.)로 시작하며, 클래스 이름은 마침표 이후에 나온다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class 선택자</title>
    <style>
        .bigText { font-size: 50px; }
        .smallText { font-size: 14px; }
        .redText { color: red; }
    </style>
</head>
<body>
    <h2 class="bigText">class 선택자</h2>
    <p><span class="smallText redText">클래스 선택자는 특정 집단의 요소를 한번에 스타일을 적용</span></p>
    <p><span class="smallText">. 기호를 사용하여 같은 class 이름을 가진 요소에 스타일을 적용</span></p>
</body>
</html>

 

 

 

                                            👇

 

 

728x90

'Web > css' 카테고리의 다른 글

6. 자식 자손 선택자  (0) 2024.07.22
5. 그룹 선택자  (0) 2024.07.22
3. id 선택자  (0) 2024.07.19
2. 요소 선택자  (0) 2024.07.19
1. 전체 선택자  (0) 2024.07.13