so woon!

[선택자] 클래스 선택자 (Class Selector) 본문

CSS/개념정리

[선택자] 클래스 선택자 (Class Selector)

xowoony 2022. 9. 6. 16:55

학습일 : 2022. 09. 05

클래스 선택자 (Class Selector)
CSS 속성(Property)을 적용하기 위해 사용하는 선택자 중 하나로, 태그가 가진 클래스의 이름을 활용하되,
그 이름 앞에 마침표(.)를 붙인다.
다음과 같이 작성한다. ("는 없는 것으로 한다.)

.클래스 이름 {
      속성 : 속성 값;
      속성 : 속성 값;
      속성 : 속성 값;
  }
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>클래스 선택자</title>
    <style>
        .human.girl.short {
            color: purple;
        }

        .human.girl.smart {
            color: orange;
        }

        .human {
            color: red;
        }

        .human.girl {
            color: blue;
        }
    </style>
</head>
<body>
    <kim class="human">김씨</kim>
    <lee class="human girl short smart">이씨</lee>
    <park class="human">박씨</park>
</body>
</html>

==============실행결과===============

 

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

'CSS > 개념정리' 카테고리의 다른 글

[선택자] 요소 선택자 (Element Selector)  (0) 2022.09.06
[선택자] 전체 선택자 (Universal Selector)  (0) 2022.09.06
[선택자] ID 선택자 (ID Selector)  (0) 2022.09.06
CSS 공통 내용  (0) 2022.09.06
tag (h)  (0) 2022.08.27
'CSS/개념정리' Related Articles more
Comments