본문 바로가기

Book

[한빛미디어] 인터넷 프로그래밍 입문 8장 연습문제

[한빛미디어] 인터넷 프로그래밍 입문 8장 연습문제




8장 연습문제

서술형문제

1. [그림]과 같이 프레임을 나누기 위한 프레임 소스를 구성해 보시오.

frame.htm

topmenu.htm(높이 80픽셀)

leftmenu.htm

(너비 200픽셀)

contents.htm

(프레임 이름 = right)

<html>

<head>

<title>연습문제 8-1</title>

<frameset rows=”80,*”>

<frame src=”topmenu.htm”>

<frameset cols=”200,*”>

<frame src=”leftmenu.htm”>

<frame src=”contents.htmname=right>

</frameset>

</frameset>

</head>

<body>

</body>

</html>

▶▶

2. 프레임 분할 시에 문서가 분할되어 보이지 않도록 하기 위해서 설정해야 하는 속성을 나열해 보시오.

▶▶ <frameset border=0>, <body leftmargin=0 topmargin=0>

3. target 속성으로 지정할 수 있는 예약어 네 가지는 무엇인가?

▶▶ _blank, _self, _top, _parent

4. 아이프레임 안에 한빛미디어 사이트를 보여주는 소스를 구성해 보시오. 폭 500픽셀, 높이 400픽셀, 프레임 테두리는 0픽셀로 설정한다.

▶▶ <iframe src="http://www.hanbitbook.co.kr" width=500 height=400 frameborder=0>

실습형문제

1. <frameset> 태그 세 번 중첩하여 사용하기

<html>

<head>

<title>8장 실습 1번 </title>

<frameset cols="750, *">

<frameset rows="80,*">

<frame src="1.htm">

<frameset cols="150, *">

<frame src="2.htm">

<frame src="3.htm">

</frameset>

</frameset>

<frame src="4.htm">

</frameset>

</head>

<body>

</body>

</html>

ㆍ메인 창 : 좌/우 프레임 분할. 좌측 창은 750픽셀, 우측 창은 나머지 영약

ㆍ좌측 창 : 상/하 프레임 분할, 좌측 창은 절대 값 80픽셀, 하단 창은 나머지 영역으로 지정

ㆍ좌측 하단 창 : 좌/우 프레임 분할, 좌측 창은 150픽셀, 우측 창은 나머지 영역으로 지정

· 키포인트 : 프레임 셋을 세 번 중첩해서 프레임을 구성해본다.

2. 다음넷 메뉴판을 이용한 프레임 구성하기

· 키포인트 : 상단 프레임의 메뉴를 선택하여 하단 프레임에 내용이 보이게 한다.

<html>

<head>

<title>8장 실습 2번</title>

<frameset rows="100,*" border=0>

<frame src="menu.htm" scrolling=no>

<frame src="contents.htm" name="content">

</frameset>

</head>

프레임 위/아래로 분할, 상단 창은 100픽셀, 하단 창은 나머지 영역으로 지정

ㆍ상단 창은 menu.htm 문서, 하단 창은 contents.htm 문서 지정

ㆍ메뉴 선택 시 하단 창에 문서가 보이도록 지정

<body>

</body>

</html>

3. 다음넷 메뉴판을 이용한 아이프레임 구성하기

· 키포인트 : 다음넷 메뉴판을 선택하면 아이프레임에 문서가 보이게 한다.

ㆍ<!--코딩 2--> 위치에 아이프레임 삽입

ㆍ아이프레임에 보여줄 초기 문서 : contents.htm

ㆍ표 크기에 맞게 아이프레임 크기 설정

ㆍ다음넷 메뉴판을 선택 시 아이프레임 안에서 문서가 보이도록 설정

<html>

<head>

<title>8장 실습 3번</title>

<!-- 코딩1 -->

<base target=iframe>

</head>

<body text=white link=white vlink=white topmargin=0 text=cornflowerblue>

<!-- 표1 -->

<table border=0 cellpadding=0 cellspacing=0 width=700 align=center>

<tr><td height=65>

<a href="http://www.daum.net"><img src="logo.gif" border="0"></a></td>

</tr>

</table>

<!-- 표2 -->

<table bgcolor=#000000 border=0 cellspacing=0 cellpadding=0 width=700 align=center>

<tr><td>

<table border=0 cellpadding=0 cellspacing=1 width=100%>

<tr>

<th bgcolor=#fece00 width=25% height=20>

<a href="http://www.hanbitbook.co.kr">한빛미디어</a></th>

<th bgcolor=#fe8c14 width=25%>

<a href="http://www.daum.net">다음넷</a></th>

<th bgcolor=#8cca2d width=25%>

<a href="http://www.korea.com">코리아닷컴</a></th>

<th bgcolor=#4daace>

<a href="http://www.hanmir.com">한미르</a></th>

</tr>

</table>

</td></tr>

</table>

<!-- 표3 -->

<table border=0 cellpadding=0 cellspacing=0 width=695 align=center>

<tr>

<td bgcolor=#FFFFFF height=3></td>

</tr>

</table>

<!-- 아이프레임이 삽입 되는 표 -->

<table border=1 width=700 height=400 align=center cellpadding=0 cellspacing=0 bordercolor=pink bordercolorlight=cornflowerblue>

<tr>

<td align=center>

<!-- 코딩2 -->

<iframe src="contents.htm" name=iframe width=695 height=500 ></iframe>

</td>

</tr>

</table>

</body>

</html>

심화 연습 문제

1. ‘탄생화 이야기’프레임 구성하기

ㆍframe.htm 문서 생성

ㆍ수평 3개로 분할, 상단 창 129픽셀, 하단 창 30픽셀, 중간 창 나머지 영역으로 지정

ㆍ상단 창의 그림에 여백이 생기지 않도록 설정

ㆍ하단 창의 월을 선택하면 중앙에 보이도록 설정

· 키포인트 : 프레임을 3개로 분리하고 원하는 프레임에 문서가 보이도록 한다.

<html>

<head>

<title>탄생화 이야기 - 8장 심화 연습 문제</title>

</head>

<frameset rows="129,*,30" frameborder=0 framespacing=0>

<frame src="frame_top.htm" scrolling="no" noresize>

<frame src="1.htm" name="center">

<frame src="frame_bottom.htm" scrolling="no" noresize>

</frameset>

<body>

</body>

</html>