날짜: 1996-06-06 | 글쓴이: 도아 | 12716 번 | 프린트 | 메일로보내기

제 6강 - HTML과의 연결


이 페이지에 포함된 정보는 W3C HTML and Style Sheets Working Draft 를 기초로 작성되었습니다. 이 문서는 작업중인 문서이므로 여기에 포함된 정보는 아무때나 변경될 수 있습니다. 논의된 방법을 지원하는 브로우저는 많지 않습니다.

Style Sheet와 HTML을 연결시키는 많은 방법이 존재하며, 각각 장점과 단점을 가지고 있다. 새로운 HTML 태그와 속성이 Style Sheet를 HTML 문서에 쉽게 병합할 수 있도록 도입되었다.


외부 Style Sheet과의 연결

외부 style sheet은 HTML의 LINK 태그를 통해 HTML 문서와 연결될 수 있다. <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen> <LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print"> <LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print"> <LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural>

<LINK> 태그는 HTML 문서에서 HEAD 사이에 두어야 한다. 옵션인 TYPE 속성은 MIME 형식--CSS의 경우 text/css--을 지정하는데 사용되며, 브로우저가 지원하지 못하는 Style Sheet 형식은 무시할 수 있도록 해준다. 옵션인 MEDIA 속성은 Style Sheet가 적용되어야하는 매체를 지정한다. 가능한 값은 다음과 같다.

  • print, 프린터 출력인 경우
  • screen, 화면 출력인 경우
  • projection, 프로젝터 출력인 경우
  • braille, 점자출력 장치로 출력하는 경우
  • aural, 음성 출력인 경우
  • all, 모든 매체를 통한 출력인 경우(내정치)

여러 매체를 지정할 때에는 각 매체를 쉼표로 분리하거나 all을 사용한다

REL 속성은 HTML문서와 연결된 파일사이의 관계를 정의하는데 사용된다. REL=StyleSheet영구적인 스타일이나 내정된 스타일을 지정하는 반면 REL="Alternate StyleSheet"보조 스타일을 지정한다. 의 첫번째 <LINK>에서 처럼 TITLE 속성이 없는 경우 영구적인 스타일로 정의된다.

내정된 스타일은 에서 두번째 <LINK>에서처럼 자동적으로 적용되는 스타일이다. REL=StyleSheetTITLE를 함께 사용해서 내정된 스타일을 지정한다.

보조 스타일은 REL="Alternate StyleSheet"를 이용해서 지정한다. 에서 세번째 <LINK> 태그는 보조 스타일을 지정한다. 보조 스타일은 사용자가 내정된 스타일을 대치하기위해 선택할 수 있다.

또한 하나의 스타일이 여러 Style Sheet를 통해 주어질 수도 있다. <LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary"> <LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary"> <LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary">

이 예에서 세개의 Style-Sheet가 내정된 스타일로서 적용될 하나의 "Contemporary"로 결합된다. 여러개의 Style Sheet를 하나의 스타일로 결합하기위해, 각각의 Style Sheet에 동일한 TITLE을 사용해야 한다.

외부 Style Sheet는 스타일이 많은 페이지에 적용될 때 이상적이다. 외부 스타일 쉬트로 저자는 간단히 한 파일을 변경함으로서 전 사이트의 외관을 변경할 수 있다. 뿐만아니라 대부분의 브로우저는 외부 스타일 쉬트를 캐쉬에 보관하므로 일단 스타일 쉬트가 캐쉬에 보관되면 페이지를 표시하는데 발생하는 지연을 피할 수 있다.

Microsoft Internet Explorer  3 은 외부 스타일 쉬트에서 배경 그림을 지원하지 않는다. 이러한 버그가 있으므로 저자는 배경그림을 사용하기위해 끼워넣기(embedding)인라인(inlining) 스타일 또는 BODY 태그의 BACKGROUND 속성과 같은 다른 방법을 사용할 것을 권고한다.


Style Sheet 끼워넣기(Embedding a Style Sheet)

Style Sheet는 STYLE 태그로 문서 내에 끼워넣을 수 있다. <STYLE TYPE="text/css" MEDIA=screen> <!-- BODY { background: url(foo.gif) red; color: black } P EM { background: yellow; color: black } .note { margin-left: 5em; margin-right: 5em } --> </STYLE>

STYLE 태그는 문서내에서 HEAD 태그사이에 와야 한다. 옵션인 TYPE 속성은 LINK 태그에서와 같은 기능으로 MIME 형식을 지정하는데 사용된다. 따라서 유사하게 TITLEMEDIA 속성 또한 STYLE 태그내에서 지정될 수 있다.

STYLE 태그를 인식하지 못하는 오래된 브로우저의 경우 STYLE 태그가 BODY 태그 사이에 온다면 STYLE 태그의 내용을 보여주게 되며 결과적으로 Style Sheet를 사용자가 보게된다. 이것을 막기위해 STYLE 태그의 내용은 위의 예에서 처럼 SGML 주석(<!-- comment -->)에 포함시켜야 한다.

Style Sheet 끼워넣기는 하나의 문서가 유일한 스타일을 가질때 사용된다. 동일한 Style Sheet가 여러 문서에서 사용된다면, 그때 외부 style sheet를 사용하는 것이 적당하다.


스타일 쉬트 가져오기(Importing a Style Sheet)

Style Sheet는 CSS의 @import 문으로 불러올 수 있다. @import 문은 CSS 파일이나 STYLE 태그 내에서 사용된다. <STYLE TYPE="text/css" MEDIA="screen, projection"> <!-- @import url(http://www.htmlhelp.com/style.css); @import url(/stylesheets/punk.css); DT { background: yellow; color: black } --> </STYLE>

다른 CSS 규칙이 STYLE 태그내에 포함될 수 있지만 @import 문은 Style Sheet의 시작부에 있어야 한다는 것에 주의하기 바란다. Style Sheet내에 지정된 임의의 규칙은 불러온 스타일 쉬트내의 동일한 규칙보다 우선한다. 예를들어 불러온 스타일 쉬트중 하나가 DT { background: aqua }를 포함할지라도 DT 태그는 노란 배경색을 갖는다.

Style Sheet을 불러오는 순서는 이들을 어떻게 종속시킬 것인가를 결정하는데 중요하다. 위의 예에서 style.cssSTRONG 태그를 적색으로 보여지도록 지정하고 있고 punk.cssSTRONG 태그를 노란색으로 보여지도록 지정하고 있다면 나중에 불러온 규칙의 우선순위가 높으므로 STRONG 태그는 노란색으로 보여질 것이다.

불러온 스타일 쉬트는 스타일 쉬트를 모듈화할 때 유용하다. 예를들어 어떤 사이트는 사용된 선택자에의해 스타일 쉬트를 분리한다. BODY, P, H1, H2와 같은 기본적인 태그에대한 규칙을 정의한 simple.css있고, CODE, BLOCKQUOTE, DFN과 같이 추가적인 태그를 정의한 extra.css라는 스타일 쉬트가 있다. 또한 table 태그에대한 규칙을 정의하는데 사용될 table.css라는 스타일 쉬트가 있다. 이들 세개의 스타일 쉬트는 @import 문으로 필요시 HTML 문서내에 포함시킬 수 있다. 이 세개의 스타일은 LINK 태그를 통해 결합될 수도 있다.


스타일의 즉시처리(Inlining Style)

스타일은 STYLE 속성을 사용해서 즉시 처리될 수 있다. STYLE 속성은 임의의 BODY 태그(BODY 태그 자신을 포함해서)에 적용될 수 있다. 이 속성은 속성 값으로서 임의 갯수의 CSS 선언을 취한다. 여기서 각각의 선언은 세미콘론에의해 분리된다. 예는 다음과 같다. <P STYLE="color: red; font-family: 'New Century Schoolbook', serif"> New Century Schoolbook 글꼴을 사용할 수 있다면 이 문단은 적색의 New Century Schoolbook 글꼴로 표시된다.</P>

큰 따옴표는 스타일을 선언하는데 사용되므로 STYLE 속성내에서 New Century Schoolbook를 인용하는데 작은 따옴표를 사용하였다.

스타일의 즉시 처리는 프리젠테이션과 문장을 혼합해서 사용함으로서 스타일 쉬트의 많은 장점을 잃는다. 이 방법은 어떤 스타일이 어떤 태그에 한 번만 적용되는 경우처럼 드물게 사용해야 한다.


CLASS 속성

CLASS 속성은 특정 태그에 속한 스타일 크래스를 지정하는데 사용된다. 예를들어 다음의 스타일 쉬트는 punkwarning 이라는 크래스를 생성하게된다.

.punk     { color: lime; background: #ff80c0 }
P.warning { font-weight: bolder; color: red }

이들 크레스는 CLASS 속성으로 HTML 내에서 참조될 수 있다. <H1 CLASS=punk>독자적인 기능확장</H1> <P CLASS=warning>많은 독자적인 기능확장은 이 것을 지원하는 브로우저이든 그렇지 못한 브로우저이든 부정적인 효과를 가질 수 있다.

이 예에서 punk 크래스는 스타일 쉬트내에 punk 크래스와 연관된 HTML 태그를 가지고 있지 않으므로 임의의 BODY 태그에 적용될 수 있다. 위에서 주어진 스타일 쉬트를 사용한다면 warning 크래스는 단지 P 태그에만 적용될 수 있다.

크래스의 외관이 아니리 기능에따라 크래스의 이름을 붙이는 것은 좋은 습관이다. 위의 예에서 warning 크래스는 red라고 이름 붙일 수도 있지만 이러한 이름은, 크래스의 스타일을 다른 색으로 변경하거나 음성인식에 사용하기위해 음성 스트일을 정의하길 원하는 경우, 의미가 없어진다.

크래스는 HTML 문서내에 구조적으로 동일한 부분에대해 서로 다른 스타일을 적용하는 가장 효과적인 방법이다. 예를들어 이 페이지는 CSS 코드와 HTML 코드에대해 서로다른 스타일을 주는 크래스를 사용하고 있다.


ID 속성

ID 속성은 어떤 태그에대해 독특한 스타일을 정의하는데 사용된다.

#wdg97 { font-size: large }

과 같은 CSS 규칙은 ID 속성을 통해 HTML 내에 적용될 수 있다. <P ID=wdg97>DoA의 놀터에 온걸 환영한다 !!!</P>

각각의 ID 속성은 해당 문서를 통해 유일한 값을 가져야한다. 이 값은 초기 문자뒤에 문자, 숫자, 하이픈, 마침표등이 이어져야 한다. 문자는 A-Z와 a-z까지로 제한된다.

스타일을 적용하기위해 ID를 사용하는 것은 바람직하지 못하다. 왜냐하면 이 스타일은 문서내에서 한번만 적용되기 때문이다.


SPAN 태그

SPAN 태그는 저자가 첨부할 수 없는 스타일을 구조적 HTML 태그에 부여할 수 있도하기위해 HTML에 도입되었다. SPAN은 스타일 쉬트내에서 선택자로서 사용될 수 있으며, STYLE, CLASS, ID 속성을 허용한다.

SPAN평문 태그(text-level element)이므로 HTML 내에서 EM, STRONG과 같은 태그로서 사용된다. EM, STRONG 태그와의 주된 차이점은 EM, STRONG 태그가 구조적 의미를 가지고 있는 반명에 SPAN는 그러한 의미를 가지고 있지 않다. 이것은 순전히 스타일을 적용하기위해서 존재하며 따라서 스타일 쉬트를 사용할 수 없을 때에는 아무런 효과를 갖지 못한다.

SPAN의 간단한 예는 다음과 같다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Experimental 19960712//EN"> <HTML> <HEAD> <TITLE>Example of SPAN</TITLE> <STYLE TYPE="text/css" MEDIA="screen, print, projection"> <!-- .firstwords { font-variant: small-caps }--> </STYLE> </HEAD> <BODY> <P>문단의 <SPAN CLASS=firstwords>첫 몇단어</SPAN>는 작은 대문자일수 있다. 스타일은 <SPAN STYLE="font-family: Arial">Arial</SPAN> 와 같이 단어의 스타일로 변경하기위해 인라인될 수 있다.</P>


DIV 태그

DIV 태그는 기능적으로 SPAN 태그와 유사하며, 주된 차이는 DIV ( "division"의 축약어) 태그는 블럭태그라는 점이다. DIV 태그는 문단, 제목, 표, 심지어 다른 DIV 태그로 포함할 수 있다. 이러한 특징으로 장, 요약, 각주, 노트와 같은 서로 다른 컨테이너를 만드는 경우 DIV 태그가 아주 이상적이다. <DIV CLASS=note> <H1>Divisions</H1> <P>이 DIV 태그는 HTML 3.2에서 정의되었지만 HTML 3.2에서는 단지 ALIGN 속성만이 허용된다. HTML, Cougar의 다음 버전은 다른 것중에서 CLASS, STYLE, ID 속성을 추가할 것이다.</P> <P>DIV 태그는 다른 블럭 태그를 포함하므로 DIV 태그는 이 노트와 같이 많은 내용을 갖는 부분을 생성하는데 유용하다. <P>이 태그는 닫아주어야 한다.</P> </DIV>


타당성에대한 노트

몇몇 CSS 형식 문서들만이 HTML 3.2 (Wilbur) 수준에서 유효할 것이다. HTML 3.2는 SPAN 태그를 정의하지 않고 있으며 CLASS, STYLE, ID 속성을 정의하지 않고 있다. 심지어는 LINKSTYLE 태그에대한 TYPEMEDIA 속성의 지원도 미약하다.

이러한 스타일과 연관된 태그와 속성이 CSS를 지원하지 못하는 브로우저에 유해한 것은 아니다(단 브로우저가 확실히 CSS를 무시할 수 있어야 한다). 이러한 태그와 속성을 사용하는 문서들은 Cougar DTD 의 경우에는 유효하다. 많은 웹 페이지의 타당성을 검사하는 웹 페이지 검사기(validators)들이 Cougar를 지원하지 않는 반면 WebTechs Validation Service 는 이를 지원한다.

MEDIA 속성은 Cougar에 최근 추가되었지만 WebTechs에의해 사용되는 Cougar DTD에서는 아직 반영하지 못하고 있다.



다음글: 제 7강 - 스타일 쉬트의 의존성 (7252)1996-06-07
이전글: 제 5강 - CSS의 특성 (12181)1996-06-05

세상사는 이야기

  • 컴퓨터를 IPTV로 2, po >
  • 컴퓨터를 IPTV로 만들 >
  • Warning.or.kr도 우회 >
  • 한국의 100대 부자, 어 >
  • 세상을 바꾼 크롬: 크 >
  • 장난(?)으로 시작한 여 >
  • 탈옥의 필수, QuickDo >
  • 윈도 10, 한영 전환도 >
  • 바보도 할 수 있는 War >
  • 북마크에도 확장 아이 >


  • RSS 구독 (익명 | 회원 | 강좌 | 포럼)
    (C) 1996 ~ 2017 QAOS.com All rights reserved.