진보네트워크 '참세상' 진보 교육센터입니다.

- 웹페이지제작 - 포토샵
- 서버관리 - 정보기본권

홈페이지와 HTML
홈페이지의 구조
문단 꾸미기
텍스트 꾸미기
색, 배경, 이미지 사용하기
링크 만들기
표만들기
프레임사용하기

1. 홈페이지와 HTML

인터넷이란 단어에 대한 정의는 딱히 규정된 것은 없지만 전세계에 존재하는 수많은 컴퓨터들이 서로 연결된 컴퓨터 네트워크를 말한다고 생각하면 됩니다. 흔히들 인터넷이란 단어와 혼동되어 사용하는 WWW(World Wide Web)은 인터넷에 연결된 각 컴퓨터에 저장된 정보들을 거미줄(Web)처럼 연결하여 쉽고 빠르게 원하는 정보들(텍스트, 그래픽, 사운드, 동영상 등)을 찾도록 하기 위해 고안된 서비스 방식을 의미합니다. 그외의 인터넷 서비스 중에서 우리가 주로 사용하는 것은 Email과 FTP 서비스가 있지요. WWW는 웹페이지 또는 홈페이지라고 불리는 문서를 기본 구성단위로 합니다.
웹페이지에는 정보 전달의 가장 기본이 되는 텍스트는 물론 그래픽, 소리, 동영상, 소프트웨어, 프로그램 등 컴퓨터로 제작된 거의 모든 정보들을 삽입하거나 연결할 수 있습니다. 그렇게 됨으로써 우리는 집에 앉아 전세계의 사람들이 만들어 놓은 정보들 중에 우리에게 필요한 정보를 웹브라우저 - 웹페이지를 보여주는 소프트웨어, 인터넷 익스플로러나 넷스케이프 네비게이터 - 라는 소프트웨어를 통해 손쉽게 얻을 수 있게 되는 것이죠.
이러한 웹페이지를 만든다는 것은 HTML(HyperText Markup Language)이라는 프로그래밍 언어를 사용하여 문서를 제작함을 의미합니다. 비록 HTML이 프로그래밍 언어라고는 하지만 전문 프로그래머들이 사용하는 C 언어와 같이 까다로운 언어와는 성격이 다르며, 단순히 정해진 기능을 하는 코드들을 나열하고 원하는 텍스트를 입력하는 것에 불과합니다.

HTML은 다음 4가지 종류의 코드들로 구성된 하나의 집합체를 의미합니다.

1.1. 요소(Elements)
HTML 명령을 의미합니다. 시작태그와 끝내기 태그를 가질 수 있으며 컨테이너(시작태그와 더불어 끝내기 태그로 둘러싸인 요소)라면 시작태그와 끝내기 태그 사이에 텍스트나 다른 요소를 가질 수 있습니다. 예를 들어 <TITLE></TITLE>이라는 요소는 웹브라우저에게 제작된 웹페이지의 제목을 웹브라우저가 제목표시줄에 표시하도록 하는 컨테이너 요소입니다. 물론 <IMG>처럼 시작 태그만 있는 요소도 있습니다.

1.2. 태그(Tags)
태그는 요소의 일부로서 시작태그와 끝내기 태그 두 종류가 있습니다. 시작태그는 요소를 시작하며 끝내기 태그는 요소를 끝낸다는 것은 쉽게 짐작할 수 있겠죠? 앞에서도 이야기했지만 모든 요소들이 끝내기 태그로 끝나는 것은 아닙니다.

1.3. 속성(Attributes)
속성은 요소의 시작 태그 내에 사용하는 것으로 명령을 구체화시키는 것입니다. 예를 들어 텍스트의 폰트 지정을 위해 사용하는 <FONT></FONT> 요소는 size, color, face 등의 속성을 갖는데 FONT <size=5>처럼 시작태그 내에 사용되며 속성과 속성값 사이에는 = 이라는 부호를 사용하여 연결합니다. 속성은 보통 속성값을 갖지만 noshade 등 일부 속성은 속성값을 갖지 않으니 유의하시기 바랍니다.

1.4. 속성값(values)
속성값은 속성과 관련된 값을 말합니다. <BR clear="left">에서 " "내에는 right나 all도 사용될 수 있는데 이들은 속성 clear의 속성값이며 속성과 속성값은 등호 '='에 의해 구분됩니다. 속성값 중에는 속성값을 " " 내에 넣는 것과 size=5처럼 넣지 않는 것이 있으므로 속성마다 사용여부를 잘 알아두어야 합니다.

위로

2. 홈페이지의 구조

<HTML>
<HEAD>
</HEAD>
<BODY>
여기에 웹페이지에 보이는 본문이 들어갑니다. </BODY>
</HTML>

홈페이지는 <HTML>로 시작하여 </HTML>로 끝나게 됩니다. 반드시 사용해야 하는 것은 아니지만 일반적으로 사용하는 것이 좋습니다.

2.1. HEAD 요소
문서의 머리부분은 <HEAD>로 시작하여 </HEAD>로 끝나고 제목(<TITLE>요소)은 반드시 이 요소 내에 사용하여야 합니다. 제목은 웹브라우저 상단의 제목표시줄에 나타나는데 문서의 특징을 가장 적절히 표현할 수 있는 제목을 사용하는 것이 좋겠죠. 이 외에도 뒤에서 배우시게 될 스타일시트와 자바스크립트 요소들이 이 안에서 사용됩니다.
타이틀태그는 head 부분에 입력하며,이렇게 쓸 수 있습니다. 타이틀 요소는 웹페이지에 본문이 아니라 제목표시줄에 보여집니다.

<head>
<table>html 연습페이지입니다.</table>
</head>

2.2. BODY 요소
<BODY> </BODY> 요소 내에는 브라우저에서 보이게 되는 문서의 모든 내용이 들어가게 됩니다. 그리고 <BODY> 태그 내에는 다음과 같은 몇 가지 속성을 사용하여 웹브라우저 화면에 나타날 텍스트의 색상과 배경그림을 정의할 수 있습니다.

<BODY bgcolor="#FFFF80" text="#FF00FF" link="#000000" vlink="#808080" alink="#00FF00">
</BODY>

여기서 각 속성이 나타내는 것은 다음과 같습니다.

bgcolor 웹브라우저 화면의 바탕색입니다.
text 화면에 나타나는 글자의 색깔입니다.
link 링크로 연결된 하이퍼텍스트 글자의 색깔입니다. 그림에 링크를 걸었을 경우 테두리의 색깔로 나타납니다.
vlink 한번 방문했던 링크의 색깔을 나타냅니다.
alink 링크를 마우스로 클릭했을 때의 색깔을 나타냅니다.

이들 속성과 속성값은 = 부호로 연결되며 " " 내에 사용하는 속성값으로는 RGB값을 사용하게 됩니다. RGB값 앞에 # 기호를 넣어준다는 것에 유의합니다. text의 기본값은 000000이며 link의 기본 색상은 0000FF, vlink의 기본값은 808080입니다. 즉 이 속성들을 사용하지 않았다면 웹브라우저 상에 텍스트는 검은색으로 링크는 파란색으로, 한번 방문했던 링크는 보라색으로 나타나게 된다는 것을 의미하죠. 보다 정확하게 말하자면 웹브라우저의 설정값을 기본값으로 합니다. RGB값에 대한 자세한 설명은 다음으로 미루도록 하죠.

위로

3. 문단 꾸미기

3.1. 제목 - HEADER 요소 <Hn></Hn>
<Hn></Hn>은 웹페이지의 제목으로 사용될 텍스트의 크기를 지정할 때 사용하는 요소입니다. n 값은 1∼6까지 사용할 수 있는데 다른 속성값과는 달리 숫자가 커질수록 글자의 크기는 작아집니다. 글자체가 고딕체임을 유의해서 보도록 합니다.

align 속성
문서의 제목을 웹브라우저 화면의 좌, 우 또는 중간에 배열할 수 있는데 이런 기능을 위해 사용하는 속성이 align 속성입니다. align 속성은 right, center, left의 값을 가질 수 있으며 이 속성의 기본값은 left입니다. 즉 이 속성을 사용하지 않은 경우 제목은 화면의 왼쪽에 나타나게 됩니다.

<h1 align=right> This is a heading1 </h1>
<h2 align=right> This is a heading2 </h2>
<h3 align=center> This is a heading3 </h3>
<h4 align=center> This is a heading4 </h4>
<h5 align=left> This is a heading5 </h5>
<h6 align=left> This is a heading6 </h6 >

3.2. 문단 나누기 - <P>와 <DIV>
<P> 태그를 이용하여 문단과 문단 사이의 간격을 줄 수 있습니다. 뒤에서 배우게 되는 <BR>태그가 줄바꿈의 기능만을 하는데 비해 <P>태그는 줄바꿈과 한 개의 빈줄을 만들어주는 역할을 동시에 합니다.
최근의 HTML 버전에서는 <P> 태그도 컨테이너로 되어 있어, 끝내기 태그를 갖고 있지만 끝내기 태그 사용여부가 기능상의 차이가 있는 것은 아닙니다. <DIV> 태그는 문단을 나누지만 한 개의 빈줄을 만들어주지 않는 점에서 <P>태그와는 차이가 있습니다. 뒤에서 배우시게 되는 <BR>태그를 사용하기보다는 <DIV>태그를 이용해서 되도록 줄을 나누시기 바랍니다. <DIV align=left>와 같이 쓰여서 문단을 정렬할 수 있다는 큰 장점이 있기 때문입니다.

3.3. 목록 만들기
전달하고자 하는 내용을 일목 요연하게 전달하기 위한 아주 유용한 수단이 됩니다. 실제로 지금처럼 홈페이지들이 화려해지기 전에는 텍스트 위주의 홈페이지가 주가 되었고, 텍스트 편집을 위해서 자주 사용되었던 요소입니다. 물론 지금도 그 중요성은 결코 뒤지지 않죠.

3.3.1. 순서없는 목록 만들기
순서가 없는 목록을 만들 때 사용하는 요소는 <UL></UL>이며 시작태그와 끝내기 태그 사이에 각 항목을 표시하는 태그인 <LI>를 사용하게 됩니다. 각 항목들이 <BR> 태그를 사용하지 않아도 다음 줄에 표현되는 점에 유의합니다.

type 속성
목록의 각 항목 앞에 사용할 부호의 종류를 결정짓는 속성입니다. 속성값으로는 disc, square, circle을 가질 수 있으며, 각각 검은 점, 사각형, 원으로 표현됩니다.

3.3.2. 순서있는 목록 만들기
<OL></OL>요소를 사용하며 각 항목을 나타낼 때 사용하는 태그는 순서없는 목록에서와 동일하게 <gLI>g 태그를 사용합니다. <gOL>g내에는 Type과 Start 두 개의 속성을 사용할 수 있습니다.

type 속성
순서가 없는 목록을 설명드릴 때 말씀드린 것과 같이 각 항목 앞에 표시할 부호의 종류를 지정할 때 사용하는 속성으로 이 속성은 속성값으로 1, A, a, I, i를 가질 수 있습니다. 각각 숫자, 알파벳 대문자, 알파벳 소문자, 로마숫자 대문자, 로마숫자 소문자를 표현하게 됩니다. <p> start 속성
목록의 각 항목 앞에 붙여질 부호가 몇 번째부터 시작할 것인지를 지정할 때 사용합니다. 다음에 보일 예제에서처럼 목록번호를 이어서 사용해야 할 때 이용되는 속성입니다.

3.3.3. 정의 목록(Definition List) 만들기
정의 목록이란 용어를 정의할 때와 같이 용어와 용어를 설명 한 부분을 구분되게 표현할 수 있는 방법입니다. 정의목록을 만들 때 사용하는 요소는 <DL></DL>이며 항목을 나타내는 태그는 <DT>와 <DD> 두 가지가 있습니다. 설명하고자 하는 용어 부분에 사용하는 태그가 <DT>, 설명문에 사용할 태그가 <DD>입니다.

<HTML>
<HEAD>
<TITLE>목록 꾸미기</TITLE>
</HEAD>
<BODY>
도종환님의 시집
<OL type=1>
<LI>고두미 마을에서
<LI>접시꽃 당신</OL>
강은교님의 시집
<UL>
<LI type=square>虛無集
<LI type=circle>貧者日記
<LI type=disc>그대는 깊디깊은 강</UL>
도종환님의 시집(계속...)
<OL type=I start=3>
<LI>내가 사랑하는 당신은
<LI>지금 비록 너희 곁을 떠나지만</OL>
<DL>
<DT>순서있는 목록
<DD><OL>태그 사용
<DT>순서없는 목록
<DD><UL>태그 사용</DL>
</BODY>
</HTML>

3.4. 인용문 처리 - <BLOCKQUOTE>
다른 출처로부터 인용된 문서를 나타낼 때 쓰이는 요소입니다. 문서의 내용이 아래와 같을 때 화면상으로는 다음과 같이 나타나게 됩니다.

다음은 안도현님의 겨울밤의 시쓰기 중 한 구절입니다.<P>
<blockquote>다시 볼펜을 잡아야겠다.
낮은 곳으로 자꾸 제몸을 들이미는 눈발이<BR>
오늘밤 내 사랑하는 사람의 이불이 되었으면 좋겠다라고<BR>
나는 써야겠다, 이 세상의 한복판에서<BR>
지금 내가 쓰는 시가 밥이 되고 국물이 되도록<BR>
끝없이 쓰다보면 겨울밤 세 시나 네 시쯤<BR>
내방의 꺼지지 않는 불빛을 보고 누군가 중얼거릴 것이다<BR>
살아야겠다고, 흰 종이 위에다 꼭꼭 눌러<BR>
이 세상을 사랑해야겠다고 쓰고 또 쓸 것이다.<P></BLOCKQUOTE>

3.5. 있는 그대로 보여주기 - <PRE>
<PRE> </PRE>사이에 위치한 문서의 내용을 공백과 빈줄, 탭이 인식되어 있는 문서를 그대로 보여줍니다. 일반적인 HTML문서에서의 공백과 빈줄은 그리 중요하지 않다고 앞서 말한 바 있는데, 필요에 의해서 공백과 빈줄을 넣어 줘야 할 경우에는 <PRE> 태그를 사용하여 표시하면 아주 편하지요. 그러나, 태그 형태로 되어 있는 것은 태그로 인식한다는 점을 반드시 기억하시기 바랍니다.

3.6. Line Break 태그 - <BR>
HTML 문서에서는 가 공란의 의미밖에 없으며 줄바꿈의 기능을 하지 않습니다. HTML 문서에서 줄을 바꾸기 위해서는 <BR>태그를 사용하여야 합니다.

3.7. 수평선 긋기(Horizonal Rule) - <HR>
단락을 구분하는 방법은 빈줄을 만들어 놓는 것도 좋은 방법이지만 내용이 달라질 때는 확실한 구분선을 그어줄 필요가 있는 경우도 있습니다. 그런 경우에 사용하는 것이 <HR>태그이다. 즉 <HR> 태그는 수평선을 그어주는 기능을 하게 되며 이 태그는 align, size, width, noshade 네 개의 속성을 가질 수 있습니다.

size 속성
Size 속성은 수평선의 굵기를 표현해 주는 속성입니다. 속성의 값으로 사용하는 숫자는 픽셀값이며 이 속성을 사용하지 않았을 경우 선의 굵기는 2 픽셀이 됩니다.

width 속성
수평선의 가로 크기를 지정할 때 사용하는 속성입니다. 값을 표현하는 방법에는 두가지 방법이 있는데, 픽셀값으로 나타내는 방법(절대크기 지정)과 화면에 대한 비율로 나타내는 방법(상대크기 지정)이 그것이죠. 픽셀을 지정할 경우 어떤 웹브라우저에서든 동일한 폭으로 수평선이 그어지지만 %값을 사용한 경우는 웹브라우저 화면의 해상도에 따라 수평선의 크기가 변화될 수 있습니다.

align 속성
수평선도 역시 align 속성을 사용하여 원하는 위치에 배열할 수 있는데 값으로 left, right, center, justify 등을 가질 수 있으며 이들은 각각 수평선을 화면의 왼쪽, 오른쪽, 중앙 및 앞의 배열방식에 따라 위치시키게 됩니다.

noshade 속성
이 속성은 웹브라우저 화면에 그어진 수평선이 먹선이 되게 하는 기능이며 이 속성은 속성값을 갖지 않는다는 점에 주의합니다.

다음 예제를 보면서 각 효과의 차이점을 살펴보도록 합니다.

3.8 특수문자 입력하기
html문서에서는 빈칸이나 태그에 쓰이는 <, > 등은 특수문자로 취급하고 있습니다. 빈칸은  으로 입력하고 <는 <, >는 >로 나타냅니다.

위로

4. 텍스트 꾸미기

4.1. 구절, 단어 꾸미기
문자의 모양을 바꿀 때 사용하는 태그들입니다. 논리적 스타일과 물리적 스타일로 나눌 수 있는데 논리적 스타일은 문자 모양의 형식을 특정한 형태로 지정하는 것이 아니라 단지 어디를 강조할 것인가만 정하는 것이고 물리적 스타일은 원하는 글자 모양을 직접 지정하는 방식이 됩니다. 물리적 스타일로도 원하는 만큼 나타낼 수 있으므로 물리적 스타일을 많이 씁니다.

논리적 스타일

<cite> 인용구, 일반적으로 이탤릭체로 나타납니다.

<code> mono-dpaced서체로 나타납니다.

<em> 강조문구. 일반적으로 일탤릭체로 나타납니다.

<kbd> 사용자에 의한 텍스트 입력을 나타냅니다.

<samp>Literal character들을 나타냅니다.

<strong> 강한 강조. 굵게 나타납니다.

<var> 변수이름을 나타내며, 이탤릭채로 표시됩니다.

<b> 볼드체로, 굵게 나타납니다.
<i> 이탤릭체로, 기울여진 글씨로 나타납니다.
<tt> 텔레타이프체로 나타납니다.

<h2>Idomatic Elements</h2><BR>
<dfn>Word Definition</dfn><br>
<em>Word Emphasis</em><br>
<cite>citation of word</cite><br>
<code>computer program code</code><br>
<kbd>keyboard input</kbd><br>
<samp>some sample</samp><br>
<strong>strong sample</strong><br>
<var>variable name</var><br>
<br>
<h2>Typographic Elements</h2>
어떠한 글자를 강조를 하려면 <b>태그</b>를 써야 하고, 이탤릭체로 쓰려면<i>태그</i>를 써야 하고 텔레타이프체로 쓰려면 <tt>태그</tt>를 써야 한다.

4.2. FONT 요소
<FONT> 요소는 시작태그와 끝내기태그 사이에 입력된 텍스트의 폰트 크기, 색상, 글자체를 지정하기 위해 사용하는 요소입니다. 이 요소는 size, color, face의 속성을 가질 수 있습니다.

size 속성
size 속성은 글씨의 크기를 지정할 때 size=n의 형식으로 사용되는데 속성값으로는 1∼7까지의 숫자를 사용할 수 있습니다. Header 요소에서와는 달리 속성값이 커질수록 글자의 크기는 커집니다. 이 속성의 기본값은 3이 됩니다. basefont 크기가 지정되어 있다면 +n 또는 -n의 형식으로 basefont 크기에 대한 상대적 크기로 폰트의 크기를 정의할 수 있습니다.

color 속성
FONT 요소의 시작태그와 끝내기 태그 사이에 입력된 텍스트의 색상을 표현하기 위해 사용하는 속성입니다. FONT 요소의 시작 태그에 color라는 속성을 사용하고 속성값으로 색상의 RGB값을 사용하는 형식을 취합니다. RGB값 앞에 #이라는 부호가 있다는 점을 다시 한번 상기해 보도록 하죠.

<FONT color="#FFFF00">색상을 지정할 텍스트</FONT>

face 속성
글자체를 지정하기 위해 사용하는 속성으로 face="궁서체"와 같은 코드를 FONT 요소의 시작태그 내에 사용해 주면 됩니다. "궁서체, 돋움체, 굴림체"와 같이 ","를 사용하여 여러 개를 동시에 지정해 줄 수 있는데 이 경우 웹브라우저는 첫 번째의 폰트로 나타내되 문서 방문자의 컴퓨터가 첫 번째로 지정한 폰트를 갖고 있지 않다면 다음 폰트로 나타내게 됨을 의미합니다. 실제로 텍스트의 글자체를 여러 가지로 주는 경우도 있지만, 대부분은 웹브라우저의 버전에 탓에 효과를 보지 못하는 경우가 많습니다. 특히 넷스케이프 네비게이터의 경우는 대부분의 효과가 사라지곤 하죠. 이런 기능상의 제약 탓에 실제 홈페이지에서의 화려한 글씨들은 대부분 그래픽 프로그램으로 작성한 이미지를 이용해서 나타냅니다.

4.3. 기본 폰트 크기의 설정 요소 - BASEFONT
웹브라우저 상에 나타날 텍스트의 크기를 전체적으로 기본값보다 적게 하거나 크게 하고자 한다면 <BASEFONT>라는 요소를 사용하는데 size라는 속성을 사용하여 글자의 크기를 지정해 줍니다.

<BASEFONT SIZE=5>

이 요소는 끝내기 태그를 갖지 않으며 이 태그를 사용하지 않을 경우 웹브라우저에 나타나는 텍스트의 기본 크기는 3이 됩니다.

위로

5. 색, 배경, 이미지 사용하기

5.1. RGB 색상 코드
RGB값이란 RED(빨강), GREEN(녹색), BLUE(청색)의 세 가지 색상을 16진수로 표현한 값을 의미합니다.16진수는 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F로 각각의 색상을 00에서 FF까지 총 256색상을 표현할 수 있고 이들을 조합함으로써 나타내어지는 색상코드를 말합니다. 다음의 간단한 예를 통해서 이해해 보시기 바랍니다.

검은색 : 000000
흰 색 : FFFFFF
적 색 : FF0000
녹 색 : 00FF00
청 색 : 0000FF

모든 색상들에 대한 RGB값을 갖고 있을 수는 없으므로 색상표를 갖고 있거나 인터넷상에서 색상코드를 제공하는 사이트들을 참조하면 됩니다.

5.2. 배경이미지 사용하기 - Background 속성
이 속성을 <BODY> 태그 내에 다음과 같이 사용하여 바탕화면으로 사용할 이미지를 지정할 수 있습니다.

<BODY background="backimage.jpg">

여기서 " "내에는 바탕화면으로 사용할 이미지(jpg 또는 gif) 파일명을 적어주면 됩니다.

위와 같은 이미지를 바탕화면으로 사용하면 이 이미지들이 다음 그림에 보는 바와 같이 연속적으로 배열되어 나타나게 됩니다.

5.3. 이미지 삽입 - <IMG>
웹페이지에 이미지를 삽입할 때 사용하는 태그는 <IMG>이며 끝내기 태그는 없습니다. src를 사용하여 다음과 같이 웹페이지에 삽입할 이미지의 위치와 파일명을 지정하게 됩니다.

<IMG src="이미지 파일의 경로">

여기서 src=" "을 통해 이미지 파일의 위치를 나타내는 방법에는 상대경로와 절대경로가 있습니다. 상대경로란 이미지 파일을 삽입할 웹페이지 파일과의 상대적 위치로 표시하는 방법으로 이미지 파일이 웹페이지 파일과 같은 디렉토리에 있는 경우, 하위디렉토리에 있는 경우, 상위디렉토리에 있는 경우 각각 다음과 같이 표현합니다.

<IMG src="my_img.gif">
<IMG src="images/my_img.gif">
<IMG src="../my_img.gif">

절대경로란 다음과 같이 이미지 파일이 있는 절대주소를 적어 주는 방법이죠.

<IMG src="http://homepage.jinbo.net/~orpheo/images/my_img.gif">

align 속성
웹페이지에 삽입된 이미지와 텍스트 또는 다른 이미지들 사이의 상대적 위치를 표현하는데 사용하는 속성이 align 속성입니다. 속성값으로 left를 사용한 경우 이미지가 웹브라우저 화면의 왼쪽 편에 나타나고 텍스트는 그림 오른쪽의 상단부터 나타나게 되지요. right를 속성값으로 사용한 경우는 삽입된 이미지가 웹 브라우저 화면의 오른쪽에 나타나고 텍스트가 이미지의 왼쪽 상단부터 나타나게 됩니다. center를 속성값으로 사용한 경우는 삽입된 이미지가 화면 왼쪽에 나타나고 그림 오른쪽 편의 중간부위에 한 줄의 텍스트가 나타나고 이미지의 다음 줄에 계속되는 텍스트가 나타나게 됩니다. 이 속성을 사용하지 않은 경우는 왼쪽에 이미지가 나타나고 이미지의 최하단부터 텍스트가 연속적으로 나타나는 것을 볼 수 있습니다.

align 속성의 속성값으로는 top, middle, bottom도 사용될 수 있는데, 세 경우 모두 삽입된 이미지는 웹브라우저의 왼쪽 편에 나타나고 오른쪽에는 텍스트가 나타나게 됩니다. 텍스트 한 줄만이 이미지의 오른쪽에 나타나고, 위치가 각각 이미지의 상단, 중간, 하단이 되는 점을 유의해서 보도록 합니다.나머지 줄들은 모두 이미지의 하단부터 나타나게 됩니다.

이 방법으로는 레이아웃을 자유롭게 짤 수 없기 때문에 보통 뒤에 배우는 표를 이용해서 레이아웃을 짜게 됩니다.

width/height 속성
웹페이지에 삽입된 이미지의 크기를 임의로 조절할 수 있는데 이 때 사용하는 속성으로 이미지 폭의 크기를 지정하기 위한 width 속성과 이미지의 높이를 나타내기 위한 height 속성이 있습니다. 이 속성을 사용하지 않는 경우 웹페이지에 삽입된 이미지는 이미지 본래의 크기로 나타납니다. 이미지의 크기는 각각 픽셀 값으로 나타내게 됩니다.
실제 웹페이지를 제작할 때는 되도록 이 속성을 명시하는 것이 좋습니다. 이미지의 크기를 미리 사용자의 웹브라우저에 알려줌으로써 페이지 로딩 속도를 보다 향상시킬 수 있는 장점이 있습니다. 이 속성을 사용할 때 유의할 점은 그림의 크기보다 지나치게 크거나 작게 크기를 조정했을 경우는 이미지가 깨져보일 수 있다는 점입니다. 실제 크기보다 많이 바꾸어야 할 경우는 그래픽프로그램을 사용하여 바꾸어주는 것이 좋습니다.

width=180, height=100인 그림을 그대로 나타낸 경우 width=280, height=200로 조정한 경우

vspace/hspace 속성
이 두 개의 속성은 웹페이지에 삽입된 이미지와 연속되는 텍스트 또는 다른 이미지들 사이의 간격을 지정할 때 사용됩니다. vspace 속성은 다음 그림의 두 번째 예에서 보는바와 같이 이미지 전후의 텍스트와 이미지 사이의 상하 여백을 결정해 주며 hspace는 이미지의 좌우 여백의 크기를 지정합니다.

<IMG src = "img2.gif">여백을 주지 않은 경우입니다.<HR>
<IMG src = "img2.gif" vspace = 30>vspace 효과<HR>
<IMG src = "img2.gif" hspace = 50>hspace 효과

border 속성
이미지에 링크를 걸어 놓은 경우 파란색 테두리선이 나타나는 현상을 보곤 합니다. 경계선 속성을 잘 사용하면 액자와 같은 모습으로 만들 수도 있지만 때로는 경계선을 없애줌으로써 그림이 웹페이지에 떠있는 것처럼 표현할 수 있습니다. 특히 후자의 경우를 투명이미지(Transparent Image)라고 부르고 투명이미지를 만드는 방법은 Border 속성의 속성값을 0으로 해주면 됩니다. 이 속성의 속성값은 픽셀 값으로 숫자가 커질수록 경계선은 굵어지죠. 다음 그림의 각 예에 사용된 HTML 코드는 다음과 같습니다.

위로

6. 링크 만들기

월드와이드웹의 진정한 힘은 정보들을 거미줄처럼 연결해 주는 하이퍼링크 기능으로부터 나온다고 해도 과언이 아닙니다. 이 때 연결되는 정보는 웹페이지일 수도 있고 그래픽, 사운드, 동영상과 같은 멀티미디어 파일은 물론 애니메이션, 소프트웨어, 고퍼서버의 내용물, 원격컴퓨터의 로그인 세션, 아키, FTP 사이트 등 한마디로 컴퓨터로 만들어진 대부분의 것들이 하이퍼링크라는 기능에 의해 웹페이지에 연결될 수 있습니다.

이러한 강력한 기능에 반해서 링크를 만드는 방법은 너무나 간단합니다. 정보원들을 연결하기 위해 <A></A>라는 요소를 사용하고 각 정보들의 위치와 접근방법을 나타내기 위 해 URL(Uniform Resources Location)을 사용합니다. 시작 태그와 끝내기 태그 사이에는 웹브라우저에 나타날 하이퍼텍스트를 적어 주거나 웹브라우저에 나타날 이미지 파일을 삽입하고 href=" "의 " " 내에 링크될 정보의 URL을 적어주면 됩니다.

6.1. HTML 문서의 링크
<A href=" ">의 " " 내에는 링크될 HTML 문서의 파일명을 적어주고 <A>와 </A> 사이 에 웹브라우저에 나타날 하이퍼텍스트를 적어주면 됩니다. 그러면 웹브라우저 상에는 파란색 글씨로 하이퍼텍스트가 나타나고 이 하이퍼텍스트를 마우스로 클릭하면 연결된 문서가 나타나게 됩니다.

<A href="link.html">링크 만들기</A>

6.2. 이미지 파일로 링크걸기
홈페이지에 이미지 파일을 링크하는 방법도 HTML 문서를 링크하는 방법과 동일합니다. 단지 HTML 문서 파일명 대신 다음 예와 같이 이미지 파일명을 적어주면 됩니다.

<A href="rabbit.gif">귀여운 토끼그림</A> 귀여운 토끼그림

이 때 주의할 점은 이미지 파일이 이미지를 삽입할 HTML 문서와 다른 디렉토리에 있는 경우 이미지 파일이 있는 경로를 지정해 주어야 한다는 것과 웹브라우저가 출력할 수 없는 이미지가 있다는 것이다. 위의 예에서 GIF 확장자를 가진 이미지는 웹브라우저가 출력할 수 있지만 PNG나 CGM과 같은 확장자를 가진 이미지 파일은 웹브라우저를 통해 직접 볼 수 없는 경우가 있습니다. 이 경우는 해당 플러그인(넷스케이프의 경우)이나 액티브엑스(익스플로러의 경우)를 설치하거나 어플리케이션 프로그램을 설치해야 합니다.

6.3. 웹사이트 링크
자신의 홈페이지가 저장되어 있는 서버의 홈페이지는 물론 다른 서버에 저장되어 있는 홈페이지도 링크할 수 있습니다. 비로소 이것에서 세계적인 거미줄인 월드와이드웹이 탄생하게 되는데 링크시키는 방법은 앞에서 배운 것과 동일합니다. 단 파일명을 적어 주던 곳에 다음과 같이 웹사이트의 주소를 적어 주면 됩니다.

<A href="http://simmany.chollian.com">검색엔진 심마니</A>
<A href="http://www.shareware.co.kr">소프트웨어 다운로드 사이트</A>

6.4. 같은 페이지 내의 특정부분 링크하기
인터넷 문서의 경우 한 페이지의 크기는 정해져 있지 않아 때론 아주 긴 페이지들을 종종 방문하게 됩니다. 페이지가 웹브라우저 화면을 넘는 경우 스크롤바가 나타나긴 하지만 페이지 가 무척 길다면 스크롤하는데 많은 시간이 소요되고 필요한 부분이 단지 특정부분이라면 그렇게 할 필요없이 직접 그 부분을 링크할 수 있습니다.

이렇게 하기 위해서는 Named Anchor라고 부르는 표시가 필요하게 되는데 문서 내의 목적지 위치를 정의하는 역할을 하게 됩니다. 그리고 그 표시한 부분을 다음과 같이 앵커태그를 사용하여 연결할 수 있습니다.

<A href="#image">이미지 파일 링크</A>
<A href="#ftp">FTP 사이트 링크</A>

즉 위와 같이 링크를 만들어 놓으면 웹브라우저에 나타난 하이퍼텍스트 '이미지 파일 링크'를 클릭하게 되면 <A name="#image">라고 되어 있는 부분이 웹브라우저의 상단에 나타나게 되는데 이 Named Anchor는 웹브라우저에 나타나지 않기 때문에 hidden reference maker라고 부릅니다.

6.5. 웹사이트의 특정부분을 링크하기
앞에서 다루었던 Named Anchor가 반드시 자신이 만든 문서에 있을 필요는 없습니다. 전세계 어느 홈페이지에 있는 Named Anchor이든 참조하여 링크시킬 수 있습니다. 이 경우도 앞의 경우와 동일 한데 다음에 보는바와 같이 <A href="URL#NamedAnchor"></A> 형식을 이용합니다.

<A href="http://homepage.jinbo.net/intro.html#chap1">1장</A>

이 경우 웹브라우저 상에는 앞의 경우와 마찬가지로 '1장'라는 하이퍼텍스트가 나타나고 이 텍스트를 마우스로 클릭할 경우 http://homepage.jinbo.net이라는 URL내의 intro.html이라는 파일 내의 Named Anchor #chap1이 있는 부분을 여러분의 웹브라우저 상단에 출력해 줍니다. # 기호를 꼭 기억하도록 합니다.

6.6. 하이퍼 그래픽 - 이미지에 링크 걸기
지금까지는 웹브라우저 상에 나타난 텍스트를 클릭하여 원하는 문서나 이미지 등을 연결하는 방법을 주로 알아보았습니다. 하지만 하이퍼링크가 반드시 텍스트에만 연결할 수 있는 것은 아닙니다. 웹페이지 내에 이미지를 삽입하고 이 이미지에 다른 웹사이트나 각종 자료를 연결할 수 있는데 이렇게 이미지에 링크 기능을 부여하는 것을 하이퍼 그래픽이라고 합니다.

이렇게 하면 웹브라우저에는 home.gif 파일명의 이미지가 나타나고 이 이미지를 마우스로 클릭하였을 때 index.html이라는 문서를 웹브라우저로 불러오게 되는 것이죠. 이 때 눈여겨볼 것은 border=0 이라는 속성코드를 <IMG> 태그 내에 삽입시킨 점입니다. 앞에서도 이야기했듯이 이미지에 링크를 걸게 되면 파란색의 테두리가 생기게 됩니다. 이를 없애 주기 위해서 border=0라는 속성을 명시해 주어야 합니다.

6.7. 다양한 하이퍼링크 방법
월드와이드웹은 인터넷의 강력한 도구로 성장을 계속하고 있습니다. 그것은 각종 멀티미디어 기술을 이용할 수 있는 것과 더불어 하이퍼링크 기능을 이용하여 다양한 기존의 인터넷 서비스들을 연결하고 웹브라우저 상에서 직접 그러한 서비스들을 이용할 수 있도록 해 주기 때문이다.

6.7.1. 전자우편창 링크

<A href="mailto:orpheo@jinbo.net">문의사항은 이곳으로</A>

하이퍼링크나 하이퍼그래픽을 마우스로 클릭하면 전자우편창에 입력된 전자우편 주소가 수신자가 되어 나타납니다.

6.7.2. FTP 서비스

<A href="ftp://ftp.cica.indiana.edu">인디아나대학교 CICA</A>

6.7.3. Gopher 사이트 링크

<A href="gopher://veronica.scs.unr.edu/11/veronica">고퍼 검색엔진 베로니카</A>

6.7.4. 뉴스그룹 링크
전자우편 창을 링크하는 경우와 같이 레퍼런스에 'news:뉴스그룹명'의 형식을 사용하면 됩니다.

<A href="news:comp.graphics.apps.photoshop">뉴스그룹 Photoshop</A>

위로

7. 표 만들기

표를 만들 때 사용하는 요소에는 <TABLE></TABLE>, <TR></TR>, <TD></TD>, <TH></TH>, <CAPTION></CAPTION>이 있습니다.

<TABLE></TABLE> 표의 시작과 끝을 지정합니다.
<TR ></TR> 표의 한 줄을 지정하며 각 줄의 시작과 끝에 사용합니다.
<TD>< /TD> 각 칸에 들어갈 내용을 적어줄 때 사용합니다.
<TH></TH> 칸을 나타내며 칸의 내용이 굵게 나타납니다.
<caption ></caption> 표의 제목을 표시해 주는 요소입니다.

7.1. <TABLE></TABLE> 요소의 속성들
border 속성
표의 테두리선의 굵기를 지정하기 위해 사용하는 속성으로 이 속성의 속성값인 테두리선의 굵기는 픽셀 값에 의해 표현됩니다. 이 속성을 사용하지 않은 경우 경계선이 나타나지 않으며 border라는 속성만 사용하고 속성값을 지정하지 않은 경우 경계선의 굵기는 border=2를 사용한 경우가 됩니다.

cellspacing 속성
내부경계선의 굵기를 지정하는 속성이며 이 속성의 속성값 역시 픽셀값입니다. 기본값은 2가 됩니다. 즉, 속성값을 사용하지 않은 경우 내부경계선의 굵기는 2픽셀이 됩니다.

<HTML>
<HEAD>
<TITLE>테이블 Spacing 예제</TITLE>
</HEAD>
<BODY>
<CAPTION><B>CellSpacing:0</B></CAPTION>
<TABLE cellspacing=0 border=3>
<TR><TD>첫번째 셀</TD><TD>두번째 셀</TD>
</TR></TABLE>
<BR>
<CAPTION>><B>CellSpacing:5</B>></CAPTION>
<TABLE cellspacing=5 border=3>
<TR><TD>첫번째 셀</TD><TD>두번째 셀</TD>
</TR></TABLE>
<BR>
<CAPTION>><B>CellSpacing:10</B>></CAPTION>
<TABLE cellspacing=10 border=3>
<TR><TD>첫번째 셀</TD><TD>두번째 셀</TD>
</TR></TABLE>
</BODY>
</HTML>

cellpadding 속성
이 속성을 <TABLE> 태그 내에 사용하여 셀 내부에 입력된 텍스트 또는 이미지 등 내용물 과 경계선간의 간격을 조정할 수 있습니다. 속성값은 역시 픽셀 값으로 나타냅니다. 다음 그림을 통해서 이해해 봅시다.

<HEAD>
<TITLE>테이블 Padding 예제</TITLE>
</HEAD>
<BODY>
<CAPTION><B>CellPadding:0</B></CAPTION>
<TABLE cellpadding=0 border=3>
<TR><TD>첫번째 셀</TD><TD>두번째 셀</TD>
</TR></TABLE>
<BR>
<CAPTION><B>CellPadding:5</B></CAPTION>
<TABLE cellpadding=5 border=3>
<TR><TD>첫번째 셀</TD><TD>두번째 셀</TD>
</TR></TABLE>
<BR>
<CAPTION><B>CellPadding:10</B></CAPTION>
<TABLE cellpadding=10 border=3>
<TR><TD>첫번째 셀</TD><TD>두번째 셀</TD>
</TR></TABLE>
</BODY>
</HTML>

width 속성
표의 폭 크기를 정의하는 속성으로, 속성값을 나타내기 위해서는 픽셀 값으로 나타내는 방법과 화면에 대한 비율로 나타내는 방법의 두 가지가 있습니다.

height 속성
Width 속성과 유사하게 표의 높이를 정의하는 속성으로 픽셀 값이나 화면크기에 대한 비율로 이 속성의 속성값을 정의할 수 있습니다.

7.2. <TD></TD> 요소의 속성들
rowspan 속성
세로로 여러 개의 셀을 합칠 때 사용하는 속성이며 합쳐진 셀의 개수를 속성값으로 합니다.

<TABLE border=2>
<TR align=center>
<TD rowspan=2>1행 1열</TD>
<TD>1행 2열</TD></TR>
<TR><TD>2행</TD></TR>
</TABLE>

colspan 속성
가로로 여러 개의 셀을 합칠 때 사용하는 속성이다. 역시 셀의 수를 속성값으로 사용합니다.

align 속성
셀 내부에 입력된 내용을 좌(left), 우(right), 또는 가운데(center)로 정렬시키는데 사용합니다. 기본값은 left입니다.

valign 속성
셀 내부 내용을 상하방향에 대해 정렬하고자 할 때 필요한 속성입니다. 속성값으로 top, bottom, middle을 가지며 기본값은 middle, 즉 내용이 셀 중간에 나타나게 됩니다.

bgcolor 속성
셀 내의 색상을 임의로 바꿀 때 사용됩니다.

7.3. <CAPTION></CAPTION>요소의 속성
align 속성
표의 제목을 붙일 위치를 지정하는 속성으로 top과 bottom의 속성값을 가질 수 있습니다. top 은 표의 제목을 표의 윗부분에 표시하며 bottom은 제목의 표의 아랫부분에 표시해 줍니다.

위로

8. FRAME

프레임 기능은 웹브라우저 화면을 분할하여 여러 개의 문서를 동시에 보여주기 위한 기능입니다. 예를 들어 화면을 좌우 두 개의 프레임으로 나누었다면 좌측과 우측 프레임에 서로 다른 문서를 동시에 보여줄 수 있게 됩니다. 이런 경우 좌측 및 우측에 나타날 문서 이외에 각 문서를 나타내는 방법, 각 문서들간의 관계 등을 설명하는 한 개의 문서가 더 필요하게 되는 데 이 문서를 마스터페이지 또는 프레임 정의문서라고 부릅니다.

마스터 페이지에 사용되는 요소는 <FRAMESET> </FRAMESET>, <FRAME>, <NOFRAMES> </NOFRAMES> 등이 있습니다.
<FRAMESET></FRAMESET> 요소는 프레임구조의 첫부분과 마지막 부분에 사용되는 요소로 각 프레임의 레이아웃을 설명하는 명령이며, <FRAME> 요소는 디스플레이될 실제 HTML 문서의 이름을 나타내는 명령입니다.
<NOFRAMES></NOFRAMES> 요소는 프레임 기능을 지원하지 못하는 웹브라우저를 위한 요소입니다.

8.1. <FRAMESET></FRAMESET> 요소
프레임 문서는 일반 HTML 웹페이지와는 페이지의 기능상에서 큰 차이점을 가지고 있기 때문에 <BODY></BODY> 태그를 사용하지 못합니다. 따라서 프레임 문서는 다음과 같은 구조를 갖게 됩니다.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET cols="크기, 크기">
<FRAME src="나타날 문서 파일명">
<FRAME src="나타날 문서 파일명">
</FRAMESET>
</HTML>

8.2. <FRAMESET></FRAMESET> 요소의 속성들
cols/rows 속성
Frameset 태그 내에는 반드시 cols 또는 rows 속성을 사용하여야 합니다. cols 속성은 프레임을 좌우로 분리하는 속성이며 rows는 프레임을 상하로 나누는 속성입니다. 속성값은 각 프레임의 크기를 지정하는데 사용되는데 화면에 대한 비율(%) 또는 픽셀 값으로 나타냅니다.
여기서 화면의 크기를 나타내는 방법은 다음과 같은 여러 가지 방법들이 있습니다.
첫 번째의 예 20%, 20%, 60% 는 좌우로 나누어진 세 개의 프레임이 각각 화면의 20%, 20%, 60%가 되도록 하라는 의미인데 이 경우는 세 개 값의 합이 100%가 되어야 합니다. 두 번째의 300, 600은 상하로 나우어진 두 개의 프레임의 높이가 각각 300픽셀, 600픽셀이 되도록 하라는 의미입니다. 창의 크기를 나타내는데 부호 *를 사용할 수도 있는데 100,*의 의미는 첫 번째 창의 크기는 100픽셀로 하고 화면의 나머지를 두 번째 창으로 사용하라는 의미가 되며 다음의 *,3*의 의미는 두 번째 창이 첫 번째 창의 3배가 되도록 창을 나누라는 의미가 됩니다.

cols="20%,20%,60%"
rows="300,600"
rows="100,*"
cols="*,3*

border 속성
프레임간의 경계선의 두께를 지정하는 속성입니다.
<FRAMESET cols=50%,50% BORDER="0">
<FRAME src="table.html" name="main" SCROLLING="NO">

다음의 예제코드를 보면서 결과를 예측해 보시기 바랍니다.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET cols="20%, *" border=0>
<FRAME src="menu.html" scrolling="no">
<FRAME src="main.html" scrolling="auto">
</FRAMESET>
</HTML>

8.3. <FRAME> 요소의 속성들
name 속성
각 프레임의 이름을 지정하는 속성입니다.
이름을 지정하는 이유는 프레임을 사용하면서 프레임간의 상호작용을 지원하는 target 속성을 사용하기 위함인데 target 속성은 Anchor 요소의 속성이 됩니다.

<FRAMESET cols=50%,50%>
<FRAME src="table.html" name="main">
<FRAME src="link.html" name="display">
</FRAMESET>

marginwidth/marginheight 속성
지정한 픽셀 값만큼 웹브라우저의 좌우 또는 상하에 여백을 두고 나타나게 합니다.

<FRAME src="table.html" name="main' MARGINWIDTH=100>
<FRAME src="table.html" name="main" MARGINHEIGHT="100">

scrolling 속성
프레임의 스크롤바를 없애거나 만들 때 사용합니다. 속성값으로는 YES, NO, AUTO 세 종류가 있는 데 속성값에 YES를 사용하면 항상 스크롤바를 만들어 주고 NO를 사용한 경우는 항상 스크롤바를 만들어 주지 않으며 AUTO를 사용하면 문서의 양이 한 화면을 넘는 경우 자동으로 스크롤바가 생기게 합니다. 이 속성의 기본값은 AUTO입니다.

<FRAME src="table.html" name="main" SCROLLING="NO">

noresize 속성
사용자가 프레임의 크기를 임의로 조절할 수 없도록 하는 속성입니다. 이 속성은 속성값을 갖지 않습니다.

<FRAME src="table.html" name="main" noresize>

8.4. <NOFRAMES></NOFRAMES> 요소
프레임기능을 제공하는 웹브라우저의 경우에는 <NOFRAMES> 태그에 따라오는 <BODY></BODY> 태그 내의 내용을 무시하게 되며, 프레임기능을 제공하지 않는 웹브라우저의 경우는 <BODY></BODY> 내의 내용을 웹브라우저에 표현합니다.

<FRAMESET cols=50%,50%>
<FRAME src="table.html">
<FRAME src="link.html">
</FRAMESET>
<NOFRAMES>
<BODY>
웹브라우저에 나타날 내용...
</BODY>
</NOFRAMES>

8.5. 프레임간의 상호작용
태그의 target 속성
<A>태그에 target="프레임 이름"의 형식으로 target 속성을 삽입하면 <A> 태그에 의해 링크된 문서는 지정된 이름의 프레임에 나타나게 됩니다.

Magic target
target 속성의 속성값 중에 임의로 정의한 프레임의 이름과 관계없이 특별한 속성값을 의미합니다. 이 특수 target은 _로 시작하며 반드시 소문자를 사용해야 합니다.

_blank 새로운 웹브라우저를 열어 연결된 문서를 보여줍니다.
_self target속성을 사용하지 않은 것처럼 하이퍼텍스트가 있던 프레임을 대체합니다.
_parent/ _top 현재의 페이지를 대체합니다.

Base target
한 문서내의 모든 링크들을 모두 같은 프레임에 나타내도록 한다면 모든 태그에 속성을 사용하지 않고 문서의 첫 링크 앞에 다음과 같은 HTML 코드를 넣으면 됩니다.

<BASE target="display">

이 코드는 "지금부터 나오는 모든 anchor에 연결된 문서들은 모두 display란 이름을 가진 프레임(오른쪽 프레임)에 보여 줍니다"라는 의미를 나타냅니다.

기획하기

작성하기

HTML

CSS

JavaScript


기술국 관련 문의 : support@jinbo.net	Korean Progressive Network Jinbo.Net
	No CopyRight, Just CopyLeft!!