Untitled Document

선택자에 대해 알아보도록 하지요.

선택자는 규칙의 일부분으로 스타일이 적용될 요소를 지정하는 부분이다. 즉, 스타일시트와 html의 연결고리 역할을 하는 것이다. 선택자의 종류를 알아보자면 아래와 같다. 선택자를 처음 들으신다구요? 저의 첫번째 강의를 다시 봐주세요. ^^

1.유형선택자 (Type selector)

가장단순한 선택자로 다음과 같이 HTML 요소를 태그로 호출한다.

H1{color:blue}
H2{color:blue}
P{color:blue}

같은 속성을 가진 선택자가 여러개가 있다면 하나로 묶어서 사용할 수 있다.

h1{font-size:10pt;font-weight:bold;color:red}
h2{font-size:10pt;font-weight:bold;color:red}
h3{font-size:10pt;font-weight:bold;color:red}

이것은 아래와 같이 쓸 수 있다.
h1, h2, h3 {font-size:10pt;font-weight:bold;color:red}

2. 맥락선택자(Contextual Selectors)

태그가 표시되는 맥락에 따라 html요소에 대한 스타일 속성을 지정할 수 있다.

단순한 선택자는 문서에서 모든 강조된 텍스트를 빨간색으로 표시한다.
EM{color:red}
맥락선택자를 사용하면 목록항목 안에서 표시될 때 강조되는 텍스트만 녹색으로 표시되도록 지정할 수 있다.
LI EM{color:green}
단순 선택자들의 목록으로 표현한다.

3. CLASS와 ID 속성 선택자

1) CLASS 속성 선택자

HTML요소의 태그에 CLASS속성을 추가하여 각 요소를 분류할 수있다. Class속성선택자를 쓸때는 마침표(.)를 사용한다.
예를 들어볼까요?

.pastoral{color:green} /*class=pastoral 속성이 들어간 모든 태그에 적용
H1.red{color:red} /*class=red 속성이 들어간 H1 태그에 적용
.....
.....
<strong class=pastoral>여기는 녹색...</strong>
<br>
<EM class=pastoral>여기도 녹색...</EM>
<H1 class=red>여기는 빨강색..</H1>
<H1>여기는 검은색...</H1>

2) ID 속성선택자

Class와 비슷하게 사용되지만 요소를 분류하는 것이 아니라 특정 요소를 대상으로 한다는 점이 다르다.
ID선택자는 스타일시트에 해쉬 기호(#)를 사용하여 지정한다.

<html>
<head>
<style>
p#061998 {color:red}
</style>
</head>
<body>
<p id="061988">오늘 추가된 항목</p>
</body>
</html>

여러 요소를 다루어야 할 경우:Class 사용
특정 요소 하나를 다루어야 할 경우:ID 사용

4. 유사선택자

css1에서는 앵커(<a>)태그에 적용되는 link, visited, active 등의 유사 클래스를 지원한다(브라우저에서 처리하는 여러 가지 링크 상태를 가리킨다).

:link =>링크가 걸려 있으나 아직 방문하지 않은곳.
:visited =>방문을 했던 곳
:hover =>마우스를 가져갔을때의 설정
:active =>마우스를 누르고 있을 동안의 설정

<html>
<head>
<style type="text/css">
a:link {font-family:돋움 ; font-size:9pt ; color:blue ; text-decoration:none;}
a:visited {font-family:돋움 ; font-size:9pt ; color:#000000 ; text-decoration:underline;}
a:hover {font-family:돋움 ; font-size:9pt ; color:#ff0000 ; text-decoration:underline;}
a:active {font-family:돋움 ; font-size:9pt ; color:#ff0000 ; text-decoration:underline;}
</style>
</head>
<body>
고다음<br>
<a href="http://www.daum.net">고다음</a>
</body>
</html>

 

이 스타일 정보는 문서의 <body>에서 링크 색상을 지정하는 기능과 같지만 스타일시트에서 제공하는 장점을 사용할 수 있다는 점이 다르다.

 

<이전   목록   다음>

 

Copyright ⓒ2001∼2003, alza.wo.to All Rights Reserved.