[Element | Attribute | Value & Keyword] = TAG
Home > Document > HTML > 초급 과정 > 용어와 문서 구조

페이지 목차

드뎌~ 본격적인 내용으로 들어왔습니다...^^

이 페이지에서는 용어에 대한 정의와 HTML 문서의 구조에 대해 알아 보겠습니다. 이 페이지와 다음 페이지(Color | Length unit)는 사실 무쟈게 중요한 페이지가 되시겠습니다. 왜냐하면 이 사이트에서 사용되는 일종의 표기 규칙에 대해서 설명하는 페이지이기 때문 입니다. 예를 들어 느닷없이...

Legend : Optional, Forbidden, Empty, Deprecated, Loose DTD, Frameset DTD
ElementStart tagEnd tagEmptyDeprecatedDTD
HTMLOO   

이런 표를 보여주고 아무런 설명없이 넘어가면 과연 무슨 뜻인지 이해할 수 있을까요? 아마 모르긴해도 먼 뜻인지 모를 겁니다. 그러니까 이 페이지는 예를 들어 위와 같은 표가 나오면, 왜 이런 표가 필요하고 또 어떻게 이해해야 되는지를 보여주는 페이지입니다. 부디 유의해서 잘 읽어보시고 뒤에 나오는 페이지를 이해하는데 차질이 없도록 하면 좋겠네요...^^




1. 용어의 정의
용어의 정의
element HTML을 구성하는 요소들 예) HTML, head, title, body 등등...
attribute 각각의 element 가지고 있는 속성 예) align, bgcolor, color 등이 있으며 하나의 element에서 attribute를 사용하고 안하고는 선택사항(optional)입니다. 즉, 경우에 따라 사용하지 않을 수도 있고, 몇 개를 사용할 수도 있으며, 전체를 다 사용(full option)할 수도 있습니다.
value & keyword
attribute에 지정하는 Value(값)나 Keyword(핵심어)
value 100, 3px, 25%, red, green, blue...etc
keyword left, right, center, ko, en...etc





2. HTML Tag의 구조
아래의 다섯 가지 경우를 설명하기 전에 앞으로 이 사이트에서 사용할 표기 규칙(기호)를 먼저 설명하죠.
논리 연산자(기호)
| (or) 말 그대로 '또는' 이라는 뜻입니다. 예를 들어 a | b 라고 표기했으면 a 또는 b 둘 중에 하나라는 뜻입니다.
|| (and) 말 그대로 '그리고' 라는 뜻입니다. 예를 들어 a || b 라고 표기했으면 a 와 b 둘 다 라는 뜻입니다.
aValue attributeValue 라는 뜻입니다. 즉, 해당 attribute에 적용되는 값(value)을 뜻합니다.
aKeyword attributeKeyword 라는 뜻입니다. 즉, 해당 attribute에 적용되는 핵심어(Keyword)를 뜻합니다.


혹시나 해서 하는 말인데 문서 윗 부분에 문서 제목으로 사용한 Element | Attribute | Value & Keyword 는 논리 연산자와 아무 관계없이 단어를 구분하는 표시로 사용했습니다.


일반적인 HTML Tag의 몇 가지 형태
  1. <element attribute="aValue | aKeyword">내용물</element>
  2. <element>내용물</element>
  3. <element attribute="aValue | aKeyword"></element>
  4. <element attribute="aValue | aKeyword">
  5. <element>
일반적으로 크게 나누어 HTML Tag은 위와 같은 구조를 가지고 있습니다.
일반적인 HTML Tag의 몇 가지 형태
Case 1
element 와 attribute를 사용하고 내용물이 있는 경우
예1) value <FONT color="#808080" face="Tahoma">내용</FONT>
예2) keyword <BODY bgproperties="fixed">내용</BODY>
Case 2
element 와 내용물이 있는 경우
예1) <I>italic</I>
예2) <H4>제목 4</H4>
Case 3
element 와 attribute를 사용하고 내용물이 없는 경우
예1) <IFRAME src="http://kr.yahoo.com"></IFRAME>
예2) <TEXTAREA cols="30" rows="15"></TEXTAREA>
Case 4
element 와 attribute만 있는 경우
예1) <IMG src="path/filename" width="100%" alt="그림파일">
예2) <INPUT type="TEXT" name="input_1" value="아이디">
Case 5
element만 있는 경우
예1) <BR>
예2) <HR>

HTML Element 란

<element attribute="aValue | aKeyword">content</element>

HTML Elementstart tag, content, end tag, element name, attribute, value | keyword로 이루어진 box 속의 글씨 전체를 의미 합니다.





3. DTD 와 Element 특성을 보는 조견표

HTML Element 마다 가지고 있는 각각의 특성을 한 눈에 보기위해 아래와 같은 표를 만들었습니다. 이 표를 만든 목적은 HTML 문서를 브라우저로 보았을 때 면적이 있는 tag 인지 아니면 면적이 없는 tag 인지를 구분하는게 첫 번재 목적이고, 두번째는 현재 W3C에서 새로운 규격(specification)이 나오면 소위 말하는 '왕따'가 될 Element는 어떤 것인지를 미리 알아서 앞으로 여러분들이 웹 문서를 꾸밀 때 고려해 봄직한 사항들을 미리 알아두면 도움이 될 거라는 생각에서 입니다.

Legend : Optional, Forbidden, Empty, Deprecated, Loose DTD, Frameset DTD
ElementStart tagEnd tagEmptyDeprecatedDTD
HTMLOO   
BASEFONT FEDL


조견표와 범례(Legend)에 대한 설명
Optional 선택 사항 이라는 뜻입니다. 즉, 써도되고 안 써도 된다는 말입니다. Start Tag과 End Tag 모두 Optional 일 경우와 End Tag 만 Optional 일 경우가 있습니다. 그렇지만 나중(xml)을 대비해서 사용하는 습관을 키우도록 하져... 아래에 또 설명하겠지만 확실하게 해 두면 걱정할 일이 없습니다.
Forbidden End Tag 사용 금지라는 뜻입니다. 이 말은 사용했을 때 심각한 오류를 발생 시키거나 또는 발생할 수 있다는 말입니다. 꽤 겁주는 것 같은 말이지만 이 사이트에서 HTML Emement 들을 알아 나가다 보면 무슨 뜻인지 알 수 있겠져...
표시가 없는 경우 Optional 이나 Forbidden 표시가 없는 경우는 사용하게 될 경우 반드시 End Tag으로 닫아 주라는 뜻입니다.
Empty Empty라는 개념은 사실 꽤 모호한 개념입니다. 단어의 사전적 의미로 볼 때는 '비어있는', '텅빈' 뭐 이런 뜻인데, HTML 문서에서는 이렇게 알아 두면 되겠습니다. End Tag 사용이 금지(Forbidden)인 Element, 또는 End Tag 이 Optional(선택사항)인 Element를 End Tag 없이 사용한 경우라고 알아 두면 무난하겠습니다. 즉, 어떤 내용물이 Start Tag과 End Tag 으로 감싸여 졌을 경우 비어있지 않은 Tag으로 인정한다는 말입니다.
Deprecated  바로 이 넘이 새로운 규격이 나오면 소위 말하는 '왕따'가 될 즉, 다른 규격으로 대체될 Element가 어떤 것 인지를 알려 주는 항목입니다. 왜 이런 표시는 하느냐하면 만들어 놓기는 했는데, 사용하기가 불편하고 더 좋은 방법이 있기 때문에 안쓰는 Element 들을 말합니다. W3C에서 규격에 포함시켰지만 잘 사용되지 않아서, 또는 CSS를 대신 사용하는 바람에 잘 쓰여지지 않는 Element 들이 되겠습니다. 그런 표시가 되어 있는건 앞으로 사용하지 말라는 겁니다. 왜 그러냐하면 기껏 문서를 만들어 놨는데 브라우저가 그런 왕따 Element를 지원하지 않을 가능성이 있을 수도 있다는 뜻입니다. 가급적 사용을 하지 않는게 좋습니다.
Loose DTD 뒤에 자세히 설명하겠지만 W3C에서는 문서의 형태를 크게 3가지로 분류하고 있습니다. DTD 란 Document Type Definition 의 약자로서 문서 형식을 정의 하는 기준입니다. 그 기준은
  • Loose DTD
    Loose 는 '느슨하다', '풀어지다' 머 이런 뜻으로 생략할 거 생략해도 괜찮은 즉, 생략해도 실행하는데 지장이 없는 호환모드(Transitional mode)를 말합니다.
  • Strict DTD
    Loose DTD와 달리 생략을 허용하지 않는 xml같이 올바른 형식의 문서(Well formed Document)를 말합니다.
  • Frameset DTD
    FrameSet을 사용한 문서에 대한 DTD를 말합니다.
이렇게 위의 3가지 입니다.
Frameset DTD Frameset에 대한 DTD(Document Type Definition)입니다. 웹 문서를 처음 접하는 분들은 Frameset? 그게 먼데? 안 그래도 머리가 복잡한데 점점 모를 소리만 하는구만... 하고 생각하시겠지만 한 걸음 한 걸음 나아가다 보면 뒤에 자연스레 이 넘을 만나게 됩니다. 그리고 보니 웹 문서를 잘 아는 사람이 이 페이지를 볼 일은 없겠군요...
범례(Legend) 항목의 해당 값에 대한 이해 위에서 제시한 HTML Element를 예로 들겠습니다.
  • Start Tag = O, Optional (선택 사항임), 비었으면 사용.
  • End Tag = O, Optional (선택 사항임), 비었으면 사용, F = 사용금지
  • Empty = E, End Tag 없음, 표시가 없으면 End Tag 사용해야 됨
  • Deprecated = D, 나중에 다른 Element로 대체됨, 표시가 없으면 Not Deprecated
  • DTD = L, 호환모드(Transitional Mode), 표시가 없으면 해당없음
이 부분(DTD)에 대해서는 CSS(Cascading Style Sheet)가 끝날 때 쯤에 자세히 설명하겠습니다.





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색