W3C7 HTML 문서의 공통 구조Trio 홈페이지
이전순서 다음순서 목록 엘레멘트 애트리뷰트 색인 원문연결
목차
  1. HTML 문서의 구조 설명
  2. HTML 버전 정보
  3. HTML 엘레멘트
  4. 문서 머리글(head)
    1. HEAD 엘레멘트
    2. TITLE 엘레멘트
    3. title 애트리뷰트
    4. 메타데아터(meta data)
  5. 문서 본체(body)
    1. BODY 엘레멘트
    2. 엘레멘트 지정자: id, class 애트리뷰트
    3. 블럭레벨(block-level)과 인라인(inline) 엘레멘트
    4. 구룹 엘레멘트: DIV, SPAN 엘레멘트
    5. 헤딩(heading): H1, H2, H3, H4, H5, H6 엘레멘트
    6. ADDRESS 엘레멘트

7.1 HTML 문서의 구조 설명

HTML 4.0 문서는 다음의 3 부분으로 구성되어있다.

  1. HTML 버전 정보 줄,
  2. 머리글 선언 (HEAD 엘레멘트),
  3. 실제적인 문서의 내용을 갖는 본체(body)로 BODY 또는 FRAMESET 엘레멘트에 설명.

공간(공간 글자, 새 줄, 탭과 코멘트)는 각 항목 앞, 뒤에 올 수 있다. 항목 2와 3은 HTML 엘레멘트에 정의 됨.

간단한 HTML 문서의 예제:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
  "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
  <HEAD>
     <TITLE>나의 첫 HTML 문서</TITLE>
  </HEAD>
  <BODY>
     <P>여러분 안녕하세요 !
  </BODY>
</HTML>

7.2 HTML 버전 정보

HTML 문서에는 그 문서에 사용한 HTML의 버전 정보가 기재 되어있다. 문서 타입 선언은 그 문서의 문서 타입 정의 (DTD)의 이름으로 표시한다[ISO8879 참조).

HTML 4.0은 세 가지 DTD를 정의하므로 제작자는 다음 문서 타입 선언들 중 하나를 문서에 포함 시켜야한다. DTD들는 그들이 지원하는 엘레메트에 따라 다르다.

각 문서 타입 선언의 URI는 DTD와 필요한 엔티티(entity) 세트를 사용도구가 다운로드 할 수 있도록 하였다. 다음의 URI들은 W3C가 지원하는 HTML 4.0를 위한 DTD들과 엔티티 세트를 참조한다.

공통적 지정자(public identifier)와 화일들 사이의 결합을 위하여 SGML 개방 콘소시움(SGML Open Consortium: [SGMLOPEN] 참조]의 추천 양식에 따라 카타로그(catalog) 화일를 사용한다. HTML 4.0 카타로그 화일 예제은 SGML 참조 정보 시작 부분에 포함시킨다. 제일 뒤 두자는 DTD의 언어를 나타 내는데, HTML에서 항상 영어 ("EN")이다.

7.3 HTML 엘레멘트

<!ENTITY % html.content "HEAD, BODY">

<!ELEMENT HTML O O (%html.content;)    -- 문서 기초(root) 엘레멘트 -->
<!ATTLIST HTML
 %i18n;                               -- 언어(lang), 글자 방향(dir) --
>

시작태그: 선택적, 종료태그: 선택적

애트리뷰트의 정의

version = cdata [대소문자 중립: CN]
불량한 것이다. 이 애트리뷰트의 값은 어떤 HTML DTD 버전이 현재의 문서를 지배하는가를 나타낸다. 이 애트리뷰트는 문서 타입 정의에 제시 된 버전 정보를 따를 필요가 없으므로 불량한 것으로 되었다.
다른 곳에서 정의 된 애트리뷰트

문서 타입 정의 다음 나머지 HTML 문서에는 HTML 엘레멘트를 갖는다.

그래서 전형적인 HTML 문서는 다음 구조를 갖는다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
    "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
 ... head, body, 등이 이곳에 온다...
</HTML>

7.4 문서 머리글(head)

7.4.1 머리글(HEAD) 엘레멘트

<!-- %head.misc; 앞에서 "SCRIPT | STYLE | META | LINK | OBJECT"에 정의 -->

<!ENTITY % head.content "TITLE & BASE?">
<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- 문서의 머리글 -->
<!ATTLIST HEAD
 %i18n;                    -- lang(언어), dir(글자 방향) --
 profile  %URI;  #IMPLIED  -- 메디아 정보의 명명 된 사전 --
>

시작태그: 선택적, 종료태그: 선택적

애트리뷰트의 정의

profile = uri [대소문자 타입 참조: CT]
이 애트리뷰트는 하나 혹은 복수의 메타데이터 프로화일(profile)의 위치를 나타 내며 공간으로 분리된다. 이 규격에서는 첫번째 URI 만이 중요한 의미를 가짐에도 불구하고, 사용도구는 추가적인 사항도 그 값을 목록으로 해석한다. 프로화일(Profile)은 아래 메타데이터(meta data)에서 다룬다.
다른 곳에서 정의 된 애트리뷰트

HEAD 엘레멘트에는 제목, 검색 엔진에서 사용 할 키워드, 문서의 내용이 아닌 기타 정보등 현재 문서에 대 한 정보를 포함한다. 사용도구는 일반적으로 HEAD에 있는 정보를 그 문서의 내용으로 해석하지 않으나, HEAD에 포함 된 정보로 부터 다른 기능을 통 해 사용자가 이용 할 수 있게 한다.

7.4.2 제목(TITLE) 엘레멘트

<!-- TITLE(제목) 엘레멘트는 텍스트 흐름의 부분이 아니다.
      이 것은 페이지의 헤더나 창의 이름을 표시하여야 한다.
      각 문서는 꼭 한개의 제목을 필요로한다.
  -->
<!ELEMENT TITLE - - (#PCDATA) -(%head.misc;) -- 문서 제목 -->
<!ATTLIST TITLE %i18n>

시작태그: 필요 함, 종료태그: 필요 함

다른 곳에서 정의 된 애트리뷰트

각 HTML 문서는 HEAD 항목 안에 반드시 하나의 TITLE 엘레멘트를 가져야한다.

제작자는 TITLE 엘레멘트를 그 문서의 내용을 표현하는데 사용하여야 한다. 자주 사용자는 문서를 내용을 보지 않고 조회하므로, 제작자는 내용을 잘 표현하는 제목을 제공하여야 한다. 내용을 잘 표현하지 못하는 "소개"와 같은 제목을 사용하지 말고 "xxx 회사 서비스 소개"와 같은 제목을 사용하여야 한다.

접속성 이유 때문에, 사용도구는 사용자를 위하여 항상 TITLE 엘레멘트(프레임을 지정한 문서에서는 TITLE 엘레멘트를 포함하여)를 사용하여야 한다. 이렇게 하는 기능 사용도구(예: caption, spoken 등)에 따라 다르다.

제목은 글자 엔티티(강조 된 글자, 특수 글자, 등)를 포함 할 수 있으나, 다른 작성어(markup)는 포함 할 수는 없다.

제목의 예제을 보면:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
  "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>인구 변동에 대 한 연구</TITLE>
 ... 다른 head 엘레멘트들...
</HEAD>
<BODY>
 ... 문서 body 부분...
</BODY>
</HTML>

7.4.3 제목(title) 애트리뷰트

애트리뷰트의 정의

title = text [대소문자 구별: CS]
이 애트리뷰트는 그 설정 엘레멘트에 대 한 참고(advisory) 정보를 제공한다.

TITLE 엘레멘트는 전체 문서에 대한 정보를 제공며 단 한 번 만 나타 낼 수 있는데 반해, title 애트리뷰트는 몇 번이라도 엘레멘트(element)를 나타 날 수 있다. 애트리뷰트가 이 기능을 지원하는지 확인하기 위해서는 각 엘레멘트의 정의를 참조하라.

title 애트리뷰트 값은 사용도구에 따라 다르게 해석 될 수 있다. 예를 들어 보는(visual) 브라우저에서는 자주 마우스가 어떤 오브젝트 위에 위치 할 때 브라우저 도구 상에 제목을 보여준다. 제목 정보를 오디오(Audio) 사용도구에서도 같은 방식으로 소리로 표현 할 수 있다. 예를 들면 link 애트리뷰트가 설정되면, 사용도구(visual과 non-visual)는 사용자에게 연결 된 자원의 특성을 알려 준다.

 ... 문장 ...
여기에 <A href="http://someplace.com/neatstuff.gif" title="나의 스쿠버 다이빙">
  전번 여름 나의 수쿠버 다이빙</A> 사진이 있다.
 ... 문장 ...

외부 스타일쉬트를 지정하는 LINK 엘레멘트와 동시에 사용되면 title 애트리뷰트는 추가적인 역할을 한다. 세부사항은 연결과 스타일쉬트 항목을 참조하라.

주기: 표준 기술에 의해서는 빈약한 성능을 내는 음성 합성 품질을 개선하기 위하여 HTML의 향후 버전에서는 음소(phonemic)과 운율(prosodic) 정보의 엔코딩 애트리뷰트가 포함 될 것이다.

7.4.4 메타 데이터(Meta data)

이 규격이 작성되는 동안 제작자에게 HTML 문서에 더 풍부하게 기계가 읽을 수 있는 정보와 다른 네트워그(network)에 접속 할 수 있는 자원들의 지정을 허용하기 위한 작업이 진행 되었다. W3C의 자원 표시 언어(RDF: Resource Description Language)는 메타데이터를 위한 일반적인 틀로 개발되고 있다.

HTML은 제작자가 문서의 내용이 아닌 문서에 대한 정보를 여러가지 방법으로 지정하는 메타데이터(meta data)를 사용하게 하였다.

예를 들어, 문서의 제작자를 표시하는데 다음과 같이 META 엘레멘트를 사용한다.

<META name="Author " content="Dave Raggett">

META 엘레멘트는 특성(property)과 값을 갖는다. 예제에서 특성은 "Author", 값은 "Dave Raggett"이다.

이 규격에서는 메타데이터의 유효한 특성들을 정의하지 않았다. 특성과 유효한 값들의 의미는 프로화일(profile)의 해당되는 특성에 정의 되어있다. 예를 들어, 검색 엔진에 도움을 주기 위한 색인 문서에 "author"(제작자), "copyright"(저작권), "keywords"(키워드), 등이 정의 되어있다.

메타데이터의 설정

일반적으로 메타데이터의 설정은 두 단계로 된다.

  1. 특성(property)과 그 특성의 값을 선언. 이 것은 두 가지 방법이 될 수 있다.
    1. 문서 안에서 META 엘레멘트로,
    2. 외부 문서에서 LINK 엘레멘트로 메타데이터에 연결시켜(연결 타입 참조).
  2. 특성과 유효한 값이 정의 되어있는 프로화일(profile)를 조회 함으로서.
    프로화일을 지정하기 위해서는 HEAD 엘레멘트에서 profile(프로화일) 애트리뷰트 사용한다.

프로화일은 HEAD 엘레멘트를 정의하므로, 같은 프로화일이 문서 헤드의 모든 META와 LINK 엘레멘트에 적용 됨에 주의하라.

사용도구는 메타데이터 지원 기능을 필요로 하지응 않는다. 메타데이터를 지원하는 사용도구의 경우, 이 규격은 메타데이터를 어떻게 처리할 것인가를 지정하고 있지 않다.

META 엘레멘트

<!ELEMENT META - O EMPTY               -- 특유의 메타 정보 -->
<!ATTLIST META
 %i18n;			-- lang(언어 정보), dir(글자 방향), 내용과 함게 사용 --
 http-equiv  NAME           #IMPLIED  -- HTTP 반응 헤더 이름  --
 name        NAME           #IMPLIED  -- 메타 정보 이름 --
 content     CDATA          #REQUIRED -- 관련 정보 --
 scheme      CDATA          #IMPLIED  -- 내용의 폼 선택 방식 --
>

시작태그: 필요 함, 종료태그: 사용 금지

애트리뷰트의 정의

다음 애트리뷰트들에 허용 된 값과 그 해석은 프로화일(profile)에 따른다.

name = name [대소문자 구별: CS]
이 애트리뷰트의 특성 이름을 나타 냄. 이 규격은 이 애트리뷰트의 유효한 값을 정의하지 않음.
content = cdata [대소문자 구별: CS]
이 애트리뷰트는 특성의 값을 나타 냄. 이 규격은 이 애트리뷰트의 유효한 값을 정의하지 않음.
scheme = cdata [대소문자 구별: CS]
이 애트리뷰트는 특성 값을 해석하는데 사용 할 방식의 이름을 나타 냄(프로화일 세부 참조).
http-equiv = name [대소문자 구별 없이: CI]
이 애트리뷰트는 name 애트리뷰트의 자리에 사용 될 수 있슴. HTTP 서버들은 HTTP 반응 메세지 헤더의 정보를 수집하기 위하여 이 애트리뷰트를 사용한다.
다른 곳에서 정의 된 애트리뷰트

META 엘레멘트는 문서의 특성들을 지정(예: 제작자 , 만기일, 키워드 목록, 등)하기 위하여 또는 이 특성들의 값을 지정하기 위하여 사용 할 수 있다. 이 규격에는 특성 정의를 포함하지 않았다.

각 META 엘레멘트는 특성과 값의 짝으로 명시된다.

name 애트리뷰트는 특성을 지정하고 content 애트리뷰트는 그 특성의 값을 지정한다.

제작자 특성 값을 지정하는 예:

<META name="author" content="Dave Raggett">

META에서 content 애트리뷰트의 값에 언어를 지정하기 위하여 lang(언어) 애트리뷰트를 사용 할 수 있다. 이는 음성 합성기가 언어에 따라 적용되는 발음을 채용 할 수 있도록 해 준다.

제작자의 이름이 불어로 표시 된 예:

<META name="author" lang="fr" content="Arnaud Le Hors">

주기: META 엘레멘트는 메타데이터를 나타내는 기능이지만, 일부 HTML 엘레멘트들과 애트리뷰트는 이미 어떤 메타데이터의 부분을 처리 할 수 있어 META를 사용하는 대신에, 제작자에 의해 사용 될 수 있는데 이것들은: TITLE 엘레멘트, ADDRESS 엘레멘트, INS와 DEL 엘레멘트, title 애트리뷰트와 cite 애트리뷰트 등이다.

주기: META 엘레멘트에 지정 된 특성의 값에 URI을 지정하면, 일부 제작자는 LINK 엘레멘트를 통해 메타데이터를 지정하는데, 다음 예와 같이된다.

<META name="DC.identifier"
     content="ftp://ds.internic.net/rfc/rfc1866.txt">

이렇게도 쓸 수 있다.

<LINK rel="DC.identifier"          type="text/plain"
        href="ftp://ds.internic.net/rfc/rfc1866.txt">
META와 HTTP 헤더(header)

http-equiv 애트리뷰트는 name 애트리뷰트 위치에 사용 할 수 있고 문서가 HTTP(Hypertext Transfer Protocol)을 통하여 열려 질 때 특별 한 의미를 갖는다. HTTP 서버들은 HTTP 통신을 위한 [RFC822]-style 헤더를 발생시키기 위해, http-equiv 애트리뷰트로 지정 된 특성 이름을 가질 수 있다. 유효 한 HTTP 헤더의 세부사항은 HTTP 규격[RFC2068 참조]

META 선언 예제:

<META http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">

HTTP 헤더는의 결과:

Expires: Tue, 20 Aug 1996 14:25:27 GMT

이는 언제 새로운 관련 문서를 가져 올 것인가를 결정하는 카체(cache)에 사용 될 수 있다.

일부 사용도구는선택 사항을 URI에 따라 바꾸는 것을 포함하여, 몇 초 후에 현재 페이지를 새롭게 읽을 것인가 하는 META의 사용을 지원한다.

<META http-equiv="refresh" content="3,http://www.acme.com/intro.html">

내용(content)은 몇 초 지연시켜 다음의 URI로부터 읽어 올 것인가를 나타내는 시간 숫치이다. 이 기능은 일반적으로 사용자가 저절로 전환하는 소개 페이지를 볼 때 사용한다. 그러나, 일부 사용도구는 이 기능을 지원하지 않으므로, 제작자는 소개 페이지에 사용자가 여기에서 묶이지 않고 항상 다른 페이지로 갈수 있도록 내용을 포함 시켜야한다.

META와 검색 엔진

일반적으로 META는 검색 엔진(search engine)의 검색 품질을 향상 시키기 위 해 키워드를 지정하는데 사용된다. 문서의 언어 관련 정보를 갖는 여러개의 META 엘레멘트가 제공 될 때는 검색 엔진은 lang 애트리뷰트의 필터(filter)를 거처 참조 된 언어를 사용하여 결과를 보여준다.

예를 들어

<-- 미국 영어 사용자를 위하여 -->
<META name="keywords" lang="en-us" content="vacation, Greece, sunshine">
<-- 영국 영어 사용자를 위하여 -->
<META name="keywords" lang="en"    content="holiday, Greece, sunshine">
<-- 불어 사용자를 위하여 -->
<META name="keywords" lang="fr"    content="vacances, Gr&egrave;ce, soleil">

검색 엔진의 효과를 높이기 위하여 LINK 엘레멘트로 한 언어에서 다른 언어로 번역을, 다른 메디아(예: PDF)의 문서 버전으로, 문서가 모듬 서류의 일부이면 그 모둠 서류의 시작으로 연결 시킬 수 있다.

추가적인 도움말은 웹싸이트에서의 검색 엔진 색인 항목 참조하라.

META와 인터넷 내용 선택 플랫트폼(PICS)

인터넷 내용 선택 플랫트폼([PICS]: Platform for Internet Content Selection)은 인터넷 내용과 관련 된 라벨(label) 메타데이터의 기반 구조(infrastructure)이다. 당초에는 부모와 선생님이 아이들이 인테넷에 들어 갈 수 있도록 돕기 위 해 디자인 되었고, 다른 사용자들도 라벨을 사용하도록 도와 준다. 이것은 코드 싸인(code signing), 프라이버시(privacy)와 지적 소유권 관리등를 포함한다.

예제는 META에 인터넷 내용 선택 플랫트폼(PICS) 1.1 라벨을 포함한 선언을 어떻게 하는가를 설명한다.

<HEAD>
<META http-equiv="PICS-Label" content='(PICS-1.1 "http://www.gcf.org/v2.5"
	labels on "1994.11.05T08:15-0500" until "1995.12.31T23:59-0000"
	for "http://w3.org/PICS/Overview.html"
     ratings (suds 0.5 density 0 color/hue 1))
'>
 <TITLE> ... 문서 제목 ... </TITLE>
</HEAD>
META와 디폴트 정보

META 엘레멘트는 다음과 같이 문서 디폴트를 지정 할 수 있다.

다음 예제는 ISO-8859-5로 문서의 글자 엔코딩을 지정한다.

<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-5">

메타 데이터 프로화일(Meta data profile)

HEAD 엘레넨트의 profile 애트리뷰트는 메타 데이터 프로화일(Meta data profile)의 위치를 지정한다. profile 애트리뷰트의 값은 두가지 방식의 URI가 될 수 있다.

이 예제는 문서의 인덱싱을 위 한 유용한 특성들을 설정 한 가상 프로화일이다. 이 프로화일에는 "author(제작자)", "copyright(저작권)", "keywords(키워드)", "date(날자)" 둥의 특성들이 정의 되어 있고 값들은 META 선언 뒤에 온다.

<HEAD profile="http://www.acme.com/profiles/core">
 <TITLE>양해 각서 표지 완성하는 방법</TITLE>
 <META name="author" content="John Doe">
 <META name="copyright" content="&copy; 1997 Acme Corp.">
 <META name="keywords" content="corporate,guidelines,cataloging">
 <META name="date" content="1994-11-06T08:49:37+00:00">
</HEAD>

이 규격이 작성되는 동안에는 [RFC2068], 항목 3.3에 따라 데이터 양식을 사용하는 것이 보통이었다. 상대적으로 이 양식으로 처리하기가 어렵기 때문에, 제작자는 [ISO8601] 날자 양식은 사용 할 것을 권한다. 추가적으로 INS와 DEL 엘레멘트를 참조하라.

scheme(방식) 애트리뷰트는 제작자에게 사용도구를 사용하는데 메타데이터의 바른 표현을 위하여 추가적 문장을 제공한다. 메타데이터가 다른 양식으로 되었는 경우 이와 같은 추가적인 정보는 매우 중요하다. 예를 들어, 제작자는 날자를 모호 한 양식 "10-9-97"으로 표현 할 수 있느데 이것으로 1997년 10월 9일인지 1997년 9월 10일인지 알 수 없다. scheme 애트리뷰트 값 "Month-Date-Year"로 이 날자 값의 모호 한 점을 없앤다.

다른 경우, scheme 애트리뷰트는 사용도구에게 그리 중요한 것은 아니지만 도움 정보를 제공한다.

다음 예제에서, scheme은 사용도구에게 그 "identifier(지정자)" 특성 값이 ISBN 코드 번호라는 것을 알려 줘 도움을 준다.

<META scheme="ISBN"  name="identifier" content="0-8230-2355-9">

scheme 애트리뷰트의 값은 특성 name과 연결 된 profile에 따라 다르다.

주기: Dublin Core ([DCORE])는 프로화일의 한 예제로 전자 서적을 위 한 추천 특성들을 정의하고 일치하지 않는 모델들 간의 통용성의 개선을 시도 하였다.

7.5 문서 본체(BODY)

7.5.1 BODY 엘레멘트

<!ELEMENT BODY O O (%block; | SCRIPT)+ +(INS | DEL) -- 문서 본체(body) -->
<!ATTLIST BODY
 %attrs;                              -- %coreattrs, %i18n, %events --
 onload          %Script;   #IMPLIED  -- 문서를 읽었다(loaded) --
 onunload        %Script;   #IMPLIED  -- 문서가 제거 되었다(removed) --
>

시작태그: 선택적, 종료태그: 선택적

애트리뷰트의 정의 보는(visual) 브라우저에서

background = uri [대소문자 타입 참조: CT]
불량한 것이다. 이 애트리뷰트의 값은 이미지 자원의 URI이다. 그 이미지는 배경(background)에 일반적으로 바둑판 식으로 배열된다.
text = color [대소문자 구별 없이: CI]
불량한 것이다. 이 애트리뷰트는 데이터(foreground) 텍스트의 색상을 지정한다.
link = color [대소문자 구별 없이: CI]
불량한 것이다. 이 애트리뷰트는 방문 한 적이 없는 페이지 연결(hypertext link) 텍스트의 색상을 지정한다.
vlink = color [대소문자 구별 없이: CI]
불량한 것이다. 이 애트리뷰트는 방문 했던 페이지 연결 텍스트의 색상을 지정한다.
alink = color [대소문자 구별 없이: CI]
불량한 것이다. 이 애트리뷰트는 현재 선택 한 페이지 연결 텍스트의 색상을 지정한다.
다른 곳에서 정의 된 애트리뷰트

문서의 본체에 문서의 내용을 갖는다. 내용의 표현은 사용도구에 따라 다를 수 있다. 예를 들어, 보는(visual) 브라우저에서 본체를 텍스트, 이미지, 색상, 그래픽 등을 표현하는 화폭으로 생각한다. 오디오 사용도구에서는 같은 내용이 말로 표현 된다. 현재에는 스타일쉬트가 문서의 표현에 선호 되기 때문에 BODY의 표현적 애트리뷰트는 불량한 것이 되었다.

불량한 예제:
다음 HTML 부분은 불량한 애트리뷰트의 사용을 설명하고 있다. 이 것은 화면의 배경색을 백색, 텍스트 색상을 검정, 당초 연결을 적색, 현재 선택한 연결을 분홍, 방문했던 연결을 갈색으로 설정하였다. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
  "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>인구의 유동성에 관 한 연구</TITLE>
</HEAD>
<BODY bgcolor="white" text="black"
 link="red" alink="fuchsia" vlink="maroon">
 ... 문서 본체 ...
</BODY>
</HTML>

다음과 같이 스타일쉬트를 사용하여 같은 효과를 얻을 수 있다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
  "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>인구의 유동성에 관 한 연구</TITLE>
<STYLE type="text/css">
 BODY { background: white; color: black}
 A:link { color: red }
 A:visited { color: maroon }
 A:active { color: fuchsia }
</STYLE>
</HEAD>
<BODY>
 ... 문서 본체 ...
</BODY>
</HTML>

외부 스타일쉬트에 연결 사용하는 것은 원래의 HTML 문서를 수정하지 않고 표현을 변경할 수 있는 융통성을 부여한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
  "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>인구의 유동성에 관 한 연구</TITLE>
<LINK rel="stylesheet" type="text/css" href="smartstyle.css">
</HEAD>
<BODY>
 ... 문서 본체 ...
</BODY>
</HTML>

프레임세트(Frameset)와 HTML 본체: 프레임세트를 포함하는 문서에서는 BODY 엘레멘트를 FRAMESET 엘레멘트로 대체한다. 추가 정보는 프레임을 참조하라.

7.5.2 엘레멘트 지정자(identifier): id와 class 애트리뷰트

애트리뷰트의 정의

id = name [대소문자 구별: CS]
이 애트리뷰트는 엘레멘트에 이름(name)을 부여한다. 이 이름을 전 문서를 통하여 같은 이름이 있으면 않된다.
class = cdata-list [대소문자 구별: CS]
이 애트리뷰트는 엘레멘트에 하나 혹은 여러개의 클라스(class) 이름을 부여한다. 여러 엘레멘트에서 같은 클라스 이름 혹은 이름들을 가질 수 있으며, 여러 클라스 이름들을 가질 때는 공간으로 분리된다.

id 애트리뷰트는 엘레멘트에 중복되지 않는(unique) 지정자(identifier)를 지정한다(이는 SGML에 의하여 확인 될 수 있슴).

예를 들어, 다음 두 문단은 id 값에 의하여 구분된다.

<P id="myparagraph">이것은 독특 한 이름이 부여 된 문단이다.</P>
<P id="yourparagraph">이것도 다른 독특 한 이름이 부여 된 문단이다.</P>

id 애트리뷰트는 HTML에서 몇 가지 임무를 갖는다.

반면에 애트리뷰트에 하나 이상의 class를 지정 할 수 있다. 하나 이상의 class 이름을 엘레멘트에 지정하면, 그 엘레멘트는 이 클라스에 속해 있다고 말 할 수 있다. 하나의 class 이름은 여러 엘레멘트에 의해 공유 될 수 있다. class 애트리뷰트는 HTML에서 몇 가지 임무를 갖는다.

다음 예제는 문서 메세지 작성을 위하여 SPAN 엘레멘트를 id와 class 애트리뷰트와 조합하여 사용하였다. 메세지는 영어와 불어 두가지로 나타난다.

<!-- 영어 메세지 -->
<P><SPAN id="msg1" class="info" lang="en">Variable declared twice</SPAN>
  <!   ---   (변수가 두 번 선언 됨)   --->
<P><SPAN id="msg2" class="warning" lang="en">Undeclared variable</SPAN>
  <!   ---   (선언 되지 않은 변수)   --->
<P><SPAN id="msg3" class="error" lang="en">Bad syntex for variable name</SPAN>
  <!   ---   (불량한 표현의 변수 이름으로)   --->

<!-- 불어 메세지 -->
<P><SPAN id="msg1" class="info" lang="fr">
     Variable d&eacute;clar&eacute;e deux fois</SPAN>
<P><SPAN id="msg2" class="warning" lang="fr">
     Variable ind&eacute;finie</SPAN>
<P><SPAN id="msg3" class="error" lang="fr">
     Erreur de syntexe pour variable</SPAN>

다음 CSS 스타일 지정은 볼 수 있는 사용도구에게 정보(info)를 녹색, 경고(worning)를 노랑, 오류(error)를 적색으로 표시하도록 지시한다.

SPAN.info    { color: green }
SPAN.warning { color: yellow }
SPAN.error   { color: red }

불어의 "msg1과 영어 "msg1"은 같은 id 값을 갖고 있어 한 문서에 같이 나타 날 수 없음에 주의하라.

제작자는 id 애트리뷰트를 추가적으로 개별 메세지의 표현을 향상시키기 위해서 혹은 그 애트리뷰트들을 목표 앵커로 만들기 위 해 사용 할 수 있다.

거의 모든 HTML의 엘레멘트는 지정자(identifier)와 클라스(class) 정보를 가질 수 있다.

프로그랜 언어에 대한 문서의 작성 예를 가정 해 보자. 그 문서는 여러개의 미리 결정 된 양식을 갖는다. 그 양식을 위 해 여기서 PRE 엘레멘트를 사용하고 클라스 "example"에 속 해있는 PRE 엘레멘트의 경우 녹색을 배경색으로 지정한다.

<HEAD>
<TITLE> ... 문서 제목 ...</TITLE>
<STYLE type="text/css">
 PRE.example { background: green }
</STYLE>
</HEAD>
<BODY>
<PRE class="example" id="example-1">
 ...예제 내용은 여기에 ...
</PRE>
</BODY>

이 예제에서 id 애트리뷰트를 설정하므로서, (1) 여기에 연결시키는 하이퍼링크(hyperlink)를 만들수 있고, (2) 직접적인 지정으로 스타일 정보로 클라스 스타일을 덮어 씌울 수 있다.

주기: id 애트리뷰트는 앵커 이름에 사용 될 때 name 애트리뷰트와 이름 자리를 같이 사용한다. 추가 정보는 id에 의 한 앵커를 참조하라.

7.5.3 블럭레벨(Block-level)과 인라인(inline) 엘레멘트

BODY에 나타나는 HTML 엘레멘트들을 블럭레벨(block-level)이라 부르고, 다른 것들을 인라인(inline: "text level"이라고도 함)이라한다. 그 들의 차잇점은 몇가지 있다.

내용(Content) 모델
일반적으로 블럭레벨 엘레멘트들은 인라인 엘레멘트들과 다른 블럭레벨 엘레멘트을를 포함 할 수 있다. 반면 인라인 엘레멘트들는 일반적으로 데이터와 다른 엘레멘트들 만 가질 수 있다. 이 구조적 차이는 블럭 엘레멘트들이 인라인 엘레멘트들 보다 더 큰 구조를 갖다.
양식(Formatting)
원래 블럭레벨 엘레멘트들은 인라인 엘레멘트들과 다른 양식을 갖는다. 일반적으로 블럭레벨 엘레멘트들은 새로운 줄에서 시작하나, 인라인 엘레멘트를은 그렇지 않다. 공간, 줄바꿈(line break)와 블럭 양식(block format)의 추가 정보는 텍스트를 참조하라.
방향성(Directionality)
유니코드[UNICODE]의 양방향 텍스트 기능의 기술적 이유들로 블럭레벨과 인라인 엘레멘트들은 방향성 정보를 취하는 방법이 다르다. 세부사항은 텍스트 방향 특성을 참조하라.

스타일쉬트는 엘레멘트가 블럭레벨 또는 인라인으로 해석 할 것인가를 포함하여 엘레멘트들의 서로 다른 방식을 구별하는 수단을 제공한다. LIST(목록) 엘레멘트를 위한 인라인 스타일과 같은 일부의 경우에는 문제가 없으나, 일반적으로 말 해 제작자는 이와 같은 방법으로 HTML 엘레멘트들의 일반적인 표현을 덮어 씌우는 것을 피해야한다.

블럭레벨과 인라인 엘레멘트들을 위 한 전통적인 표현 방식의 변경은 텍스트의 양방향 기능에도 영향을 준다. 스타일쉬트의 양방향성에 대한 영향 참조.

7.5.4 구룹 엘레멘트: DIV, SPAN 엘레멘트

<!ELEMENT DIV - - (%flow;)*            -- 특유 언어/스타일 용기 -->
<!ATTLIST DIV
 %attrs;                              -- %coreattrs, %i18n, %events --
>
<!ELEMENT SPAN - - (%inline;)*         -- 특유 언어/스타일 용기 -->
<!ATTLIST SPAN
 %attrs;                              -- %coreattrs, %i18n, %events --
>

시작태그: 필요 함, 종료태그: 필요 함

다른 곳에서 정의 된 애트리뷰트

DIV와 SPAN 엘레멘트를 id와 class 애트리뷰트를 결합하여 사용하여 문서 구조에 특유 한 기능을 추가 할 수 있다. 이 엘레멘트들은 인라인(SPAN) 또는 블럭레벨(DIV)의 내용(content)을 정의하며, 내용에 대 한 다른 표현적 문구는 없다. 그래서 제작자는 이 엘레멘트들을 스타일쉬트, lang 애트리뷰트 등과 결합하여 사용하여 자신의 필요와 구미에 맞추어 HTML에 적용 할 수 있다.

예를 들어 고객 정보의 데이터베이스에 기초를 둔 HTML 문서를 만든다고 가정 해 보자. HTML에는 고객이름, 전화 번호, 전자 우편 주소, 등과 같은 오브젝트를 지정하는 엘레멘트들이 없으므로, 원하는 구조적인 효과와 표현적인 효과를 얻기 위해 DIV와 SPAN을 사용한다. 정보를 구성하기 위하여 우리는 TABLE 엘레멘트를 아래와 같이 사용 할 수 있다.

<!-- 고객 데이터베이스로 부터의 데이터 예제:  -->
<!-- 고객이름: Stephane Boyera,
	전화 번호: (212) 555-1212, 전자 우편 주소: sb@foo.org -->

<DIV id="client-boyera" class="client">
<P><SPAN class="client-title">고객 정보:</SPAN>
<TABLE class="client-data">
<TR><TH>성:<TD>Boyera</TR>
<TR><TH>이름:<TD>Stephane</TR>
<TR><TH>전화 번호:<TD>(212) 555-1212</TR>
<TR><TH>전자 우편:<TD>sb@foo.org</TR>
</TABLE>
</DIV>

<DIV id="client-lafon" class="client">
<P><SPAN class="client-title">고객 정보:</SPAN>
<TABLE class="client-data">
<TR><TH>성:<TD>Lafon</TR>
<TR><TH>이름:<TD>Yves</TR>
<TR><TH>전화 번호:<TD>(617) 555-1212</TR>
<TR><TH>전자 우편:<TD>yves@coucou.com</TR>
</TABLE>
</DIV>

나중에 이들 데이터베이스 항목들의 표현을 잘 하기 위하여 스타일쉬트를 쉽게 추가 할 수 있다.

다른 사용 예제 class와 id 애트리뷰트를 참조하라.

보는 사용도구는 일반적으로 DIV 엘레멘트의 앞과 뒤에 아래 예제와 같이 줄바꿈을 넣는다.

<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>

이것은 아래와 같이 표현된다.

aaaaaaaaa
bbbbbbbbb
ccccc

ccccc

7.5.5 헤딩(Heading): H1, H2, H3, H4, H5, H6 엘레멘트

<!ENTITY % heading "H1 | H2 | H3 | H4 | H5 | H6">
<!-- H1(가장 중요)부터 H6(가장 덜 중요)까지 6 단계가 있슴. -->

<!ELEMENT (%heading;)  - - (%inline;)* -- 헤딩 -->
<!ATTLIST (%heading;)
 %attrs;                              -- %coreattrs, %i18n, %events --
>

시작태그: 필요 함, 종료태그: 필요 함

다른 곳에서 정의 된 애트리뷰트

헤딩 엘레멘트는 항목을 개략적으로 소개하기 위하여 중요한 사항(topic)을 기술한다. 헤딩 정보는 예를 들어 사용도구에 의하여 자동적으로 문서의 목차를 만드는데 사용 될 수 있다.

HTML의 헤딩은 가장 중요한 H1로 부터 가장 덜 중요한 H6까지 6 단계가 있다. 보는 브라우저에서 일반적으로 중요한 헤딩 일수록 큰 글자로 표현한다.

다음 예제는 헤딩을 그 다음에 따라오는 문서 항목의 DIV 엘레멘트와을 어떻게 결합하여 사용 할 것인가를 보여 준다. 그렇게 하여 스타일쉬트로 항목 (배경색상, 폰드 설정, 등)의 스타일을 정의 할 수 있다.

<DIV class="section" id="forest-elephants">
<H1>숲 속의 코끼리들</H1>
<P>이 항목에서는 잘 알려져 있지 않는 숲 속의 코끼리 들에 대해 알아본다.
 ...이 항목 계속 ...
<DIV class="subsection" id="forest-habitat">
<H2>서식</H2>
<P>숲 속의 코끼리들은 나무 안에서 살지 않고 나무들 사이에서 산다.
 ...이 부속 항목 계속...
</DIV>
</DIV>

이 구조는 스타일 정보로 아래와 같이 장식 할 수 있다.

<HEAD>
<TITLE>... 문서 제목 ...</TITLE>
<STYLE type="text/css">
DIV.section { text-align: justify; font-size: 12pt}
DIV.subsection { text-indent: 2em }
H1 { font-style: italic; color: green }
H2 { color: green }
</STYLE>
</HEAD>

번호있는 항목들과 참조
HTML은 헤딩으로 부터 자체적으로 항목 번호을 생성하지 않는다. 그러나 사용도구가 이를 지원 할 수 있다. 머지않아 CSS와 같은 스타일쉬트 언어가 제작자들로 하여금 항목 번호를 처리 할 수 있게 해 줄 것이다. 인쇄 된 문서에서 앞으로(forward) 참조를 쉽게: 항목 7.2 참조하라.

어떤 사람들은 헤딩 단계 뛰어 넘기를 불량한 것으로 생각하는데, 그들은 H2를 뛰어 넘은 H1 H3 H1을 수용하지 않고 H1 H2 H1을 수용한다.

7.5.6 ADDRESS(주소) 엘레멘트

<!ELEMENT ADDRESS - - (%inline;)* -- 제작자에 대한 정보 -->
<!ATTLIST ADDRESS
 %attrs;                         -- %coreattrs, %i18n, %events --
>

시작태그: 필요 함, 종료태그: 필요 함

다른 곳에서 정의 된 애트리뷰트

ADDRESS 엘레멘트는 제작자가 접촉을 위한 연락처 정보를 제공하기 위하여 문서 또는 폼(form)과 같은 문서의 중요 부분에 사용 할 수 있다. 이 엘레멘트는 주로 문서의 시작 또는 끝 부분에 사용한다.

예를 들어 W3C 웹 싸이트의 HTML 관련 된 페이지에 다음의 연락처 정보를 포함 할 수 있다.

<ADDRESS>
<A href="../People/Raggett/">Dave Raggett</A>,
<A href="../People/Arnaud/">Arnaud Le Hors</A>,
<A href="Activity">W3C의 HTML 관련 활동</A>를 위한 사람의 연락처<BR>
$Date: 1998/04/02 00:20:03 $
</ADDRESS>

귀하의 브라우저에서 이 표현은 아래와 같다.(유효하지 않은 연결)


Dave Raggett
Arnaud Le Hors
W3C의 HTML 관련 활동를 위한 사람의 연락처

$Date: 1998/04/02 00:20:03 $
이전순서 다음순서 목록 엘레멘트 애트리뷰트 색인 원문연결
이 Trio 홈페이지 문서(http://trio.co.kr/webrefer/html40/struct/global.html)는 자유로이 연결 사용이 가능함.