1. CSS의 구조와 선택자(selector)
하나의 스타일 시트(Style Sheet)는 스타일
규칙(Rule)로 구성되며 각 규칙은 다시 선택자(selector)와
속성(property) 그리고 속성값(value)의 조합으로
구성됩니다. 이를 이해를 돕기 위해서 시각화하면 다음과 같이 하나의 규칙(Rule)은 selector, property, value와 같은 부분으로 구성됩니다.
선택자(selector)는 CSS 규칙이 적용되는 대상을 나타내는 것으로 id, class 등과 같은 조건에 의해서 선택된 HTML5의 HTML 요소를 나타냅니다.
속성(property)는 선택자에 속한 글꼴 크기(font-size)와
같은 하나의 속성을 나타내며 속성값(value)은 선택자에 속한 글꼴 크기(font-size)와 같은 속성의 실제값을 앞서 설명한 절대 수치나 상대 수치를 이용하여 설정하면 됩니다.
위와 같이 속성과 속성값은 한 쌍으로 여러 개가 정의될 수 있으며 속성과 속성값으로 이루어진 한 쌍은 위와 같이 세미콜론(;)을 기준으로 구분하여 정의합니다.
그러면 선택자를 어떻게 구성하고 이를 통해 어떻게 규칙을 만들 수 있는지 알아볼까요?
이에 대해서는 2011년 9월에 최종 권고안(Recommendation)인 “http://www.w3.org/TR/css3-selectors/”에
나타난 선택자(selector)를 기준으로 하나씩 알아봅니다.
1.1 요소 이름을
이용한 선택자(Selector) 구성과 규칙(Rule) 만들기
요소 이름을 이용한 선택자는 HTML 문서에서 정의되어
있는 요소들의 이름을 선택자(selector)로 설정하여 이에 해당하는 요소에 “속성:속성값; …”으로
대변되는 스타일을 적용하는 것으로 다음과 같은 형식을 사용합니다.
HTML 요소이름 { property:value;
property:value; …}
간단하게
메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>요소 이름을 이용한 선택자 예제</title>
<style>
</style>
</head>
<body><h4>하나의 웹페이지는 기본 골격(뼈대)는 <em>HTML5</em>
디자인에는 <em>CSS3</em>를 이벤트와 관련해서는
<strong>Javascript(jQuery)</strong>로 생성할 수 있습니다.
</h4>
</body>
</html>
위와 같이 body 요소 안에 h4, em, strong 요소(Element)로 웹페이지에 나타날 내용을 구성하고 “elementEx.html”로
저장한 후 IE를 통해 확인합니다.
이제
요소 이름을 이용한 선택자를 <style>…</style> 블록 내에 다음과 같이
작성하여 선택된 요소들에 스타일을 적용해봅니다.
<style>
h4{font-size: 12pt;}
em{color: blue; font-size: 14pt;}
strong{color:violet; font-size: 20pt;}
</style>위와 같이 h4 요소는 글꼴 크기가 12pt, em 요소는 색상이 파란색, 글꼴 크기는 14pt, strong 요소는 글꼴 색상이 보라색, 글꼴 크기는 20pt로 스타일 적용하도록 작성, 저장 후 IE9를 통해 보면 다음과 같이 설정한대로 스타일이 적용되어 나타납니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 1.3 class를 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기 (0) | 2013.07.31 |
|---|---|
| 1.2 id를 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기 (0) | 2013.07.31 |
| CSS(Cascading Style Sheets) (0) | 2013.07.31 |
| 11.2 class, id, style 속성 (0) | 2013.07.31 |
| 11. Global Attributes (0) | 2013.07.31 |