JUST GO

[선택자] 클래스 선택자 본문

CSS/학습내용

[선택자] 클래스 선택자

root_go 2022. 10. 3. 16:47

CSS

- CSS 속성(Property)은 다음과 같이 작성한다.

"속성 이름" : "속성 값";

- CSS 속성은 세미콜론(;)으로 구분하여 여러개 작성할 수 있다.

- 겹치는 속성은 아래와 같은 순서로 우선되어 적용된다.

  1. 속성 값 뒤에 !important 를 적은 경우.(나중에 CSS가 엄청 꼬이기 때문에 잘 사용하지 않음)
  2. 보다 명확하게(복잡하게) 해당 요소를 선택하는 경우.(ID 선택자 > 클래스 선택자 > 요소 선택자)
  3. 복잡도가 같다면 보다 아래에 적힌 경우.

- 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소의 상태나 특성에 따라 선택자를 분기하기 위해 사용한다. 콜론(:)을 활용하여 다음과 같이 작성한다.

"선택자":"의사 클래스" { ... }

 

클래스 선택자

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

- 다음과 같이 작성한다. ("는 없는 것으로 한다.)

"클래스 이름" {

"속성" : "속성 값";

"속성" : "속성 값";

"속성" : "속성 값";

}

 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>클래스 선택자</title>
    <style>
        .apple {
            color: red;
        }
        .apple.banana {
            font-size: 24px;
            color: blue;
        }
        .apple.banana.coconut {
            font-size: 36px;
            
        }
    </style>
</head>
<body>
    <div class="apple">애플</div>
    <div class="apple banana">애플 & 바나나</div>
    <div class="apple banana coconut">애플 & 바나나 & 코코넛</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>클래스 선택자</title>
    <style>
        lee.human.girl.short {
            color: red;
        }
        .human.girl.short {
            color: orange;
        }
        .human.girl.smart {
            color: purple;
            
        }
    </style>
</head>
<body>
    <kim class="human">김씨</kim>
    <lee class="human girl short smart">이씨</lee>
    <park class="human">박씨</park>
</body>
</html>

'CSS > 학습내용' 카테고리의 다른 글

[결합자] 결합자 종류  (0) 2022.10.03
[선택자] ID 선택자  (1) 2022.10.03
[속성] grid  (0) 2022.10.03
[속성] flex  (0) 2022.10.03
[CSS] 속성  (1) 2022.10.03
'CSS/학습내용' Related Articles more