- 1 -
  우리가 사는 집을 가끔씩 수리하듯이 인터
넷상의 홈페이지도 가끔씩 변화를 가져야 한
다. 어느 네티즌이 매일 변화도 없이 똑같은 
홈페이지를 방문하겠는가. 홈페이지를 만드
는 것도 중요하겠지만 홈페이지를 업그레이
드, 즉 변화시키는 것은 더욱 중요하다 하겠
다. 그러나 웹 저작툴로 가볍게 만든 홈페이
지를 수정하기란 그리 만만치 않다. 먼저 홈
페이지의 문법이라 할 수 있는 HTML 택이
라는 것을 알아야 하기 때문이다. 
HTML 문서 작성법
  HTML 문서는 일반 문자들로 이루어진 
텍스트 파일로 존재한다. 그렇기 때문에 윈
도우즈에서 제공하는 메모장을 이용하여 작
성할 수 있다. 유닉스 사용자들은 emacs나 
vi 같은 텍스트 편집기를 이용할 수 있다. 
그러나 웹 저작툴을 이용하면 가장 쉽게 
HTML 문서를 작성할 수 있다. 그러면 
HTML 문서와 일반 텍스트 문서와의 차이
점을 무엇일까? 그것은 HTML 문서안에 군
데군데 퍼져있는 택(Tag)라는 것이다. 택은 
HTML 문서의 모양과 행동 양식을 정해주
는 명령어로서, HTML 문서를 읽는 브라우
저에게 화면에 나타나는 방식을 설명해준다. 
HTML 택 알기
  택은 ’< ... >’로 둘러싸여 다른 문장들과 
구별되어 있다. 그리고 보통 택은 <택>과 
</택>으로 짝을 이루어 사용되며, 이 둘 사
이에 문장이 들어간다. 처음에 나오는 택을 ’
시작 택(Start Tag)'라 부르고 나중에 ’</ 
>’로 둘러싸여 나오는 택을 ’마지막 택(End 
Tag)'이라고 부른다. 물론 시작 택으로만 이
루어진 것도 있다. 다음은 HTML 문서에서 
사용되는 세가지 택 형식이다.
 1. <택> 문장 </택>
   예 : <H1> 문장 </H1>
 2. <택 속성=인자> 문장 </택>
   예 : <A HREF="test.html">문장</A>
 3. <택> 
   예 : <BR>
  HTML에서 사용되는 택은 대소문자가 구
별되지 않는다. 따라서 <H1>과 <h1>은 같
은 택로 취급된다. 그리고 주의해야 할 점은 
HTML 문서에서는 워드 프로세서와는 달리 
탭이나 여러개의 공백을 줄 수 없다는 사실
이다. 즉 단어와 단어 사이에 스페이스 문자
가 10개 있으나 1개 있으나 결과는 똑같다는 
뜻이다.
HTML 문서양식
  모든 HTML 문서는 헤더(Header) 부분과 
몸체(Body) 부분으로 나뉜다. 헤더 부분은 
HTML 문서에 관한 정보를 나타내는데, 보
통 제목을 나타내는 타이틀(Title) 부분이 있
다. 몸체 부분은 HTML 문서의 본문이다. 
다음은 HTML 문서의 전체적인 구조이다.
 <HTML>
 <HEAD>
 <TITLE> HTML 문서의 제목  </TITLE>
 </HEAD>
 <BODY>
 본문
 </BODY>
 </HTML>
PC사랑 기고글 (2화)
홈페이지 기초 다지기
HTML 택 배우기, 핫도그 사용하기
- 2 -
HTML 택을 배우자
문서의 기본 택
 <HTML> ... </HTML>
 <HEAD> ... </HEAD>
 <TITLE> ... </TITLE>
 <BODY> ... </BODY>
: 문서의 시작과 끝
: HTML 문서의 정보
 를 담은 머리말
: HTML 문서의 제목
: HTML 문서의 본문
  HTML 문서를 만들 때 반드시 포함되는 
택이 위의 기본 택이다. <HTML> ... 
</HTML> 택으로 HTML 문서의 시작과 
끝을 알린다. 문서 본문은 <BODY> ... 
</BODY> 택으로 이루어 진다. <TITLE> 
택은 홈페이지에 대한 제목을 부여하기 위해 
사용된다. 홈페이지 제목은 브라우저의 타이
틀 바에 나타난다.
문서 구성 택
 <Hn>... </Hn>
 <P>
 <BR>
 <HR>
 <CENTER> ... </CENTER>
 <!-- ... -->
: 제목 문자의 크기
: 단락 나누기
: 줄 바꾸기
: 수평선 그리기
: 가운데 정렬
: 주석
  
  HTML 문서에서 제공하는 제목 등 머리
글 문자의 크기를 나타내는 택은 <Hn> ... 
</Hn> 이다. 여기서 n은 1~6까지 이며 가장 
큰 크기는 1이고, 기본은 3이다. HTML 문
서에서 다음 줄로 줄을 바꿀 때는 <BR> 택
을 사용한다. <P> 택은 단락이 바뀔 때 사
용한다. 주석 택은  HTML 문서의 내용 설
명 및 문서 상태 등을 기술하기 위한 택으로
서 화면에 보이지 않는다. 
목록을 만들기 위한 택
 <UL> ... </UL>
 <OL> ... </OL>
 <LI>
 <DL> ... </DL>
 <DT>
 <DD>
: 번호 없는 목록 만들기
: 번호 있는 목록 만들기
: 목록 항목 쓰기
: 용어 정의 목록 만들기
: 용어 제목 쓰기
: 용어 설명 하기
  HTML은 번호 있는 목록과 번호 없는 목
록 그리고 정의 목록을 지원한다. 번호 없는 
목록을 만들려면 <UL> 택으로 시작하고 리
스트의 각각 항목에는 <LI> 택을 앞에 표시
해 주면 된다. 모든 항목이 끝나면 </UL> 
택을 이용하여 리스트를 마치면 된다. 번호 
있는 목록도 마찬가지다. 다만 <UL> 택 대
신에 <OL> 택을 사용하는 것만 다를 뿐이
다. 목록 안에 목록을 포함할 수도 있다.
  어떤 용어의 정의를 내릴 때 사용하는 택
이 <DL> 택이다. 정의의 대상이 되는 용어
는 <DT> 택으로 표현하며, 정의에 대한 설
명은 <DD> 택을 사용하여 작성한다. 일반
적인 경우 웹 브라우저는 정의의 대상과 그 
설명들을 각각 다른 줄에 보여 준다.
백견이불여일타?
  ’백문이불여일견’이라는 말이 있다. 더불어 
컴퓨터에서는 ’백견이불여일타’라고 한다. 백
번 보는 것보다 한번 실전하는 것이 좋다는 
말이다. 지금까지 배운 것을 연습해 보는 시
간을 갖자. 웹 저작툴은 조금 후에 사용하기
로 하고 여기서는 윈도우즈가 제공하는 메모
장이라는 프로그램을 이용해서 목록만들기 
택을 연습해 보자.
  먼저 메모장을 이용하여 다음과 같이 작성
한다. 
- 3 -
<!-- HTML 문서 시작하기 -->
<HTML>
<HEAD>
<TITLE>홈페이지 만들기</TITLE>
</HEAD>
<!-- HTML 문서 본문 -->
<BODY>
<H2>HTML 목록 택 연습하기</H2>
<HR>
<P>
번호 없는 목록 만들기
<UL>
<LI>먼저 UL 택을 쓴다.
<LI>각 항목 앞에 LI 택을 쓴다.
<LI>/UL 택을 써서 목록을 끝낸다.
</UL>
번호 있는 목록 만들기
<OL>
<LI>먼저 OL 택을 쓴다.
<LI>각 항목 앞에 LI 택을 쓴다.
<LI>/OL 택을 써서 목록을 끝낸다.
</OL>
용어 목록 만들기
<DL>
<DT>홈페이지
<DD>웹브라우저를 통해 보게 되는 문서이다.
<DT>HTML
<DD>Hyer Text Markup Language의 약자로, 홈페
이지를 만드는 언어이다.
</DL>
</BODY>
</HTML>
  메모장에서 'ex1.html' 이라는 이름으로 
저장한다. 확장자가 반드시 html 또는 htm
으로 끝나야 한다. 저장된 파일을 더블클릭
하여 넷스케이프나 인터넷 익스플로어로 본
다. 일반적인 경우 확장자가 html 또는 htm
인 파일은 자동적으로 등록된 브라우저가 뜨
게 되어있다. 브라우저에서 직접 파일을 읽
을 수도 있다. 넷스케이프(영문판)의 경우에
는 File->Open Page를 차례로 선택한다. 
Open Page라는 대화창이 뜬다. 여기에 직접 
파일경로와 파일명을 기입하거나 ’Choose 
File' 단추를 이용하여 파일 경로를 찾을 수 
있다. 
(그림 1) HTML 목록 택
(그림 2) 넷스케이프에서 파일 열기
HTML 택에 도사가 되자
  간단한 홈페이지는 앞에서 배운 것만 가지
고도 어느 정도 흉내를 낼 수 있을 것이다. 
하지만 글자 모양을 예쁘게 꾸미거나, 문서
를 연결하고 그림을 삽입하는 것을 배우지 
않는다면 어설픈 홈페이지가 되고 말 것이
다. 왜냐하면 홈페이지는 내용도 중요하지만 
디자인도 그에 못지 않게 중요하기 때문이
다. 좀더 힘을 내서 HTML 택을 배워보도록 
하자.
문자 모양 조절하기
  HTML은 단어나 문장을 표현하는데 논리
적 형태와 물리적 형태라는 두가지 방식을 
제공한다. 논리적 형태는 해당하는 택이 지
니고 있는 의미에 따라서 형태가 지정된다. 
반면에 물리적 택은 택이 지니고 있는 내용
에 따라서 형태가 달라진다. 필자의 경우에
는 논리적인 택보다는 물리적인 택을 애용하
는 편이다.
- 4 -
① 문자의 논리적 스타일 택
 <DFN> ... </DFN>    : 단어 정의하기
 <EM> ... </EM>      : 문자 강조하기
 <CITE> ... </CITE>   : 문장 인용하기
 <CODE> ... </CODE>  : 컴퓨터 프로그램 
                          코드나타내기
 <KBD> ... </KBD>    : 키보드의 입력 표현하기
 <SAMP> ... </SAMP> : 일련의 문구자체 표현하기 
 <STRONG> ... </STRONG>
                        : 문자를 강하게 강조
 <VAR> ... </VAR>    : 변수이름 표현하기
② 문자의 물리적 스타일 택
 <B> ... </B>
 <I> ... </I>
 <U> ... </U>
 <TT> ... </TT>
 <BLINK> ... </BLINK>
 <SUB> ... </SUB>
 <SUP> ... </SUP>
: 굵은 글자 쓰기
: 이탤릭 글자 쓰기
: 밑줄 문자 쓰기
: 타자친 것과 같은 효과
: 껌뻑거리는 문자 쓰기
: 아래첨자 쓰기
: 윗 첨자 쓰기
  다음과 같이 메모장을 작성하고 브라우저
로 확인해 보자.
<HTML>
<HEAD>
<TITLE>홈페이지 만들기</TITLE>
</HEAD>
<BODY>
<H2>HTML 문자 모양 조절하기</H2>
<HR>
<B>문자의 논리적 스타일 택</B>
<UL>
<LI><DFN>DFN: 단어 정의하기</DFN>
<LI><EM>EM: 문자 강조하기</EM>
<LI><CITE>CITE: 문장 인용하기</CITE>
<LI><CODE>CODE: 컴퓨터 프로그램 코드 나타내
기</CODE>
<LI><KBD>KBD: 키보드의 입력 표현하기</KBD>
<LI><SAMP>SAMP: 일련의 문구자체 표현하기
</SAMP>
<LI><STRONG>STRONG: 문자를 강하게 강조
</STRONG>
<LI><VAR>VAR: 변수이름 표현하기</VAR>
</UL>
<B>문자의 물리적 스타일 택</B>
<UL>
<LI><B>B: 굵은 글자 쓰기</B>
<LI><I>I: 이탤릭 글자 쓰기</I>
<LI><U>U: 밑줄 문자 쓰기</U>
<LI><TT>TT: 타자친 것과 같은 효과</TT>
<LI><BLINK>BLINK: 껌뻑거리는 문자 쓰기
</BLINK>
<LI><SUB>SUB: 아래첨자 쓰기</SUB>
<LI><SUP>SUP: 윗 첨자 쓰기</SUP>
</UL>
</BODY>
</HTML>
- 5 -
(그림 3) 문자 모양 택
문자 폰트와 기타 택
 <FONT SIZE=n> ... </FONT> 
                       : 폰트 크기 결정
 <PRE> ... </PRE>    : 문단 포맷 그대로 유지하기
 <BLOCKQUOTE> ... </BLOCKQUOTE>
                       : 문장 인용하기
 <ADDRESS> ... </ADDRESS> 
                       : 저작자 주소 쓰기
  HTML이 제공하는 문자 크기는 <FONT 
SIZE=n> 택을 이용해서 나타낸다. 가장 큰 
크기는 7, 가장 작은 크기는 1, 기본은 3이
다. 상대적인 폰트 크기를 나타낼 때는 +와 
-를 사용한다. 
  <PRE> 택은 매우 편리한 택이다. "미리 
정형화 되었음(preformatted)"을 의미하는 
<PRE> 택은 쓴 그대로의 형태를 유지한다. 
앞에서 언급했듯이 추가적인 공백문자들 즉, 
스페이스, 탭, 리턴 문자들은 브라우저에 의
해서 무시된다. 하지만 <PRE>와 </PRE>
안에 들어 있는 추가의 공백 문자들은 그대
로 보존되어 출력된다.
  <BLOCKQUOTE> 택은 문장을 인용할 
때 사용한다. 많은 브라우저들이 주변의 일
반 문장과 구분짓기 위해 인용문이 들여 쓰
여진다.
  <ADDRESS> 택은 문서의 저작자나 저작
자의 주소를 표시할 때 사용한다. 보통의 경
우에는 이탤릭체로 표시된다. 
  다음과 같이 메모장을 작성하고 브라우저
로 확인해 보자.
<HTML>
<HEAD>
<TITLE>홈페이지 만들기</TITLE>
</HEAD>
<BODY>
<H2>HTML 문자 폰트와 기타 택</H2>
<HR>
<B>FONT 택 연습하기</B>
<UL>
<LI><FONT SIZE=1>폰트 크기 1</FONT>
<LI><FONT SIZE=3>폰트 크기 3</FONT>
<LI><FONT SIZE=5>폰트 크기 5</FONT>
<LI><FONT SIZE=-2>상대적인 폰트 크기 
-2</FONT>
<LI><FONT SIZE=+2>상대적인 폰트 크기 
+2</FONT>
</UL>
<B>PRE 택 연습하기</B>
<PRE>
  추가적인    공백을    그대로    출력가능하다.
  리턴 문자도    그대로    출력된다.
</PRE>
<B>BLOCKQUOTE 택 연습하기</B>
<BLOCKQUOTE>
BLOCKQUOTE 택은 문장을 인용할 때 사용한
다.<BR>
많은 브라우저들이 주변의 일반 문장과 구분짓기 위
해 인용문이 들여 쓰여진다.
</BLOCKQUOTE>
<B>ADDRESS 택 연습하기</B>
<ADDRESS>
저작자의 전자우편은 israin@mcr.kaist.ac.kr이다.
</ADDRESS>
</BODY>
</HTML>
- 6 -
(그림 4) 문자 폰트와 기타 택
링크 시키기
  HTML이 갖고 있는 장점은 문서 내부의 
다른 부분이나 혹은 다른 문서들, 이미지들
간에 링크를 만들 수 있다는 점이다. 브라우
저에서는 이러한 텍스트나 이미지 부분을 밑
줄 등을 이용하여 그곳이 하이퍼텍스트 링크
인 것을 알려준다. 하이퍼텍스트 링크를 보
통 줄여서 하이퍼링크 또는 링크라고 한다.
  HTML에서 링크를 위한 유일한 택은 앵
커(anchor; 닻)를 의미하는 <A>이다.
 형식
 <A HREF="파일이름"> ... </A>
① HTML 문서와 연결하기
  ’소개하기’라는 문장에 ’profile.html'이라는 
파일을 링크하고자 한다면 다음과 같이 작성
하면 된다. 
  <A HREF="profile.html">소개하기</A>
상대경로와 절대경로
  파일이름을 쓸 때 두가지 방법이 있다. 그
것은 상대경로와 절대경로이다. 상대경로는 
현재의 문서를 기준으로 하여 그곳에 링크할 
문서가 있는 곳까지의 상대경로를 이용하는 
방법이다. 예를 들어 ’profile'이라는 서브 디
렉토리 안에 ’index.html'이라는 파일을 링크
하려고 하면 다음과 같다.
<A HREF="profile/index.html">소개하기
</A>
  이와 반면에 절대경로라는 것이 있는데 이
는 파일의 경로를 루트(root)부터 써주는 것
이다. 하지만 웹서버의 관점에서 본다면 상
대경로가 더욱 좋다. 파일 경로명은 표준 유
닉스 형식을 따른다. 상위 디렉토리는 ’..’이
며, 디렉토리구분은 ’/’로 한다. 예를 들어 상
위 디렉토리의 ’profile.html'을 링크하고자 
한다면 다음과 같이 하면 된다.
<A HREF="../profile.html">소개하기</A>
  일반적으로 상대경로가 좋은 이유는 
 1) 문서 전체를 다른 위치로 옮길 때 편리
하다.(상대경로 이름은 계속해서 유효하나, 
절대경로 이름은 모두 바꿔주어야 한다.)
 2) 서버에 접속할 때 더 효과적이다.
 3) 타이핑이 줄어든다.
② 다른 서버에 있는 파일과 연결하기
  다른 서버에 있는 파일과 연결하고자 할 
때는 URL이라는 파일위치를 알려주는 주소
를 이용한다. URL은 Uniform Resource 
Locators의 약자로 인터넷상의 주소이다. 그 
표현 방법은 다음과 같다.
접속방법://서버의주소/경로/파일이름
접속방법은 아래중의 하나이다.
 
file
ftp
http
news
telnet
: 현재 시스템 안에 있는 파일
: 익명 FTP(anonymous FTP) 
 서버 안에 있는 파일
: 월드와이드 웹 서버안에 있는 파일
: 유즈넷(usenet) 뉴스 그룹
: 텔넷(telnet)을 기반으로 한 연결
  ’야후’라는 인터넷 홈페이지로 연결하고자 
한다면 다음과 같이 하면 된다.
<A 
HREF="http://www.yahoo.co.kr/index.html"
- 7 -
>야후연결하기</A>
  보통의 경우 'index.html' 파일 이름은 생
략 가능하므로 다음과 같이 쓸 수 있다.
<A HREF="http://www.yahoo.co.kr">야후
연결하기</A>
③ 다른 문서내 또는 현재 문서내 특정부분
과 연결하기
  이러한 앵커를 지명 앵커(named anchor)
라 부른다. 그 이유는 링크를 만들기 위해서 
HTML 문장 제목을 문서 내부에 삽입해야 
하기 때문이다. 즉 가고자 하는 부분에 <A 
NAME="문장제목">택을 사용한다.
다른 문서내 특정 부분과 연결하기
 형식
 <A HREF="파일이름#문장제목"> ... </A>
 <A NAME="문장제목"> ... </A>
  문서 "index.html" 에서 다른 문서 
"profile.html"내 특정부분 "취미” 항목으로 
링크하려고 하자.  다음과 같이 작성하면 된
다.
* index.html 문서:
    <A HREF="profile.html#취미">취미활동</A>
* profile.html 문서내 가고자 하는 부분:
    <A NAME="취미”>나의 취미활동</A>
(그림 5) 다른 문서내 특정 부분과 연결하기
현재 문서내 특정 부분과 연결하기
 형식
 <A HREF="#문장제목"> ... </A>
 <A NAME="문장제목"> ... </A>
  현재 문서내의 특정 부분으로 연결할 때에
는 앞의 경우에서 ’파일이름’만 생략하면 된
다. 예를 들어 현재 문서 "profile.html"에서  
특정부분 "취미” 항목으로 링크하려면 다음
과 같이 작성하면 된다.
* 현재 문서(profile.html):
    <A HREF="#취미">취미활동</A>
* 가고자 하는 부분:
    <A NAME="취미”>나의 취미활동</A>
(그림 6) 현재 문서내 특정 부분과 연결하기
④ 전자우편 보내기
 <A HREF="mailto:전자우편주소">이름</A>
  하이퍼링크의 mailto 속성을 이용하여 홈
페이지를 방문한 사람들이 손쉽게 편지를 보
낼 수 있게 할 수 있다. 예를 들어 필자에게 
편지를 보내고자 한다면 아래와 같이 작성된
다.
<A HREF="mailto:israin@mcr.kaist.ac.kr">
필자에게 편지쓰기</A>
그림 삽입하기
 형식
 <IMG SRC="그림파일">
 <IMG SRC="그림파일" HEIGHT=높이 WIDTH=너
비>
 <IMG SRC="그림파일" ALIGN=정렬방법>
  문서 내부에 그림을 표현하는 방법은 
<IMG SRC="그림파일"> 택을 사용하는 것
이다. 그러나 HTML에서 가능한 그림 파일 
포맷은 GIF와 JPEG 뿐이다. ”photo.gif"라는 
그림을 문서내 포함하려면 다음과 같이 작성
한다.
<IMG SRC="photo.gif">
  아래와 같이 그림의 높이와 너비를 지정함
- 8 -
으로써 그림 크기를 바꿀 수 있다.
<IMG SRC="photo.gif" HEIGHT=100 
WIDTH=65>
  그림 옆에 문자를 쓸 경우 문자의 정렬 방
법을 아래와 같이 지정해 줄 수 있다. 
  ALIGN=TOP        : 그림 윗줄에 정렬하기
  ALIGN=BOTTOM   : 그림 아랫줄에 정렬하기
  ALIGN=MIDDLE    : 그림 가운데에 정렬하기
(그림 7) 그림과 문자를 함께 정렬하기
표 만들기
  HTML에서 표 만들기 택은 매우 중요하
며 많이 쓰인다. 표는 행과 열로 이루어져 
있다. 행과 열을 담고 있는 것들을 설명하는 
머리 부분 헤더가 있고, 각각의 항목을 위한 
방(셀 ; Cell)이 있다.
 <TABLE> ... </TABLE> : 표 작성
 <CAPTION> ... </CAPTION> : 표 제목 
 <TH> ... </TH> : 표 머리부분
 <TR> ... </TR> : 표의 각 열(줄)
 <TD> ... </TD> : 표의 각 항목
  표 만들기는 <TABLE> 택으로 만든다. 
테두리의 두께는 BORDER="두께" 형식으로 
나타낸다. 예를 들어 두께에 ’0’인 표를 만들
고자 할 때는 다음과 같다.
<TABLE BORDER="0">
  표에 제목을 붙이고자 할 때에는 
<CAPTION> 택을 이용한다. 기본 위치는 
표 윗 부분이며 ALIGN=BOTTOM 속성을 
이용하여 표 아래 부분으로 정렬시킬 수 있
다.
  다음은 <TH> ... </TH>, <TR> ... 
</TR>, <TD> ... </TD> 택에서 사용되는 
속성이다. 이를 이용하면 자신이 원하는 모
든 형태의 표를 만들 수 있다.
 ALIGN (LEFT, CENTER, RIGNT) 
: 방의 수평 정렬
 VALIGN (TOP, MIDDLE, BOTTOM> 
: 방의 수직 정렬
 COLSPAN=n: 한 방이 차지하는 행수(n개)
 ROWSPAN=n: 한 방이 차지하는 열수(n개)
 NOWRAP: 방에서 행바꿈 제한
  앞에서 이야기했듯이 ’백견이불여일타’이
다. 다음과 같이 메모장으로 작성한 후 웹브
라우저로 확인해 보자.
- 9 -
<HTML>
<HEAD>
<TITLE>홈페이지 만들기</TITLE>
</HEAD>
<BODY>
<CENTER>
<H2>HTML 표 만들기</H2>
<HR>
<TABLE BORDER=1>
<CAPTION>표 만들기</CAPTION>
<TR>
<TH ALIGN=CENTER>요소</TH><TH 
ALIGN=CENTER>내용</TH>
</TR>
<TR>
<TD>TABLE ... /TABLE</TD>
<TD>표 작성하기</TD>
</TR>
<TR>
<TD>TH ... /TH</TD>
<TD>표 머리 부분</TD>
</TR>
</TABLE>
<BR>
<BR>
<TABLE BORDER=3>
<CAPTION ALIGN=BOTTOM>표 만들기 - 열 합
치기</CAPTION>
<TR>
<TH>제목</TH><TH>종류</TH>
</TR>
<TR>
<TD ROWSPAN=2>HTML 문자 모양조절하기
</TD>
<TD>문자의 논리적 스타일 택</TD>
</TR>
<TR>
<TD>문자의 물리적 스타일 택</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
(그림 8) 표 만들기 택
기타 유용한 택
홈페이지에 배경 그림 넣기 :
 <BODY BACKGROUND="파일이름.gif">
홈페이지에 배경색 넣기 :
 <BODY BGCOLOR="#RGB값">
글자색, 링크색 바꾸기 :
 <BODY TEXT="#RGB값" LINK="#RGB값”>
  홈페이지에 배경 그림을 넣고자 할 때는 
<BODY>택에 BACKGROUND 속성을 첨가
해 주면 된다. 배경 그림은 GIF 파일만 가능
하며, 파일 크기가 작은 것이 좋다. 홈페이지
에 배경색을 지정할 수 있다. 배경색은 RGB 
값으로 표현된다. RGB값은 여섯자리의 숫자
로 두자리씩의 단위 빨강, 녹색, 그리고 파란
색의 조합이다. 각각의 숫자는 16진수이다. 
예를 들어 ’FF0000'는 밝은 빨강을 나타내
고, ’FFFFFF'는 흰색, ’000000’은 검정색을 
나타낸다. RGB값 대신에 ’red', 'green'등과 
같이 직접 색 이름을 지정해 줄 수도 있다.
  지금까지 배운 HTML 택을 적절히 잘 활
용한다면 웹 저작툴의 도움이 없이도 훌륭한 
홈페이지를 만들 수 있다. 하지만 쉬운 길을 
놓고 굳이 어려운 길을 돌아갈 필요는 없지 
않은가? 웹 에디터의 최강자라 불리는 핫도
- 10 -
그라는 프로그램을 이용하자. 웹 저작툴을 
이용한다고 해서 지금까지 배운 HTML 택
이 필요 없는 것은 아니다. HTML 택은 웹
에디터로 홈페이지를 만들 때에도 필히 알아
야 한다. 또한 나중에 홈페이지를 업그레이
드 할 때에 필요하다.
웹 에디터의 최강자 - 핫도그 프로 4.5
  지난 호에서 설명하였듯이 핫도그(Hot 
Dog)는 소세지사에서 만든 프로그램으로 홈
페이지를 쉽게 만들도록 도와주는 도구이다. 
국내의 나모 웹에디터와 같은 위지윅
(WISIWYG) 프로그램과는 달리 택입력 등
의 수동작업이 많이 간다. 하지만 그만큼 정
밀성과 강력함이 뛰어나다. 
  핫도그 프로그램은 쉐어웨어 프로그램으로 
통신상에서 쉽게 구할 수 있다. 인터넷에서
는 http://www.sauage.com에서 만날 수 있
다. 핫도그 프로그램을 실행시키면 세 개의 
창을 만나게 된다. 좌측은 HTML 택의 목록
이 나와 있고, 우측 상단에는 HTML 작성 
화면, 그리고 우측 하단에는 우측 상단에서 
작성한 HTML 문서의 화면이 나온다. 리본 
막대에서 ’새파일’ 아이콘을 클릭한다. 또는 
File->New를 선택하여 ’새파일’을 연다. 그
러면 마찬가지로 세개의 창이 뜬다. 우측 상
단에는 간단하지만 꼭 필요한 기본적인 
HTML 택이 입력되어 있다. 앞에서 배운 택
을 바로 입력하면서 홈페이지를 만들거나 왼
쪽 HTML 택 목록에 있는 택을 클릭하면서 
홈페이지를 만들 수 있다. 
(그림 9) 핫도그 초기화면
  먼저 <TITLE>옆의 
type_Document_Title_here를 지우고 자신의 
홈페이지 타이틀을 입력한다. 여기에 입력하
는 내용은 브라우저 맨위, 즉 타이틀바에 나
타난다. 좌측 창의 HTML 택 목록에서 택을 
선택하면 매우 편리하게 입력할 수 있다. 예
를 들어 좌측 택 목록 창에서 IMG 택을 선
택한다. 그러면 연달아서 IMG 택에 관련된 
다른 창이 뜬다. SRC를 선택하고 삽입할 그
림 파일을 입력한다. 이 모든 과정이 단순히 
마우스를 클릭함으로써 이루어진다.
(그림 10) 핫도그에서 그림 삽입화면
- 11 -
  상당히 많은 것을 배웠다. 하지만 여기서 
배운 것보다도 훨씬 많은 HTML 택이 있다. 
그러나 여기서 배운 것만을 가지고도 훌륭한 
홈페이지를 꾸밀 수 있다. 다음 호에서는 홈
페이지를 더욱 화려하고 멋지게 가꿀 수 있
는 방법과 홈페이지를 만들 때 주의해야 할 
점에 대해서 알아보도록 하자. 
소재우 
jwso@sogang.ac.kr / 현재