1.4 속성(Attribute)을 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기
1.4 속성(Attribute)을 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기
HTML 요소(Element)의 속성을 이용하여 선택자를 구성하는 형태로 다음과 같은 다양한 형식들을 사용하여 선택자를 구성하고 CSS 규칙을 만들 수 있습니다.
위에서 첫 번째 형식은 속성이름을 갖는 모든 요소에 대해서 스타일을 적용하는 형태이고 두 번째부터 선택자를 구성하면서 “[속성이름=속성값]” 형태와 같이 속성이름이 속성값과 같은가를 검사하는 연산자가 사용되었습니다. 정리하면 다음과 같습니다.
|
연산자 |
설명 |
|
= |
속성이 속성값과 같을 경우 |
|
~= |
속성이 속성값과 같거나 공백을 포함한 속성값일 경우 |
|
|= |
속성이 속성값과 같거나 속성값이 “속성값-…”의 형태의 속성값일 경우 |
|
^= |
속성이 속성값으로 시작되는 값을 가질 경우 |
|
$= |
속성이 속성값으로 끝나는 값을 가질 경우 |
|
*= |
속성이 속성값으로 설정된 문자열을 적어도 한 번 이상 포함하는 경우 |
1.4.1 “[속성]”의 경우
메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>attribute를 이용한 선택자 예제</title>
<style>
</style>
</head>
<body>
<h4>HTML5,CSS and Javascript</h4>
<h4 title="book_title">HTML5,CSS and Javascript</h4>
<h4 title="music_title">박정현의 "꿈에" </h4>
</body>
</html>위와 같이 title 속성이 없는 h1 요소,
title 속성이 있는 h1 요소 마지막으로 title 속성이
있는 p 요소로 구성된 HTML 문서를 “attributeEx.html”로 저장한 후 IE9를 통해서 확인해봅니다.
이제 title 속성을 이용하여 스타일을 적용해볼까요? 위 코드에서 <style>…</style> 블록 내에 다음과 같이 코드를 작성합니다.
<style>
h4[title]{ color: blue; font-size: 1.5em; }
</style>위 CSS 규칙은 title 속성이 있는 h4 요소들에 글꼴 색상은 파란색, 글꼴 크기는 기존 크기의 1.5배(1.5 em)로 스타일을 적용하여 나타내라는 의미입니다. 위와 같이 코드를 추가, 저장 후 IE9를 통해 보면 h4 요소의 title 속성값이 “book_title", “music_title”로 달라도 title 속성이 h4 요소에 정의되어 있어서 다음과 같이 모두 스타일이 적용되어 나타나게 됩니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.