1.3 class를 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기
class를 이용한 선택자를 구성한다는 것은 class 속성을 가지고 있는 요소들 중에서 class 속성값이 일치하는 요소(들)에 대해서 스타일을 적용하는 것으로 다음과 같은 형식을 이용하게 됩니다.
.class이름 { property:value; property:value; …}
메모장을 실행하여 다음과 같이 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>class를 이용한 선택자 예제</title>
<style>
</style>
</head>
<body>
<h1>HTML5,CSS and Javascript</h1>
<h1 class="book_title">HTML5,CSS and Javascript</h1>
<p class="book_title">HTML5,CSS and Javascript</p>
</body>
</html>위와 같이 작성하고 “classEx.html”로 저장합니다. 그 다음 IE9를 통해 확인해보면 다음과 같이 나타납니다.
이제 class 속성을 이용하여 스타일을 적용해볼까요? 이를 위해 위 코드에서 <style>…</style> 블록 내에 다음과 같이 코드를 작성합니다.
<style>
.book_title {color:red;}
p.book_title{color:blue;font-size:12pt;}
</style><style>…</style> 내의 첫 번째 CSS 규칙은 class 속성값이 “book_title”인 요소에 대해서 그 색상을 빨강색으로 적용하라는 것이고 두 번째 CSS 규칙은 p요소 중에서 class 속성값이 “book_title”인 요소에 대해서 색상을 파란색, 글꼴 크기를 12 포인트(point)로 나타내라는 의미입니다. 보시면 알겠지만 첫 번째 CSS 규칙은 p요소 중에서 class 속성값이 “book_title”인 요소에 대해서도 적용됩니다만 우선 순위에 의해서 두 번째 CSS 규칙에 적용되어 다음과 같이 나타나게 됩니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 1.4.2 “[속성=속성값]”의 경우 (0) | 2013.07.31 |
|---|---|
| 1.4 속성(Attribute)을 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기 (0) | 2013.07.31 |
| 1.2 id를 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기 (0) | 2013.07.31 |
| 1. CSS의 구조와 선택자(selector) (0) | 2013.07.31 |
| CSS(Cascading Style Sheets) (0) | 2013.07.31 |
