[CSS 기초] 클래스 선택자(Class Selector)
클래스 선택자(Class Selector)는 특정 값을 class 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다.
속성값 앞에 .을 붙여 클래스임을 나타냅니다. 예를 들어
.abc
는 class 속성값으로 abc를 갖는 요소를 선택합니다.
클래스 선택자 앞에 아무 것도 없으면
클래스 선택자 앞에 아무 것도 없으면 그 값을 갖는 모든 요소를 선택합니다. 즉 .abc는 *.abc와 같은 의미로
<h1 class="abc">Lorem</h1>
<p class="abc">Lorem</p>
모두 선택합니다.
클래스 선택자 앞에 무언가 있으면
클래스 선택자 앞에 무언가 있으면 모두 만족하는 요소를 선택합니다. 예를 들어
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강좌] CSS강좌속성과 상속하지 않는 속성 (0) | 2017.12.05 |
|---|---|
| [CSS 강좌] 아이디 선택자(ID Selector) (0) | 2017.12.04 |
| [CSS 기초] 타입 선택자(Type Selector) (0) | 2017.11.25 |
| [CSS 기초] 전체 선택자(Universal Selector) (0) | 2017.11.25 |
| 기초 CSS 문법 강좌 (0) | 2017.11.23 |
itworldkorea
IT korea가 세상(world)을 변화시킨다.