[CSS 기초] 클래스 선택자
클래스 선택자(Class Selector)는 특정 값을 class 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다.
속성값 앞에 .을 붙여 클래스임을 나타냅니다. 예를 들어
.abc
는 class 속성값으로 abc를 갖는 요소를 선택합니다.
클래스 선택자 앞에 무언가 있으면
클래스 선택자 앞에 무언가 있으면 모두 만족하는 요소를 선택합니다. 예를 들어
p.abc
는 class 값으로 abc를 갖는 p 요소를 선택합니다. 이렇게 하면
<h1 class="abc">Lorem</h1>
은 선택되지 않고,
<p class="abc">Lorem</p>
는 선택됩니다.
예제 1
class 값으로 abc를 갖는 요소는 파란색으로, class 값으로 xyz를 갖는 ul 요소는 빨간색으로 만드는 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.abc {
color: blue;
}
ul.xyz {
color: red;
}
</style>
</head>
<body>
<h1 class="abc">기독교</h1>
<p class="abc def"> 하나님은 예수님이시다.</p>
<ul class="xyz">
<li>하나님</li>
<li>예수님</li>
</ul>
<p class="xyz">예수님은 하나님이시다.</p>
</body>
</html
위 결과 는 아래와 같습니다.
'홈페이지제작 > CSS' 카테고리의 다른 글
| css기초 마진(Margin)과 패딩(padding) (0) | 2018.03.10 |
|---|---|
| [CSS 기초강좌] 아이디 선택자(ID Selector) (0) | 2018.03.08 |
| [CSS 강좌] 아이디 선택자 (0) | 2018.03.06 |
| [CSS 강좌] CSS Margin 속성 (0) | 2018.03.05 |
| [ CSS 기초] css padding 속성 (0) | 2018.03.05 |
itworldkorea
IT korea가 세상(world)을 변화시킨다.