10단원 포토앨범 만들기 · 10단원 포토앨범만들기 3. 종합실습 menu.html에서...

10단원 포토앨범 만들기

10단원

포토앨범 만들기

1. FRAME에서 링크는?

2. IFRAME으로 사진 정리를..

3. 종합실습

1/12


이번 시간에는 지난 시간에 만든 menu.html 에 프레임 target 을 지정하여 링크를 연결하고, 2x5 표를

만들어 첫째의 5 개 셀을 합치기하고 IFRAME 를 사용하여 포토앨범을 만들어 보겠습니다.

[완성된 예제 미리보기]

1. FRAME 에서 링크는?

먼저 프레임 셋에 하나의 프레임 파일을 클릭 했을때, 다른 프레임에 내용이 나타나도록 하려면 링크

속성에서 TARGET 을 지정해 주어야 합니다. 이 때, 각 프레임에는 NAME 속성을 값을 주어야 합니다.

TARGET 속성값을 알아 보겠습니다.

속성값 설명

_blank 새 창을 띄워서 보여줍니다.

_self 현재 프레임 창에 보여 줍니다.

_parent 현재 프레임 구성을 없애고 창 전체에 내용을 보여줍니다

_top 현재 프레임 구성을 없애고 창 전체에 내용을 보여줍니다.

프레임 이름 특정 프레임에 링크를 보여줍니다.

잠깐! 알고가세요

이번 학습에서는 예제 파일이 아닌 [쉬운HTML] 폴더의 파일을 수정하는 과정과

새로운 파일을 만드는 과정입니다. 그리고 이미지는 항상 images폴더에 저장되어

있으며, 저장과정은 생략되어 있습니다.

2/12


이번 학습에서는 프레임에 링크를 지정하는 방법을

알아보기 위해 지난 학습에서 저장해 두었던 [쉬운

HTML(09)]에서 menu.html을 불러옵니다.

메뉴 화면에서 각각의 메뉴에 아직 링크가 연결되

지 않은 상태이며, 메뉴 중 “여행사진보기”는 문서

가 아직 만들어지지 않아 종합실습에서 연결하도록

하겠습니다.

첫번째 칸의 메뉴인 “처음으로” 앞에 링크를 연결

하기 위하여 [ENTER]키를 누릅니다.

“처음으로” 메뉴는 맨 처음 화면인 “main.html”를

나타내는 메뉴이며,

“main.html”이 나타나는 아래쪽 프레임 이름은

“mainframe”으로 지난 시간에 index.html에서

name=”mainframe”로 지정해 저장해 두었습니다

이제 링크와 TARGET을 입력합니다.

<A href="main.html" target="mainframe"> </A>

이번에는 두번째 칸의 메뉴인 “여행이야기” 앞에

링크를 연결하기 위하여 [ENTER]키를 누릅니다.

3/12


“여행이야기” 메뉴는 맨 처음 화면인 “story.html”

를 나타내는 메뉴이며, “story.html”이 나타나는 아

래쪽 프레임 이름도 “mainframe”입니다.


<A href="story.html" target="mainframe"> </A>

세번째 칸인 “여행사진보기”는 문서가 아직 준비되

지 않았으므로 네번째 칸인 “여행동영상보기” 메뉴

앞에서 [ENTER]키를 누릅니다.

“여행동영상보기” 메뉴는 맨 처음 화면인

“movie.html”를 나타내는 메뉴이며, “movie.html”

이 나타나는 아래쪽 프레임 이름도 “mainframe”입

니다.


<A href="movie.html" target="mainframe"> </A>

[파일]-[저장]을 클릭합니다.

4/12


menu.html을 더블 클릭하면 링크된 메뉴는 밑줄이

생긴 것을 확인할 수 있습니다.

[여행이야기]메뉴를 클릭하면 TARGET이 “_blank”

로 나타납니다.

정확한 작업 문서를 보기 위해서는 프레임 화면인

index.html를 더블클릭하면 링크를 연결한

menu.html을 확인할 수 있습니다.

이번에는 [여행이야기]를 클릭하면 mainframe에

story.html문서가 나타납니다.

5/12


이번에는 [여행동영상보기]를 클릭하면 mainframe

에 movie.html문서가 나타납니다.

2. IFRAME 으로 사진 정리를

IFRAME은 internal frame의 약어로 HTML 문서 안에서 원하는 위치에 프레임을 만들어 넣는 태그로 일반

적으로 게시판을 문서에 삽입하는 형태로 많이 사용되고 있습니다.

아이프레임은 인터넷 익스플로러와 넷스케이프 7.0 이상에서만 확인할 수 있으며,

일반프레임이 <HEAD>와 <BODY>사이에 들어가는 것과는 달리 <BODY>와 </BODY>사이에 들어 가야만

합니다.

먼저 IFRAME의 속성을 알아보겠습니다.

속성 설명 속성값

ALIGN 문서에서 아이프레임의 정렬을 지정합니다. left, right, center

SRC 프레임안에 나타날 파일, URL 을 지정합니다. 파일경로, URL

NAME 프레임의 이름을 지정합니다. 영문자, 영문자+숫자

WIDTH/HEIGHT 프레임의 가로/세로 길이를 지정합니다. 픽셀값

FRAMEBORDER 프레임의 테두리를 지정합니다 숫자

BORDERCOLOR 프레임의 테두리 색상을 지정합니다. 색상, 색상코드

SCROLLING 프레임의 스크롤의 유무를 지정합니다. yes, no

잠깐! 알고가세요.

대상프레임을 매번 지정해야 하나요?

같은 문서에서 대상프레임이 모두 같다면 <BASE> 태그를 사용하여 매번

TARGET을 지정하지 않고, <HEAD>와 </HEAD>사이에 기본 TARGET을 한번

만 지정할 수 있습니다.

예) <HEAD>

<BASE target=”mainframe”>

</HEAD>

6/12


이번 학습에서는 빈 메모장에 IFRAME을 사용하여 포토앨범을 만들어 보겠습니다.

<TABLE align="center" width="500" height="400” border="2"

cellspacing="0" bordercolor="white">

<TD colspan ="5" width="500" height="320">

<IFRAME align="center" width="380" height="270" scrolling="no"

name="photo" frameborder="0" ></IFRAME>

<TR>

<TD><A href="images/photo1.jpg" target="photo">

<TR>


<TR>


<TR>


<TR>


7/12


먼저 빈 메모장을 열어 제목, 배경그림과 위쪽 여

백을 입력합니다.

문서에 들어갈 전체 테이블을 만들고 속성을 입력

합니다.

<TABLE align=”center” width="500" height=”400”

border="2" cellspacing="0" bordercolor="white">

</TABLE>

을 입력합니다.

이젠 첫번째 줄을 만들고 가로 5칸을 합치기 합니

다.

<TR>

<TD colspan ="5" width="500" height="320">

</TD></TR>


합쳐진 칸에 IFRAME를 입력합니다.

<IFRAME align="center" width="380"

height="270" scrolling="no" name="photo"

frameborder="0" >

</FRAME>


8/12


이젠 두번째 줄 5칸에 각각의 이미지를 넣고 링크

를 입력합니다. 이때, 타켓은 ”photo”입니다.

<TR>

<TD><A href="images/photo1.jpg" target=”photo”>

<img src=”images/photo1.jpg” width=”100”

height=”80” border=”0”></A></TD>














이젠 마지막으로 화면 아래에 안내문을 넣어 보겠

습니다.

<P align="center">

<FONT size="3" color="#cf3290" face="MD이솝체">

사진을 클릭하면 더 큰 사진으로 볼 수 있어요!

</FONT></P>


9/12



[다른 이름으로 저장] 대화상자에서 photo.html로

저장합니다.

메모장의 제목 줄에 파일이름이 photo.html로 바뀐

것을 확인합니다.

저장된 photo.html을 더블 클릭하여 확인합니다.

10/12


3. 종합실습

menu.html에서 “여행사진보기”의 연결 문서가 없어 링크를 지정하지 못하였습니다.

이번 종합 실습에서는 남은 메뉴에 링크를 연결해 보겠습니다.

먼저 menu.html를 불러옵니다.

세번째 칸인 “여행사진보기” 메뉴 앞에서

[ENTER]키를 누릅니다.

“여행사진보기” 메뉴는 “photo.html”를 나타내는

메뉴이며, “photo.html”이 나타나는 아래쪽 프레임

이름도 “mainframe”입니다.


<A href="photo.html" target="mainframe"></A>


11/12


기억하세요! 확인하실때에는 index.html를 더블 클

릭하여야 합니다.

메뉴에서 “여행사진보기”를 클릭합니다.

12/12

Date post:	19-Jul-2020
Category:	Documents
Upload:	others
View:	0 times
Download:	0 times

10단원 포토앨범 만들기 · 10단원 포토앨범만들기 3. 종합실습 menu.html에서...

Documents