3.1 스타일 시트 그룹
여러 속성들이 존재하지만, 각 Tag마다 그러한 속성을 일일이 지정하기가 쉽지 않다. 이렇때,
동일한 속성을 그룹으로 한꺼번에 지정할 수가 있다. 물론, 그외의 개별속성은 별도로 지정하면 된다.
예)
H1, H2, H3 {font-family: arial; color: #FFFFFF}
H1 {font-size: 100pt}
H2 {font-size: 80pt}
H3 {font-size: 50pt}
BODY의 경우 지정할 수 있는 많은 속성들이 있는데, 다음과 같이 사용하는 것도 가능하다.
예)
BODY { font: bold 12pt/14pt arial, san-serif}
: font-size가 12pt이고, line-height가 14pt이다.
BODY { margin: .10in .75in .75in}
: top 여백 .10, right, left순이다.
background속성을 묶어서 지정하면,
예)
P {background: black url(go.gif) repeat-y fixed right top}
3.2 클래스
쉽게 말하자면 P라는 Tag에 좌로 정렬하게 하고 동시에 다른 부분에서는 우로 정럴하게
하고 싶은 경우에 좋은 방법이다. 예를 보면 쉽게 알 수 있다.
예)
P.left {font-family: garamond; text-align: left}
P.right {font-family: garamond; text-align: right}
사용방법)
<P class="left">왼쪽으로 정렬된다.</P>
<P class="right">오른쪽으로 정렬된다.</P>
이렇게 해서 STYLE Tag안에 들어가는 모든 속성들과 그의 사용법을 배웠다.
한꺼번에 너무많은 것을 배워서 정신없을 것이니, 차근차근 다시 읽어보고 실습해보라.
실습이 가장큰 스승이다!
참, 다시한번 말하지만 STYLE에 대해 반응할 수 있는 브라우저는 네비게이터 4.0이상과
익스플로러 4.0이상임을 상기하자.
3.3 사용자 지정 스타일
위에서는 CLASS나 그룹을 통해서 이미 존재하는 Tag들에 대해서만 Style을 지정했다.
그러나, 사용자가 별도의 Style을 정의하고 이를 이용하여 HTML문서를 구성할 수도 있다.
<STYLE>
.deadfire
{
FONT: 12pt 굴림;
FONT-WEIGHT: bold;
COLOR: #333333
}
</STYLE>
<SPAN CLASS="deadfire">클래스 </SPAN>s
|
* 위와 같이 .title로 존재하지 않는 Tag에 대한 스타일을 정의하고, CLASS속성을 이용하여,
HTML의 요소에 적용시킬 수 있다.
- Last Update : 2001.6.29 by Deadfire(http://www.deadfire.net)
|
DHTML이란?
CSS그룹핑