본문 바로가기
CSS

CSS-선택자(selector)

by Hrin_0820 2020. 8. 6.

선택자(selector) : style을 적용하고자 하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일 정의

CSS Rule Set

selector 패턴 설명
전체 셀렉터 * 페이지의 모든 요소 선택
type 셀렉터 태그명 지정된 태그명 요소 선택
ID 셀렉터 #(id명) id를 이용해 요소에 이름을 부여하여 선택 (id명은 중복 X)
class 셀렉터 .(class명) class를 이용해 요소에 이름을 부여하여 선택 (class명은 중복 O)
후손(하위) 셀렉터 공백 요소 내부에 있는 모든 해당 요소 선택 (공백)
자식 셀렉터 > 요소 내부에 있는 자식 요소만 선택 (후손 X)
인접 셀렉터 + 현재 요소의 바로 뒤에 나오는 요소만 선택
형제 셀렉터 ~ 현재 요소와 같은 계층(형제)에 있는 요소만 선택 (자식, 후손 X)
그룹 셀렉터 , 여러 선택자들을 함께 묶어 속성 부여

자식, 후손 셀렉터 / 인접, 형제 셀렉터 설명

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>선택자(selector)</title>
    <style>
        *{margin: 10px} /*전체 선택자*/
        span{color: red} /*type(tag) 선택자*/
        #container{background-color: beige} /*id 선택자*/
        h1{background-color: lightgray} /*type 선택자*/
        .tea1{background-color: lightpink} /*class 선택자*/
        div h2{text-align: center}/*하위 선택자*/
        h2 + p > span{color: blue} /*인접 선택자 + 자식 선택자*/
        h2~p{text-decoration: underline; text-decoration-color: chocolate} /*형제 선택자*/
        h1, h2{color:blueviolet} /*그룹 선택자*/
        ul li{list-style:none; margin-left:10px;}  /*type 선택자 + 하위 선택자*/
    </style>
</head>
<body>
    <h1>건강한 하루</h1>
    <div id="container">
        <h2>건강해지는 차</h2>
        <p>머리와 피부에 좋은 차는 어떤 것들일까. <span>차의 종류</span>에 대해 알아보도록 합니다.</p>
        <ul>
            <li class="tea1">
                <h3>대나무차 <span>15,000원</span></h3>
                <p>얼굴에 물을 주는 효과가 있다.</p>
            </li>
            <li class="tea2">
                <h3>감잎차 <span>14,000원</span></h3>
                <p>빈혈있는 사람에게 효과가 있다.</p>
            </li>
            <li class="tea3">
                <h3>결명자차 <span>20,000원</span></h3>
                <p>눈을 밝혀주는 효과가 있다.</p>
                <p>보리차와 비슷하나 맛이 더 은은하고 구수하다.</p>
            </li>
        </ul>
    </div>
</body>
</html>
선택자(selector)

건강한 하루

건강해지는 차

머리와 피부에 좋은 차는 어떤 것들일까. 차의 종류에 대해 알아보도록 합니다.

  • 대나무차 15,000원

    얼굴에 물을 주는 효과가 있다.

  • 감잎차 14,000원

    빈혈있는 사람에게 효과가 있다.

  • 결명자차 20,000원

    눈을 밝혀주는 효과가 있다.

    보리차와 비슷하나 맛이 더 은은하고 구수하다.

'CSS' 카테고리의 다른 글

CSS-Font & Text  (0) 2020.08.10
CSS-선택자(selector)4 : 가상요소 선택자  (0) 2020.08.08
CSS-선택자(selector)3 : 가상클래스/UI 요소 상태 선택자  (0) 2020.08.07
CSS-선택자(selector)2 : 속성선택자  (0) 2020.08.07
CSS란?  (0) 2020.08.06

댓글