|
앞서 같은 태그내에서 다른 스타일로 지정하기 위한 선택적 스타일 적용방법을 알아보았다. 이러한 스타일의 새로운 속성을 정의하기 위한 방법으로는 클래스(CLASS)로 속성을 정의하는 방법과 아이디(ID)로 속성을 정의하는 방법으로 나누어 볼 수 있겠다. 우선, 클래스로 속성을 정의하는 방법에 대해 살펴보기로 한다. |
1. 스타일 시트(CSS)의 클래스(CLASS)로 속성 정의하기
|
[Form] |
|
<html>
<head>
<style type="text/css" >
<!--
TagName.NewProperty {Property 1: Value 1; Property 2: Value 2; …… Property N: Value N;}
-->
</style>
</head>
<body>
<TagName CLASS = NewProperty>Contents...</TagName>
</body>
</html> |
|
[Description] |
|
-> 태그 이름(TagName)은 사용자가 임의로 지정할 수 없으며 반드시 HTML에서 사용중인 태그를 선택해야 한다.
-> 새로운 속성(NewProperty)는 사용자가 임의대로 지정할 수 있다.
-> 선택적인 클래스의 사용을 위해서는 본문(<body>태그 내)에서 CLASS라는 키워드(Keyword)를 이용하면 된다. |
2. 실전예제
|
[Source] |
[Description] |
|
<html>
<head>
<style type="text/css" >
<!--
h1.BLUE {
font-size : 9pt;
font-weight : normal;
color : blue;
}
h1.RED {
font-size : 9pt;
font-weight : normal;
color : red;
}
-->
</style>
</head>
<body>
<h1 CLASS = BLUE> 클래스로 속성을 정의하여 h1의 글자색을 파랑으로 지정</h1>
<h1 CLASS = RED> 클래스로 속성을 정의하여 h1의 글자색을 빨강으로 지정</h1>
</body>
</html> |
-> h1은 태그이름, BLUE는 새로운 속성 즉, 클래스 이름이다. (대소문자 구분 하지 않는다. 단순히 클래스 이름를 잘 보이게 하기 위함.)
-> BLUE 클래스의 글자색 속성을 파랑으로 지정
->h1은 태그이름, RED는 새로운 속성
-> RED 클래스의 글자색 속성을 빨강으로 지정
-> 같은 h1 태그를 사용했지만 클래스 속성을 파랑으로 지정하여 다른 효과. 선택적 사용가능.
-> 같은 h1 태그를 사용했지만 클래스 속성을 빨강으로 지정, 선택적으로 사용가능.
|
|
[Result] |
|
|
☞ 잠깐만여! 강좌는 푹~ 퍼가지 마시고 링크만 걸어주세요~
작성자 : 웹제작 토탈 커뮤니티 (http://www.webmadang.net) 컴쟁이 | 
컴쟁이