웹/CSS

CSS - 기본 선택자

오늘부터개발자 2019. 11. 24. 10:51

선택자

HTML에 스타일(CSS)을 적용하기 위해 HTML의 특정한 요소를 선택하는 사인

 

 

전체 선택자(Universal Selector)

(요소 내부의) 모든 요소를 선택


<head>
    <style>
        * {
            color : red;
        }
    </style>
</head>
<body>
    <h1>제목</h1>
    <p>본문</p>
</body>

 

 

태그 선택자(Type Selector)

태그 이름이 E인 요소 선택


<head>
    <style>
        h1 {
            color : red;
        }
        p {
            color : blue;
        }
    </style>
</head>

<body>
    <h1>제목</h1>
    <p>본문</p>
</body>

 

 

클래스 선택자(Class Selector)

HTML class 속성의 값이 E인 요소 선택


<head>
    <style>
        .title {
            color: red;
        }
        .main-text {
            color: blue;
        }
    </style>
</head>

<body>
    <h1 class=“title”>제목1</h1>
    <p class=“main-text”>본문</p>
</body>

 

 

아이디 선택자(ID Selector)

HTML id 속성의 값이 E인 요소 선택


<head>
    <style>
        #title {
            color: red;
        }
    </style>
</head>
<body>
    <h1 id=“title”>제목1</h1>
    <p>본문</p>
</body>

 

 

 

 

 

출처 : heropy.org