3. CSS 그룹핑


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의 요소에 적용시킬 수 있다.

    현재 페이지의 CSS   현재 보고있는 사이트에 대한 Font의 CSS 파일은 다음에 있다. (text파일이므로 브라우저 열릴것이다.)

         Font Css.txt

- Last Update : 2001.6.29 by Deadfire(http://www.deadfire.net)

DHTML 강좌
DHTML이란?
CSS
     - CSS정의방법
     - 적용우선순위
     - 텍스트관련속성
     - 텍스트간의설정
     - 여백 지정하기
     - 테두리지정하기
     - 색상 지정하기
     - 기 타
CSS그룹핑
     - 스타일시트그룹
     - 클래스
     - 사용자지정스타일
JSSS
     - 새로추가된JSSS객체
     - JSSS와CSS간의비교
Layer
     - Layer Tag의사용
     - Layer 세부사항
     - Explorer용Layer
Javascript와연동
동적인 변화
     - 텍스트/이미지변환
     - 위치 이동
동적 테이블
     - 동적테이블생성
     - 동적테이블정렬
기 타
     - Font Download
     - Filter
마치며

Copyright ⓒ 1997 ~, Deadfire Program Master