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