웹마스터웹디자인리더입니다.

HTML이란..?

HTML이란 Hyper Text Markup Language의 약자로 인터넷에서 정보를 보여주기 위한 하이퍼 텍스트를 만드는 표준적인 언어이며 홈페이지를 만들때 쓰이는 언어입니다. html문서는 각각의 명령어를 말하는 tag로 이루어져 있습니다. 그러므로 tag란 홈을 만드는 벽돌이라고 보면 됩니다. HTML tag는 '<'와 '>'사이에 들어가게 되고,

...
(시작 tag와 종료 tag)로 구성되며 그 사이에 내용이 들어가게 됩니다. HTML은 웹의 표준을 관장하는 W3C(World Wide Web Consortium) 에서 발표한 4.0버전이 최신 버전입니다.

홈페이지를 만들기 위해서는 어떤 프로그램들이 필요할까?

HTML문서를 작성하는 도구로는 WINDOWS의 메모장과 같은 간단한 텍스트 에디터 부터 위지윅 프로그램까지 다양합니다. 메모장과 같은 텍스트 에디터로 HTML을작성하면 tag를 직접 써줘야 하는 불편이 있는 반면 소스를 깔끔하고 보기 좋게 만들수 있으며 tag에 금방 익숙해 져서 남들이 만든 html문서의 구조도 쉽게 파악할 수 있게 됩니다. 위지윅(WYSIWYG)이란 "What You See Is What You Get"의 약자로 말그대로 '당신이 보는 것이 당신이 얻는 것'이란 뜻입니다.

Tag를 직접쓰지 않고 위지윅 프로그램을 사용하여 보통 아래아 한글에서 문서를 작성하듯 문서를 작성하면 자동으로 tag를 만들어주고 웹브라우저에서 보는 것과 같은 화면을 보여줍니다. 그러므로 tag에 익숙하지 않은 초보자들도 html문서를 쉽게 만들 수 있습니다.

요즘은 위지윅 프로그램의 성능이 아주 좋아져서 전문가들도 많이 사용하고 있으며, 대표적인 프로그램으로는 드림위버나 나모 웹에디터, 프론트 페이지 등이 있습니다. 그 밖에 문서를 예쁘게 꾸미기위해서 그래픽 프로그램등이 쓰입니다.

시작하기 전에...
이제부터 body Tag 내에서 쓰이는 Tag들을 하나씩 살펴 보도록 하겠습니다. HTML 문서내에서는 일반 문서편집기에서와 같은 줄바꾸기가 적용되지 않습니다. 작성할때 띄웠다고 해도 브라우저 상에서는 한줄로 표시됩니다. 다시말해서 Enter키가 적용되지 않는다는 말이죠. 그와 같은 기능을 하는 Tag를 써줘야 합니다. 또, 각각의 Tag들은 속성(Attribute)을 가지고 있습니다. 속성값을 바꿔가면서 문서를 마음대로 제어 할수있습니다.


font tag는 글자를 제어하는 tag입니다. 속성으로는 size, color, face 등이 있습니다. size는 글자크기를 지정하는 속성으로 1~7까지의 값을 갖습니다. color 속성은 글자의 색상을 face 속성은 글씨체를 제어합니다.
소스를 먼저 보고나서 설명하도록 하겠습니다. 소스와 '결과보기'에출력된 화면을 잘 비교해 보세요.
<html>
<head>
<title> font tag </title>
</head>

<body>
 1. HTML을 배워서 홈페이지를 만들자. 
 2. HTML을 배워서 홈페이지를 만들자. 
 3. HTML을 배워서 홈페이지를 만들자. 
 4. HTML을 배워서 홈페이지를 만들자. 
 5. HTML을 배워서 홈페이지를 만들자. 
 6. HTML을 배워서 홈페이지를 만들자. 
 7. HTML을 배워서 홈페이지를 만들자. 
</body>
</html>
이처럼 속성은 태그뒤에 한칸을 띄우고 써주며, 필요한 속성만을 정의해 주면 됩니다. 생략한 속성값은 기본값이 적용됩니다. size는 숫자가 커질수록 글씨가 커지는 것을 알수 있죠? color값은 영문색상명으로 표기해도 되고, RGB값으로 표기해도 됩니다. RGB값이란 빛의 3원색인 red, green, blue값을 순서대로 2개씩 16 진수로 표기한 것입니다. RGB색상 코드표를 참조하세요. 소스를 보면 각각의 속성값을 쌍따옴표(" ")로 묶고 있는데 쓰지 않아도 브라우저가 잘 인식하므로 상관없지만 HTML문법상 써주는것이 정석입니다. RGB값 앞의 샵(#)도 마찬가지구요. 소스에서 각각의 문장끝에 은 뭘까요?

보통의 문서를 작성할때 enter기능을 하는 tag입니다. br tag를 써주지 않으면 모든 문장이 브라우저의 넓이 까지 한줄로 나열되게 됩니다. br 태그는 종료 태그가 없습니다.

Paragraph라는 뜻으로 문단을 구분할때 쓰는 태그입니다. 앞의 문장과 한줄을 띈 후에 다음 문단을 시작하므로 한줄을 띄는 효과를 줍니다. 종료태그는 써도 되고 안써도 상관없지만 정석은 써주는 것입니다.
<pre>
HTML문서를 작성할때 칸띄우기는 한번밖에 적용되지 않습니다. space bar가 한번밖에 안 먹힌다는 뜻입니다. 작성할때 여러칸을 띄웠다고 해도 브라우저 상에서는 한칸으로 밖에 나타나지 않습니다. 이럴때 pre tag를 쓰면 유용합니다. pre란 preformatted의 약자로 공백이나 줄바꿈을 에디터에서 보는 그대로 브라우저 상에서 보여줍니다.

본문의 주석을 달때사용하는 태그입니다. 예전에 작업했던거라든가 문서가 길어지다보면 자기가 만든 문서라해도 소스를 쉽게 알아볼 수 없습니다. 주석을 달아두면 훨씬 보기가 편하겠죠. 주석은 브라우저 상에 나타나지 않습니다.
위 네가지 태그의 사용 예를 보겠습니다.
<html>
<head>
<title> 기본 TAG들 </title>
</head>

<body> 
HTML을 배우자. 
홈페이지를 만들자. 
재미있는 HTML 
 HTML을 배우자. 
 홈페이지를 만들자. 
<pre> HTML을 배우자. 홈페이지를 만들자. 재미있는 HTML </pre>
</body>
</html>
어때요? 아주 쉽죠.... 가장 기본이 되는 태그들 입니다. 결과물과 소스를 잘 비교해보면 쉽게 이해 할수 있을겁니다. 다음장에서는 글자 모양 바꾸기, 선그리기와 body 태그의 속성등을 하겠습니다. 역시 쉽습니다. 싫증내지 말고 차근차근 따라하시길 바랍니다. 빨리 배워서 홈페이지를 만듭시다.