HTML 문서는 크게 머리부분(head)와 몸체부분(body)로 구성되어지는데 HTML로 작성된 웹문서의 기본구조는 아래와 같습니다.
▣ HTML문서의 기본형식▣
|
HTML문서의 시작임을 의미합니다 | ☞ | |
HTML문서의 머리부분의 시작을 나타내며 본문을 설명하기 위해 선행될 것들을 넣습니다 | ☞ | |
HTML문서의 제목을 넣기 위한 태그로 제목을 넣으면 브라우져 상단에 제목이 나타납니다 | ☞ | 문서의 제목 |
HTML머리부분이 끝났음을 의미하는 태그입니다 | ☞ | |
HTML문서의 본문내용이 시작을 알립니다. | ☞ | 문서에 들어가는 내용들 |
HTML문서의 본문이 끝났음을 나타냅니다 | ☞ | |
HTML문서가 끝이 났음을 나타냅니다 | ☞ |
|
이렇게 웹페이지(HTML문서)는 위와 같은 기본형식 내에서 모든 것이 만들어지게 됩니다...
웹 문서는 처음에 로 시작하여 마지막엔 로 끝을 내주어야 합니다. 왜 그렇게 해야하는지는 묻지 마시기 바랍니다. 규약이니까요!!
저한테 왜 꼭 영어가 A 로 시작해야만 하고 왜 한글 자음이 "ㄱ" 자로 시작해야 하는지를 묻는 것과 같다고나 할까요?
반드시 꼭 그렇게 사용해야 하지만 예외적으로 사용되는 것들이 있습니다. 태그 하나 하나를 Element(요소)라고 하기도 합니다.
와 사이에 들어가는 것들은 본문에 나타나지 않으며,
이 부분엔 주로 자바스크립트나 스타일시트 등의 소스들이 들어가게 됩니다.
그러면 위의 기본태그에 대해 좀 더 알아볼까요 ...
Head
|
HTML문서의 머릿부분은 로 시작하여 로 끝나며 제목은 반드시 사이에 들어가야 합니다.
제목은 만든 웹페이지에 대한 특징을 잘 대변해 줄 수 있는 제목을 넣어주면 홈 페이지의 홍보에도 좋습니다.
머리(head)는 제목을 넣어주는 부분이기도 하지만 자바스크립트등을 정의할 때 본문(body)내의 내용들을 표현하기 위한 어떤 기교나 브라우져의 설정에 변화를 줄 때 선행시키는 스크립트들이 들어 갑니다.
☞ key : 문서의 제목 태그는 반드시 넣어 주어야 하는 것은 아니며 선택사항입니다.
제목을 넣어주지 않으려면 태그만 넣어 두거나 이 태그를 넣어주지 않아도 무방합니다
|
Body
|
요소 사이에서 우리가 브라우져를 통해 시각적으로 볼 수 있는 내용들을 넣는 부분 입니다.
그리고 태그 속에는 여러 속성들을 추가해 줌으로서 본문 안의 글자 색상, 배경 그림, 마진(여백)등을 정의할 수 있습니다.
예)
(또는 : bgcolor="pink" text="black" link="blue" alink="red" vlink="teal")
... 본문 내용 ...
위 예에서 쓰인 element들의 의미는 아래 표와 같습니다.
속 성 |
속 성 의 미 |
설 정 예 시 |
BACKGROUND |
본문 즉, 웹브라우저 화면에 표현할 배경그림을 설정할때 |
|
BGCOLOR |
본문 즉, 웹브라우저 화면에 표현할 배경색상을 설정할때(색상은 핑크색) |
|
TEXT |
본문 전체글자에 대한 기본색상 지정 |
|
LINK |
하이퍼링크를 걸어 놓은 글자의 색상 지정 |
|
VLINK |
한번 열었던(방문한) 하이퍼링크의 글자색 지정 |
|
ALINK |
하이퍼링트를 마우스로 클릭했을 때 글자색 지정 |
|
bgcolor="pink" text="black" link="blue" alink="red" vlink="teal"> background="IRP.gif" text="black" link="blue" alink="red" vlink="teal"> 이렇게 전체를 다 설정해 주어도 되고 필요한 것만 설정해 넣어주어도 됩니다.
|
이밖에도 marginwidth,marginheight,leftmargin,topmargin,rightmargin,bottommargin 등의 본문 여백 속성. 스타일 속성을 추가해 줄 수도 있습니다.
이런한 것들은 앞으로 공부하면서 차근차근 배우기로 하고 이러한 방법으로 본문이나 브라우져의 속성을 바꾸어 줄 수가 있음을 이해하여 두시기만 하세요.
위는 속성을 설정해서 나타내고자 할 때의 예를 든 것이고 속성에 대하여 설명을 한 것이며 반드시 속성을 설정해 주어야 한다는 말은 아닙니다.
그냥 이렇게 설정을 하고 body 내 텍스트에 별도로 색상을 설정해 쓰실 수 있답니다.
위와 같이 설정을 해 주지 않고 이렇게 로 설정을 해 주면 브라우져에서 이미 설정 되어진 글자의 기본 색상이나 바탕으로 나타나게 됩니다.
브라우져의 기본설정은 화면의 바탕 색상은 흰색, 글자 색상은 검정색, 링크 텍스트 색상은 파란색이 기본으로 설정되어 있음을 아시기 바랍니다.
|
수고하셨습니다!
|