HTML | HEAD | TITLE | BODY
Home > Document > HTML > 초급 과정 > HTML 문서의 기본 구조

페이지 목차

1. HTML 문서의 기본 틀

이번 페이지에서는 HTML 문서의 기본적인 구성요소에 대해서 알아 보도록 하겠습니다. 아래는 HTML문서의 기본적인 골격을 이루는 Element 들입니다.


Legend : Optional, Forbidden, Empty, Deprecated, Loose DTD, Frameset DTD   [표 보는 방법]
ElementStart tagEnd tagEmptyDeprecatedDTD
HTMLOO   
HEADOO   
TITLE     
BODYOO   
BR F   


Element
HTML
HTML 문서의 최상위(root) Element
class, dir, id, style, title 공통 Attribute 표 참조.
version HTML 버젼
lang 사용 언어, lang="ko"(한글), lang="en"(영문)
HEAD
문서의 meta data 정보를 기록하는 곳
dir 공통 Attribute 표 참조.
profiles profile 정보 예)<HEAD profile="http://www.w3c.org/...">
lang 사용 언어, lang="ko"(한글), lang="en"(영문)
TITLE
브라우저 제목 표시줄에 들어갈 문서제목
dir, lang 공통 Attribute 표 참조.
BODY
브라우저 창에 나타나는 문서 전체
background 배경그림 지정, background="경로/파일이름"
bgcolor 배경색 지정(Default white), bgcolor="color"
bgproperties
(*IE only)		 배경 그림을 고정한다. 사용안하면 Scroll, bgproperties="fixed" 는 배경 그림 고정
text 글씨색 지정(Default black), text="color"
link 링크걸린 글자색(Default blue), link="color"
vlink 방문했던 링크의 글자색(Default purple), vlink="color"
alink 링크를 클릭했을 때의 글자색(Default red), alink="color"
leftmargin 문서의 좌우 여백(Default 10 pixel), leftmargin="aValue"
topmargin 문서의 상단 여백(Default 15 pixel), topmargin="aValue"
<BR> line BReak의 역할을 하는 Tag입니다. 한 칸 아래로 줄을 바꿉니다. HTML 문서는 일반 워드 프로세서 문서와 달리 Enter Key로 칸을 바꾸지 못합니다. Enter Key를 여러번 쳐도 칸이 바뀌지 않습니다. <BR>의 역할은 이런 HTML 문서에서 칸을 바꿔주고 <BR> 을 사용한 갯수 만큼 칸이 바뀝니다.




2. 모든 HTML Element가 공통적으로 사용하는 속성(Attribute)

모든 HTML Element가 공통적으로 사용하는 속성(Document Wide Attribute)들을 따로 모았습니다. 즉, 모든 HTML Element에서 사용되므로 매번 표기할 필요가 없는지라 따로 정리했습니다.

공통적으로 사용하는 Attribute
dir
문장이 흐르는 방향(DIRection)  예) <HTML dir="rtl">
ltr (default) left to right : 왼쪽에서 오른쪽으로
rtl right to left : 오른쪽에서 왼쪽으로 (Scroll Bar가 왼쪽에 생김)
align
left | right | center | justify | char
내용물의 수평 정렬    예) <P align="justify">양쪽 맞춤</P>
left (default) 왼쪽 맞춤
right 오른 맞춤
center 가운데 맞춤
justify 양쪽 맞춤
char 지정한 글자(character) 맞춤
valign
(Vertical align)
top | middle | bottom | baseline
내용물의 수직 정렬    예) <TD valign="baseline">글자 바닥선 맞춤</TD>
top 상단 맞춤
middle (default) 중앙 맞춤
bottom 하단 맞춤
baseline 가장 큰 글자의 바닥선 맞춤
style HTML Tag 속에 사용하는 InLine Style
class Style Sheet에서 지정한 class 인식자(Identifier)
id Style Sheet에서 지정한 id 또는 name Attribute가 없는 Element에 지정하는 인식자(Identifier)
title 면적을 차지하는 Element 위에 마우스를 올려 놓았을 때 나타나는 설명글. 예)<BODY title="BODY Tag">
lang 사용 언어   예) lang="ko" (한국어), lang="en" (영어)
발생하는 Event onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup


예제 
<HTML>
    <HEAD>
        <TITLE>첫번째 작성하는 문서.</TITLE>
    </HEAD>
    <BODY bgcolor="#808080">
        첫번째 작성하는 문서.
    </BODY>
</HTML>





속성값에 사용하는 따옴표

예를 들어서 <BODY bgcolor="#808080" leftmargin="0" topmargin="0"> 와 같이 속성값을 따옴표 속에 집어넣는 것과 <BODY bgcolor=#808080 leftmargin=0 topmargin=0> 처럼 따옴표를 사용하지 않는 것과 어떤 차이점이 있을까요?... 사실 따옴표를 사용하지 않아도 결과는 같습니다. 그러면 '구태여 따옴표를 쓸 필요가 뭐냐'고 의문을 가지게 되겠죠? 분명한 차이가 있습니다. 따옴표를 사용하면
  • 브라우저에서 Page가 Loading되는 속도가 빨라집니다.
  • XML, XHTML 과 같이 형식을 엄밀하게 따지는 언어에서는 모든 값이 따옴표 속에 들어가야 됩니다.
만일 여러분들이 초보자라면 처음 부터 좋은 Coding 습관을 길러두는게 좋습니다. 더군다나 HTML-Kit에서는 자동으로 따옴표를 붙여주니까 대부분의 속성값을 따옴표 속에 쉽게 넣을 수 있습니다. 100% 다 그렇지는 않습니다만... 직접 입력할 때도 잊지말고 따옴표를 붙이는 습관을 들입시다.




HTML-Kit 사용자



감추기


HTML-Kit의 Tags Reminder 를 이용한 자동입력

1. HTML-Kit를 시작하면 아래와 같이 '파일 열기 마법사' 창이 나오면 Create a new file을 선택하고 'OK'


2. 아래와 같은 편집창이 나면서 cursor가 와 </BODY> 사이에 위치한다.
(편의상 편집창만 나타냈습니다.)


커저를 <BODY> 의 'Y'자 뒤에 놓고 Spacebar를 누른다. (<BODY |> 와 같이...)


아래방향 화살표 키(↓)를 눌러서 'bgcolor' 위로 이동한다.(bgcolor Attribute를 예로 듭니다.)


오른쪽 화살표 키(→)를 눌러서 'bgcolor' 항목을 확장시킨다.



아래 그림과 같이 'Gray - #808080' 항목위에 커저를 위치시키고 'Enter'를 친다.


아래와 같이 'bgcolor="#808080" 이 자동 입력된다.


이제 F12번 키를 눌러서 미리보기(Preview)를 해 봅니다. 배경색이 Gray(#808080)가 되었습니다. 맞져?...



Tags Reminder 창 띄우는 방법

아래의 모든 | 부분에서 Spacebar를 치면 됩니다. 즉, 단어나 Attribute 값 뒤에 닫히는 따옴표 바로 뒤에 커저를 놓고 스페이스를 입력하면 된다는 뜻입니다. 아주 간단하져?...

<BODY| bgcolor="#808080"| leftmargin="0"| topmargin="0"|>


만약 이미 사용한 Attribute가 있다면 아래 그림과 같이 단어에 '가운데줄(strike)'을 쳐서 표시해 줍니다. 정말 끝내주는 기능이져... 잊지 마세요 항상 같은 방법을 사용합니다.



<BR> Tag 자동 입력 하기
아주 간단합니다. Ctrl + Enter 즉, 컨트롤 키를 누른 상태에서 enter 키를 치면 됩니다... 정말 간단하죠?...^^

다음 페이지에서는 font Element에 대해서 알아 봅니다.


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

Top
Back
New
검색