[CSS 기초강좌] 선택자 > 클래스 선택자(Class Selector)
오늘은 CSS강좌 기초 클래스 선택자에대하여 학습해 봅니다.
CSS클래스는 요즈음 홈페이지 제작 할때 많이 적용되고 있음으로 잘 학습해 두시기 바랍니다.
기초를 잘 이해하셔야 나중에 쉽습니다. 따라서 코딩도 해보시고 실행시켜서 결과도 확인해 보세요
클래스 선택자
클래스 선택자(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">Lorem</h1>
<p class="abc def">Phasellus lacinia tempus mauris eu laoreet.</p>
<ul class="xyz">
<li>Dolor</li>
<li>Amet</li>
</ul>
<p class="xyz">Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
</body>
</html>
클래스 속성의 값이 여러 개이면
class 속성은 여러 개의 값을 가질 수 있습니다.
<p class="abc xyz">Lorem</p>
이 경우 CSS 코드 순서대로 적용됩니다.
예제 2
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
.abc {color: blue;}
.xyz {color: red;}
</style>
</head>
<body>
<p class="abc xyz">Lorem Ipsum Dolor.</p>
<p class="xyz abc">Lorem Ipsum Dolor.</p>
</body>
</html>
클래스 속성의 값을 abc xyz로 하든 xyz abc로 하든, CSS에서 .abc를 먼저 .xyz를 나중에 정의했으므로 .xyz가 적용됩니다.
'홈페이지제작 > CSS' 카테고리의 다른 글
| [CSS 강좌] 표(table) 과 배경색 꾸미기 (0) | 2018.01.10 |
|---|---|
| [CSS 기초강좌 ] 아이디 선택자(ID Selector) (0) | 2018.01.09 |
| [CSS 강좌 ]홈페이지의 글자 타입 선택자(Type Selector) (0) | 2018.01.05 |
| [CSS강좌] 전체 선택자(Universal Selector) (0) | 2018.01.04 |
| [기초CSS 강좌 ] 반응형 레이아웃 만들기(홈페이지만들기) (0) | 2018.01.02 |
itworldkorea
IT korea가 세상(world)을 변화시킨다.