선택자(selector) : style을 적용하고자 하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일 정의
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>
건강한 하루
건강해지는 차
머리와 피부에 좋은 차는 어떤 것들일까. 차의 종류에 대해 알아보도록 합니다.
대나무차 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 |
댓글