보기 좋은 홈페이지가 사람을 부른다

- 1 -

보기 좋은 떡이 먹기도 좋다?. 이 말은 홈페

이지에도 그대로 적용된다. 홈페이지에 실린

내용이야 물론 중요하다. 하지만 처음 방문

한 이에게는 첫인상이 더욱 큰 비중을 차지

한다. 따라서 마음만큼 외모에도 신경을 써

야 한다.

여기서 보기 좋은 홈페이지를 만드는데 필요

한 두가지 기술을 소개한다. 프레임과 이미

지 맵이다. 프레임을 이용하면 보기 좋은 홈

페이지를 만들 수 있을 뿐아니라, 홈페이지

관리도 매우 용이하다. 이미지 맵은 홈페이

지를 간결하면서도 보기 좋게 만들어 준다.

프레임이란?

웹사이트를 돌아다니다 보면 화면이 여러개

로 쪼개진 홈페이지를 만나게 된다. 그 곳은

프레임을 이용하여 작성한 홈페이지이다. 쪼

개어진 각각의 영역을 프레임이라고 부른다.

그리고 프레임의 개수와 배열, 이름, 크기,

속성 등에 대한 정보를 가지고 있는 html 문

서를 프레임셋이라고 한다.

(그림 1) 프레임 그림

프레임 만들기

프레임 문서의 서식은 일반 html 문서에서

보이는 body가 없다. 대신 frameset이 있다.

즉 아래와 같은 형식을 취한다.

<html>

. . .

</frameset>

</html>

<frameset>은 “창을 나눠라”라고 지시하는

것이다. 다음과 같은 두 가지 속성을 이용하

여 창을 어떻게 나눌 것인가를 지시한다.

rows="숫자 또는 %“

cols="숫자 또는 %“

rows는 “창을 가로로 나눠라”라는 말이다,

그리고 cols는 “창을 세로로 나눠라”라는 말

이다. 나누는 창의 크기나 개수는 따옴표 속

의 정의에 따라 달라진다. 따옴표 속의 창의

개수는 콤마로, 크기는 숫자 또는 %에 의해

서 결정된다. %는 1~100까지의 수치를 이용

해서 창의 크기를 나타낸다. 이때 모든 창의

크기의 합은 100%가 되어야 한다. 그 외에

도 *를 이용하는 방법과 픽셀단위의 크기를

직접 기입하는 방법이 있다.

- 20:60:20 크기의 가로로 나뉜 3개의 창

- 같은 크기의 가로로 나뉜 2개의 창

_ 2:1:1 크기의 세로로 나뉜 3개의 창

- 150픽셀 크기와 나머지 크기의 세로로

나뉜 2개의 창

PC사랑 기고글 (3화)

보기 좋은 홈페이지가 사람을 부른다.

프레임과 이미지 맵 만들기

프레임

- 2 -

<frameset>으로 창을 나뉘었으면 각 창에

대한 설정을 해야 한다. 그 역할을 하는 태

그가 <frame>이다. 당연히 <frameset>안에

자리잡아야 하고, 다음과 같은 6개의 속성이

있다.

src="문서이름“

name="프레임이름“

target="프레임이름“

marginwidth="n"

marginheight="n"

scrolling="yes|no|auto"

src는 각 프레임에 나타날 소스 문서를 가르

킨다. name은 각 프레임을 다른 프레임에서

지칭할 수 있도록 이름을 정해주는 것이다.

이 옵션으로 프레임 이름을 지정해 주면, 다

른 프레임에서 target 옵션을 통해서 그 프

레임을 지칭할 수 있다. marginwidth,

marginheight는 한 프레임의 좌우, 상하 여

백을 조정하는 것이다. scrolling은 한 프레

임의 스크롤 바를 설정해주는 것이다. yes일

때는 항상 스크롤 바가 나타난다. no일 때는

스크롤 바가 나타나지 않는다. 디폴트는

auto로서 내용의 분량에 따라 자동적으로 스

크롤 바가 나타난다.

지금까지 배운 것을 가지고 3개의 프레임이

나오는 홈페이지를 만들어 보자. 먼저 메모

장과 같은 텍스트 편집기로 아래와 같이 입

력한 후 “main.html"이라고 저장하자.

<html>

<head>

</head>

<frame src="banner.html"

name="upper" scrolling="no">

<frame src="contents.html"

name="contents">

</frameset>

</html>

(그림 2) 프레임 만들기

웹브라우저에 이를 보면 한 페이지가 세 개

의 프레임으로 구성되어 있을 것이다. 문서

소스에서 보듯이 가로로 두 개를 먼저 나누

었고, 다시 아래 프레임을 세로로 나누었다.

프레임의 이름은 각각 banner, contents,

detail 이다. 이제 contents.html 문서를 만들

어 보자. contents.html 문서는 메뉴화면이

다. 메모장을 이용하여 아래와 같이 입력한

다.

- 3 -

<html>

<head>

</head>

<body background="back.gif" text="#ffcc00"

link="#ffcc00" vlink="#ffcc00">

<li><a href="profile.html"

target="detail">Profile</a>

<li><a href="research.html"

target="detail">Research<a>

<li><a href="lecture.html"

target="detail">Lecture<a>

<li><a href="favor.html"

target="detail">Favorites</a>

<li><a href="archive.html"

target="detail">Archives</a>

<li><a href="webboard.html"

target="_blank">Webboard</a>

<li><a href="link.html"

target="detail">Links</a>

</ul>

</body>

각 항목을 링크시킬 때 target 옵션을 잊지

말자. target 옵션 없이 링크를 시키면 자체

문서가 바뀐다. main.html에서 아래쪽 우측

프레임의 이름을 detail이라 칭하였으므로

target="detail" 옵션이 된다. 주의 깊은 사용

자는 이상한 점을 발견했을 것이다. 바로

target="_blank" 옵션이다. 현재의 웹브라우

저 화면을 그대로 두고, 같은 크기의 새로운

웹 브라우저 화면을 열어서 연결된 문서를

보여주는 기능을 가진다. 이것을 매직 태그

라고 부른다. 각자 banner.html, detail.html

을 만들어 확인하자.

(그림 3) 프레임 내용 만들기

웹 저작툴로 프레임있는 문서 만들기

지금까지 작업한 방법은 조금 불편하였다.

일일이 메모장을 열어 문서를 만들고 프레임

속성을 지정하였다. 그러나 웹 저작툴을 이

용하면 간단하다. 웹 저작툴은 국내에서 만

든 나모 웹 에디터를 이용한다. 프로그램은

통신이나 인터넷에서 쉽게 구할 수 있을 것

이다. 자세한 내용은 http://www.namo.co.kr

을 참고하기 바란다.

새 프레임셋 만들기

기본적인 나모 웹 에디터에 대한 사용은 앞

에서 연재하였으니 참고하기 바란다. 메뉴에

서 [프레임→새프레임셋]을 실행한다. ‘새내

용’ 대화상자가 나타날 것이다. 프레임셋 모

양을 선택한다. 여기서는 배너와 차례를 선

택한다. 대화상자의 설명과 미리보기를 통해

프레임셋의 모양을 볼 수 있다.

- 4 -

(그림 4) 새 프레임셋 만들기

확인 버튼을 클릭한다 문서창에 선택한 프레

임셋(배너와 차례)이 나타난다. 프로그램의

제목줄에 커서가 있는 프레임의 파일이름,

프레임의 이름, 제목이 표시된다.

(그림 5) 프레임셋 화면

각 프레임에서 원하는 내용을 입력할 수 있

다. 또는 기존의 html 문서를 불러올 수 있

다.

프레임에서 하이퍼링크 대상 지정하기

프레임 안에서 지정하는 하이퍼링크는 일반

적인 하이퍼링크에 비하여 지정할 사항이 하

나 더 있다. 앞에서 설명했듯이 하이퍼링크

를 눌렀을 때, 연결된 문서가 나타나는 위치

를 알려주어야 하기 때문이다. [하이퍼링크

만들기]나 [하이퍼링크 편집] 대화상자에서

“대상프레임”을 지정한다.

일명 매직 태그라 불리우는 네 개의 영역 이

름과 작동 결과는 다음과 같다.

* _blank : 현재의 웹 브라우저 화면을 그대

로 두고, 같은 크기의 새로운 웹 브라우저

화면을 열어서 연결된 문서를 보여준다.

* _self : 하이퍼링크가 있는 현재 프레임에

연결된 문서를 보여준다.

* _top : 현재 웹 브라우저 화면 전체에 연

결된 문서를 보여준다.

* _parent : 하이퍼링크가 있는 현재 문서를

불렀던 화면으로 돌아가 연결된 문서를

보여준다.

대상 프레임을 지정하지 않으면, _self 프레

임에 연결된 문서를 보여준다. 대상 프레임

이름을 banner, contents, detail 중 하나로

하면 해당 이름의 프레임에 연결된 문서를

보여준다.

(그림 6) 하이퍼링크 대상 지정하기

프레임에서 문서 열기

문서를 삽입하려는 프레임으로 커서를 이동

한다. [프레임→페이지열기]를 선택한다. ‘열

기’ 대화상자가 나타난다. 불러오려는 파일을

선택한다. 찾아보기 단추를 이용하여 파일을

쉽게 찾을 수 있다. 파일을 선택하면 열기

단추를 누른다. 선택한 문서 파일이 해당 프

레임에 나타날 것이다.

프레임과 프레임셋 저장하기

- 5 -

프레임과 프레임셋 파일을 모두 저장하려면,

[프레임→모두저장하기]를 선택한다. [다른

이름으로 저장] 대화상자가 나타나며, 각 프

레임을 차례로 저장할 수 있다. 마지막으로

프레임셋을 저장한다. 어느 한 프레임만을

저장할 때에는 [파일→프레임저장하기]를 선

택한다. [다른 이름으로 저장] 대화상자가 나

타난다. 이때 파일 이름을 쓰고 저장하면 된

다. 프레임셋 저장은 [프레임→프레임셋 저

장하기]를 선택한다. 역시 [다른 이름으로 저

장] 대화상자가 나타난다. 마찬가지로 파일

이름을 쓰고 저장하면 된다.

이미지 맵 만들기

여러 가지 모양의 그림을 화면에 출력한다.

이 이미지에서 특정 영역을 클릭 했을 때 다

른 문서로 이동하도록 연결해줄 수 있다. 이

것을 이미지 맵이라 한다. 즉 사각형, 원모

양, 다각형 모양등의 영역을 지정하고 각각

의 영역에 대해 이동할 문서를 연결해 준 것

이 이미지 맵이다. 이미지 맵을 위한 html

태그는 다음과 같다.

<href="연결시킬문서 또는 사이트“>

</map>

이미지 맵에서 영역 모양은 사각형(rect), 원

(circle), 다각형(poly), 지정영역외(default)

형태로 지정된다. 이미지 맵은 직접 만들기

매우 어렵다. mapedit라는 툴을 이용하자.

mapedit는 http://www.boutell.com/mapedit/

에서 쉽게 구할 수 있다.

mapedit를 이용해서 이미지 맵을 만들기 위

해서는 다음과 같은 준비과정을 거친다.

1. 이미지 맵에 사용될 이미지 파일을 준비

한다.

2. 이미지 파일을 포함한 html 문서를 만든

다(map.html이라 하자). <img>태그를 이

용하면 된다.

3. 인터넷에서 프로그램을 다운 받는다. 다운

받은 파일을 실행시키고, “ok"를 두 번

입력하면 자동적으로 설치가 완료된다.

(그림 7) 이미지 맵 넷스케이프 화면

파일열기

mapedit를 실행시키면 자동적으로 [파일열

기] 대화창이 뜬다. html 파일이름을 쓰고

‘열기’를 클릭하면 html 문서에 포함된 그림

이 나타난다. 여기서는 map.html에 연결된

이미지 파일이름이 map.jpg였다.

(그림 8) 그림 파일 선택하기

- 6 -

영역지정하기

mapedit는 리본막대에서 세가지 유형의 영

역을 지정 방식을 제공한다. 사각형, 원모양,

다각형중 한 개를 선택한다. 그림에서 선택

될 영역을 버튼을 이용하여 그린다. 그림에

서 웹게시판영역을 원으로 지정하자. 영역이

선택되면 [Object URL] 대화창이 뜬다. 여기

에 이동될 사이트의 주소를 적는다.

webboard.html이라고 적는다. 다른 부분도

같은 방법으로 영역을 선택한다.

(그림 9) 영역 지정하기

(그림 10) 지정된 영역을 하이퍼링크 시키기

수정된 html 문서 보기

mapedit에서 [File→Save HTML Document]

를 선택하여 문서를 저장한다. 다음은

map.html 소스이다. 밑줄친 곳이 mapedit에

의해서 수정된 부분이다.

<html>

<head>

</head>

<body>

<img src="map.jpg" usemap="#map"

border="0">

프레임과 이미지 맵으로 사람을 모으는

홈페이지를 만들자

</center>

<area shape="rect" coords="22,17,71,135"

href="link.html">

<area shape="rect" coords="76,18,160,68"

href="profile.html">

<area shape="rect" coords="76,70,160,112"

href="research.html">

<area shape="rect" coords="75,115,190,144"

href="lecture.html">

<area shape="rect" coords="21,138,54,205"

href="favor.html">

<area shape="circle" coords="234,120,43"

href="webboard.html">

<area shape="rect" coords="168,26,269,77"

href="archive.html">

</map>

</body>

</html>

이제 이미지맵이 완성되었다. 웹브라우저에

서 수정된 map.html 문서를 읽어보자. 지정

된 영역을 클릭하면 지정된 사이트로 이동되

는 것을 확인할 수 있을 것이다.

소재우

jwso@sogang.ac.kr / 현재