|
클래스(CLASS)로 속성을 정의하는 방법은 특정 태그에 대해서만 새로운 속성을
설정하는 방식이었다. 이번에는 클래스(CLASS)로 속성을 정의하는 방법의 하나로 다른 태그에서도 새로운 속성을 지정하는 방식에
대해 알아보기로 한다. |
1. 스타일 시트(CSS)의 *(all)을 이용한 새로운 클래스 속성 정의하기
[Form] |
<html>
<head>
<style type="text/css" >
<!--
*.NewProperty {Property 1: Value 1; Property 2: Value
2; …… Property N: Value N;}
-->
TagName {Property 1: Value 1; Property 2: Value
2; …… Property N: Value N;}
</style>
</head>
<body>
<TagName CLASS = NewProperty>Contents...</TagName>
</body>
</html> |
[Description] |
-> *(all)은
특정 태그 이름을 대신하는 일종의 키워드(Keyword)로 새로운 속성의 클래스를 지정할 수 있도록 해준다. *(all)과
NewProperty 사이에는 마침표(.)가 반드시 붙는다. (* 생략가능) |
2. 실전예제
[Source] |
[Description] |
<html>
<head>
<style type="text/css" >
<!--
.BLUE {
color : blue;
}
.RED {
color : red;
}
h1, h2, h3 {
font-size : 9pt;
font-weight : normal;
color : green;
}
-->
</style>
</head>
<body>
<h1>h1 태그에 클래스를 지정하지 않은 경우 초록색으로 출력됨</h1>
<h2>h1 태그에 클래스를 지정하지 않은 경우 초록색으로 출력됨</h2>
<h3>h1 태그에 클래스를 지정하지 않은 경우 초록색으로 출력됨</h3>
<h2 CLASS = BLUE>h2 태그에 클래스 속성을 BLUE로 정의하면 글자색은 파랑</h2>
<h3 CLASS = RED>h3 태그에 클래스 속성을 RED로 정의하면 글자색은 빨강</h3>
<em CLASS = RED>em 태그에 클래스 속성을 RED로 정용(빨강에 기울임꼴) </em>
</body>
</html> |
-> 특정 태그가 아닌 해당페이지의 모든 태그에 BLUE 속성 적용 가능
-> 특정 태그가 아닌 해당페이지의 모든 태그에 RED 속성 적용 가능
-> 클래스 지정 없이 h1, h2, h3 태그만 사용시 초록색으로 출력됨. h1, h2, h3와 같이 속성이 같을
경우 매번 따로 지정할 필요 없이 컴마(,)로 여러개의 태그를 나열하면 편리하다.
-> h1, h2, h3 결과 모두 동일
->
h2 태그내에 BLUE라는 클래스를 사용하였으므로 파랑으로 출력
->
h3 태그내에 RED라는 클래스를 사용하였으므로 빨강으로 출력
-> em 태그내 RED라는 클래스의 사용으로 글자색은 빨강이고 em의 원래 속성인 기울임꼴 적용, em은 스타일 시트에서 정의하지
않은 태그이지만 RED라는 클래스에 영향을 받는다. 왜냐하면 RED, BLUE는 해당페이지의 모든 태그에 적용할 수 있도록 .(all)이라는
키워드로 정의 되었기 때문이다.
|
[Result] |
|
☞ 잠깐만여! 강좌는 푹~ 퍼가지 마시고 링크만 걸어주세요~
작성자 : 웹제작 토탈 커뮤니티 (http://www.webmadang.net) 컴쟁이 |
컴쟁이