웹마당넷 |CSS 강좌 - [제11강] 스타일 시트(CSS)의 아이디(ID)로 속성 정의하기

제 목

CSS 강좌 - [제11강] 스타일 시트(CSS)의 아이디(ID)로 속성 정의하기

작성자

컴쟁이

등록일

2009-02-05 13:19:31

조회수

4,365

지금까지 스타일의 새로운 속성을 정의하기 위한 방법으로 클래스(CLASS)로 속성을 정의하는 방법에 대해 알아보았다. 이번에는 클래스를 사용하지 않고 다른 태그에서도 새로운 속성을 지정할 수 있는 방식의 아이디(ID)로 속성을 정의하는 방법에 대해 살펴보기로 하겠다.

1. 스타일 시트(CSS)의 아이디(ID)로 속성 정의하기

[Form]

<body>
<TagName ID = NewProperty>Contents...</TagName>
</body>
</html>

[Description]

-> 샵(#)은 클래스 지정방식에서 태그 이름(TagName) 대신에 사용한 것이라 보면 된다. (#과 새로운 속성(NewPorperty) 사이에는 마침표(.)가 없음에 유의한다.)
-> 새로운 속성(NewProperty)는 클래스로 속성을 정의하는 방식과 마찬가지로 사용자가 임의대로 지정할 수 있다.
-> 선택적인 클래스의 사용을 위해서 본문(<body>태그 내)에 CLASS라는 키워드(Keyword) 대신 ID를 이용한다는 점만 유의하면 된다.

2. 실전예제

[Source]

[Description]

<html>
<head>
<style type="text/css" >

</style>
</head>

<body>
<h1 ID = BLUE> ID=BLUE 속성을 정의하여 h1의 글자색을 파랑으로 지정</h1>
<h1 ID = RED > ID=RED 속성을 정의하여 h1의 글자색을 파랑으로 지정</h1>
<em ID = GREEN > ID=GREEN 속성을 정의하여 em의 글자색을 초록으로 지정</em>
</body>
</html>

-> 태그이름 대신 #, BLUE는 새로운 속성 즉, 아이디(ID)이다.

-> ID, BLUE가 갖는 글자색 속성은 파랑

-> 태그이름 대신 #, RED는 새로운 속성

-> ID, RED가 갖는 글자색 속성은 빨강

-> 태그이름 대신 #, GREEN는 새로운 속성

-> ID, GREEN가 갖는 글자색 속성은 초록

-> 같은 h1 태그를 사용했지만 ID 속성을 각각 지정하여 다른 효과를 볼 수 있다. 선택적으로 사용가능.

-> 클래스 지정 방식과 달리 특정 태그가 아닌 어떠한 태그라도 "ID=새로운 속성"으로 지정하여 주면 사용이 가능하다. (em에 적용하면 em이 갖고 있는 기울임꼴에 글자색은 초록으로 보여짐)