본문 바로가기
Book

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

블루사파 2009. 4. 28. 12:40

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

인터넷 프로그래밍 입문 7장연습문제.hwp


7장 연습문제

서술형문제

1. 셀과 셀 사이의 간격을 나태내는 표 속성은 무엇인가? 셀 경계선과 내용 사이의 여백을 지정하는 표 속성은 무엇인가? 각각의 속성명을 쓰시오.

▶▶ 셀과 셀 사이 간격 - cellspacing

셀 경계선과 내용 사이의 여백 - cellpadding

2. <table> 태그 하나에 속성을 지정하여 선을 얇게 표시하는 방법은 무엇인가? <table> 태그에 지정하는 속성만 나열하시오.

▶▶ <table border=1 bordercolor=white bordercolorlight=black cellspacing=0>

3. 표의 외곽선을 위, 아래로만 표시하고 싶다면 어떻게 해야 하는거? <table> 태그의 속성만 나열하시오.

▶▶ <table border=1 frame=hsides rules=none>

4. 셀의 열 합치기 속성과 행 합치기 속성을 쓰시오.

▶▶ 열 - colspan, 행 - rowspan

실습형문제

1. 사이트맵 제작하기

<html>

<head>

<title>Sitemap</title>

</head>

<body text=#003399 link=blue vlink=#6495ED>

<h2 align=center>Sitemap</h2>

<!-- 코딩1 : 표1 -->

<table border=0 width=510 cellpadding=0 cellspacing=0 bgcolor=#6699CC align=center>

<tr><td>

<!-- 코딩2 : 표2 -->

<!-- 종속 테이블 시작 *******************************************************************-->

<table width="100%" height="100%" border="0" cellpadding="10" cellspacing="1" align="center">

<tr height="40" align="center" bgcolor="skyblue">

<th width="170"><font color="white">소개</font></th>

<th width="170"><font color="white">영화</font></th>

<th width="170"><font color="white">음악</font></th>

</tr>

<tr valign="top" bgcolor=white>

<td>

<ol>

<li><b>주인장소개</b>

<li>가족소개

<li><a href src=http://naver.com>친구소개</a>

<li><a href src=http://daum.net>홈페이지소개</a>

</ol>

</td>

<td>

<ul>

<li>추억의영화

<li>최근에본영화

<li>영화포스터모음

</ul>

</td>

<td>

<ul>

<li>음악감상실

--- 생략 ---

<!-- 종속 테이블 끝 *******************************************************************-->

</td></tr>

</table>

</body>

</html>

ㆍ표1, 표2를 중첩 사용

ㆍ표1 배경색이 표 테두리로 표시되게 설정

ㆍ<!-코딩1-!>: 표1 수정, 테두리 0 픽셀, 폭 510픽셀, 셀 간격과 셀 여백 0픽셀, 배경색 #6699CC, 표는 화면의 가운데 정렬

ㆍ<!-코딩2-!>: 한 번도 방문하지 않는 링크색은 Blue, 한 번이라도 방문한 링크색은 Comflowerblye(#6495ED)

· 키포인트 : 표를 중첩으로 사용하고 표의 배경색을 테두리로 표현 방법으로 표 테두리선을 가늘게 표시한다.

2. ‘페이지를 찾을 수 없습니다’페이지 만들기

· 키포인트 : 표가 화면의 중앙에 표시되고, 표의 외곽선만 검정색으로 표시한다.

ㆍ안쪽에 종속된 표의 테투리는 외곽선만 가늘게 표현

ㆍ바깥쪽 표는 안쪽에 종속된 표가 항상 화면의 중앙에 위치하도록 속성 지정

<html>

<head>

<title>페이지를 찾을 수 없습니다.</title>

</head>

<body>

<table width=100% height=100%><tr><td align=center>

<!-- 종속 테이블 시작 -->

<table border=1 bordercolor=white bordercolorlight=black width=400 cellspacing=0 cellpadding=0 frame=box rules=none>

<tr>

<td><img src="images/notpage.gif" width=400 height=60></td></tr>

<tr height=130>

<td bgcolor=white>

<ul>

<b>죄송합니다.</b><br>요청하신 페이지를 찾을 수 없습니다.<br>

<u>찾으시려는 웹페이지의 이름</u>이 바뀌었거나 현재 <br>

사용할 수 없습니다.<br>

입력하신 페이지 주소가 정확한지 다시한번<br>

확인해 보시기 바랍니다.<br>

</ul>

</td></tr>

<tr height=50>

<td align=center bgcolor=#eeeeee>

<img src="images/bt_mainpage.gif"> &nbsp;

<img src="images/bt_beforepage.gif"> &nbsp;

<img src="images/bt_mail.gif">

</td>

</tr>

</table>

<!-- 종속 테이블 끝 -->

</td></tr></table>

</body>

</html>

3. 조각 그림 표로 짜 맞추기

· 키포인트 : 표를 이용해서 조각 그림을 짜 맞춘다.

ㆍjeniffer-1.htm을 jeniffer-2.htm과 같이 화면의 중앙에 표시되도록 설정ㆍjeniffer-1.htm을 jeniffer-3.htm과 같이 그림 한 조각씩 각각의 쎌에 삽입하여 표 구성

<html>

<head>

<title>화면 정중앙에 표시 </title>

</head>

<body>

<table width=100% height=100% border=0>

<tr>

<td align=center>

<!-- 종속 테이블 시작 ****************************** -->

<!-- 표1 -->

<table width=500 cellpadding=0 cellspacing=0 border=0>

<tr>

<td><img src="jeniffer_01.gif"></td>

<td><img src="jeniffer_02.gif"></td>

<td><img src="jeniffer_03.gif"></td>

</tr>

</td>

</tr>

</table>

<!-- 표2 -->

<table width=500 cellpadding=0 cellspacing=0 border=0>

<tr>

<td><img src="jeniffer_04.gif"></td>

<td><img src="jeniffer_05.gif"></td>

</tr>

</table>

<!-- 종속 테이블 끝 ****************************** -->

</td>

</tr>

</table>

</body>

</html>

심화 연습 문제

1. ‘브리짓 존슨의 일기’메인 페이지 표로 구성하기

· 키포인트 : 표로 화면 전체의 틀을 구성하고 다양한 속성을 적용해서 영화 소개 문서를 제작해 본다.

<html>

<head>

<title>음악 감상실</title>

<style>

.contents{margin:10,150; width:670; text-align:justify;}

</style>

</head>

<!-- 코딩1 -->

<body link=black vlink=black>

<div class=contents>

<h3 align=center>

<font size="7">로</font>비 <font size="6" color="">윌</font>리암스(Robbie Williams) 앨범소개

</h3><br>

<img src="data/album.jpg" align=left>

<img src="data/take_that.jpg" align=right>

<center>

<font size="+1" color="7B928A"><b>Robbie Williams</b></font><br><br>

로비 윌리암스가 발표한 스윙 재즈 앨범<br>

<font color="red"><b>"Swing When You're Winning"</b></font><br><br>

<!-- 코딩2 --><a href="http://www.robbiewilliams.com" title="공식 사이트" target=_blank>

http://www.robbiewilliams.com</a>

</center>

<br clear=all><br>

<font color="7B928A">

1996년 보이밴드 ‘테이크댓’에서 탈퇴해 솔로로 활동을 시작한 로비 윌림암스는 이번 앨범을 통해 음악성으로도 인정받고 있다.

</font><br>

<!-- 코딩3 -->

<a href="data/williams.jpg" target=_blank>

<img src="data/williams.jpg" width=300 height=200 align=right border=10 hspace=20 vspace=20 alt="윙크??^^">

</a>

ㆍ7행 3열의 표 생성, 본문은 내용.txt에서 복사하여 사용

ㆍ1열의 1행부터 6개 병합, 3열의 2행부터 5개 병합

ㆍ1행의 2열부터 2개 병합, 7행의 열 모두 병합

ㆍ1열의 내용 : 오른쪽 정렬, <hr> 태그로 선 입력

ㆍ2열 1행 : title.gif 배경 그림 지정

ㆍ2열 2행 : photo1.jpg 그림 왼쪽 정렬, 문자열과 어울리게 설정

ㆍ3열 : photo2.jpg~photo7.jpg 그림 사용

2.‘회원가입 양식 표’를 이용해 단계별 제작하기

· 키포인트 : 회원가입 양식을 표로 디자인하고 문서를 모두 링크 설정한다.

<!-- member1.htm 시작 --!>

<html>

<head>

<title>로긴양식</title>

</head>

<body text=#000080>

<center><img src="images/title.gif" width=476 height=89 alt= border=0></center>

<br><br>

<table border=0 align=center cellspacing=1 bordercolor=white bordercolorlight=DarkRed bgcolor=PapayaWhip width=300 height=150>

<tr><td colspan=2 height=2 background="dot.gif"></td></tr>

<tr>

<td colspan=2 bgcolor=#ff3342 align=center height=30><b><font face="굴림" size=2>로긴 확인</font></b></td>

</tr>

<tr><td colspan=2 height=2 background="dot.gif"></td></tr>

<tr align=center>

<td bgcolor=PeachPuff width=100><font face="굴림" size=2>아이디</td>

<td>gusungmin</td></font>

</tr>

<tr align=center>

<td bgcolor=PeachPuff><font face="굴림" size=2>비밀번호</td>

<td>20021179</td></font>

</tr>

<tr><td colspan=2 height=2 background="dot.gif"></td></tr>

<tr >

<td colspan=2 bgcolor=PeachPuff align=center height=30>

<a href="member2.htm"><img src="images/bt_login.gif" border=0></a>

</td>

</tr>

<tr><td colspan=2 height=2 background="dot.gif"></td></tr>

</table>

<br>

</body>

</html>

<!-- member1.htm 끝 --!>

<!-- member2.htm 시작 --!>

<html>

<head>

<title>동의약관</title>

</head>

<body>

<center><img src="images/title.gif" width=476 height=89 alt= border=0></center>

<br><br>

<table border=0 align=center cellspacing=1 bordercolor=white bordercolorlight=DarkRed bgcolor=PapayaWhip width=590>

<tr><td colspan=2 height=2 background="dot.gif"></td></tr>

<tr>

<td colspan=2 bgcolor=#ff3342 align=center height=30><b><font face="굴림" size=2>동의 약관</font></b></td>

</tr>

<tr><td colspan=2 height=2 background="dot.gif"></td></tr>

<tr>

<td colspan=2>

<pre>

제1장 총 칙

제 1 조 (약관의 적용)

인터넷 서비스(이하"서비스"라 합니다)의 이용에는 기본 이용약관

(이하"기본약관"이라 합니다)과 이 약관을 함께 적용합니다

제 2 장 서비스 이용계약

제 3 조 (이용계약의 성립)

① 서비스 가입 신청시 본 약관을 읽고 "동의함" 버튼을 누르면

이 약관에 동의하는 것으로 간주됩니다.

② 이용계약은 서비스 이용희망자의 이용약관 동의 후 이용신청에

대하여 회사가 승낙함으로써 성립합니다.

제 4 조 (계약사항의 변경)

회원은 개인정보관리를 통해 언제든지 개인정보를 열람하고

수정할 수 있습니다.

회원은 이용신청시 기재한 사항이 변경되었을 경우에는 온라인으로

수정을 해야 하고 미변경으로 인하여 발생되는 문제의 책임은 회원에게 있습니다.

</pre>

</td>

</tr>

<tr><td colspan=2 height=2 background="dot.gif"></td></tr>

<tr>

<td colspan=2 bgcolor=PeachPuff align=center height=30>

<a href="member3.htm"><img src="images/bt_yes.gif" border=0></a>

<img src="images/bt_no.gif" border=0>

</td>

</tr>

<tr><td colspan=2 height=2 background="dot.gif"></td></tr>

</table>

<br><br><br><br><br>

</body>

</html>

<!-- member2.htm 끝 --!>

<!-- member3.htm 시작 --!>

<html>

<head>

<title>회원가입양식</title>

</head>

<body>

<center><img src="images/title.gif" width=476 height=89 alt= border=0></center>

<table border=0 align=center cellspacing=1 cellpadding=3 bordercolor=white bordercolorlight=DarkRed bgcolor=PapayaWhip width=500>

<tr><td colspan=2 height=2 background="dot.gif"></td></tr>

<tr>

<td colspan=2 bgcolor=#ff3342 align=center height=30><b><font face="굴림" size=2>필수 입력사항</b></td>

</tr>

<tr><td colspan=2 height=2 background="dot.gif"></td></tr>

<tr>

<td bgcolor=PeachPuff align=center width=100><font face="굴림" size=2>아이디</td>

<td><font face="굴림" size=2>gusungmin</td>

</tr>

<tr>

<td bgcolor=PeachPuff align=center><font face="굴림" size=2>비밀번호</td>

<td><font face="굴림" size=2>20021179</td>

</tr>

<tr>

<td bgcolor=PeachPuff align=center><font face="굴림" size=2>이름</td>

<td><font face="굴림" size=2>구성민</td>

</tr>

<tr><td colspan=2 height=2 background="dot.gif"></td></tr>

<tr>

<td bgcolor=PeachPuff align=center><font face="굴림" size=2>주민등록번호</td>

<td><font face="굴림" size=2>810101-1258877</td>

</tr>

<tr>

<td bgcolor=PeachPuff align=center>실제 생일</td>

<td><font face="굴림" size=2>1981년 1월 1일 양력

</td>

</tr>

<tr><td colspan=2 height=2 background="dot.gif"></td></tr>

<tr>

<td bgcolor=PeachPuff align=center><font face="굴림" size=2>E-mail주소</td>

<td><font face="굴림" size=2>ggmgsm@nate.com</td>

</tr>

<tr><td colspan=2 height=2 background="dot.gif"></td></tr>

<tr>

<td colspan=2 bgcolor=#ff3342 align=center height=30><b><font face="굴림" size=2>선택 입력사항</b></td>

</tr>

<tr><td colspan=2 height=2 background="dot.gif"></td></tr>

<tr>

<td bgcolor=PeachPuff align=center><font face="굴림" size=2>전화번호</td>

<td><font face="굴림" size=2>02-7878-8282</td>

</tr>

<tr>

<td bgcolor=PeachPuff align=center><font face="굴림" size=2>휴대폰번호</td>

<td><font face="굴림" size=2>011-9787-8282</td>

</tr>

<tr><td colspan=2 height=2 background="dot.gif"></td></tr>

<tr>

<td bgcolor=PeachPuff align=center><font face="굴림" size=2>우편번호</td>

<td><font face="굴림" size=2>527-875</td>

</tr>

<tr>

<td bgcolor=PeachPuff align=center>주소</td>

<td><font face="굴림" size=2>광주광역시 광산구 서봉동 호남광산캠</td>

</tr>

<tr>

<td bgcolor=PeachPuff align=center><font face="굴림" size=2>나머지 주소 </td>

<td><font face="굴림" size=2>8718-8</td>

</tr>

<tr><td colspan=2 height=2 background="dot.gif"></td></tr>

<tr>

<td bgcolor=PeachPuff align=center><font face="굴림" size=2>메일링서비스</td>

<td><font face="굴림" size=2>신청</td>

</tr>

<tr><td colspan=2 height=2 background="dot.gif"></td></tr>

<tr>

<td bgcolor=PeachPuff align=center><font face="굴림" size=2>관심분야</td>

<td><font face="굴림" size=2>컴퓨터</td>

</tr>

<tr><td colspan=2 height=2 background="dot.gif"></td></tr>

<tr>

<td bgcolor=PeachPuff align=center><font face="굴림" size=2>자기 소개</td>

<td><font face="굴림" size=2>학생임다</td>

</tr>

<tr><td colspan=2 height=2 background="dot.gif"></td></tr>

<tr>

<td colspan=2 bgcolor=PeachPuff align=center height=30>

<a href="member4.htm"><img src="images/bt_send.gif" border=0></a>

<img src="images/bt_rewrite.gif">

</td>

</tr>

<tr><td colspan=2 height=2 background="dot.gif"></td></tr>

</table>

</body>

</html>

<!-- member3.htm 끝 --!>

<!-- member4.htm 시작 --!>

<html>

<head>

<title>동의약관</title>

</head>

<body>

<center><img src="images/title.gif" width=476 height=89 alt= border=0></center>

<br><br>

<table border=0 align=center cellspacing=1 bordercolor=white bordercolorlight=DarkRed bgcolor=PapayaWhip width=400 height=300>

<tr><td colspan=2 height=2 background="dot.gif"></td></tr>

<tr>

<td colspan=2 bgcolor=#ff3342 align=center height=30><b><font face="굴림" size=2>정상적으로 가입되었습니다.</font></b></td>

</tr>

<tr><td colspan=2 height=2 background="dot.gif"></td></tr>

<tr align=center>

<td colspan=2>

<img src="images/flower.gif">

<br><br>

<font face="굴림" size=2>가입을 축하합니다.</font>

<tr><td colspan=2 height=2 background="dot.gif"></td></tr>

</table>

</body>

</html>

<!-- member4.htm 끝 --!>

ㆍmember1.htm, member2.htm, member3.htm, member4.htm 문서 : 각각 표로 제작

ㆍmember1.htm 문서 : 로그인 그림을 선택 시 member2.htm 문서로 이동

ㆍmember2.htm 문서 : 동의함 선택 시 member3.htm 문서로 이동

ㆍmember3.htm 문서 : 확인 그림 선택 시 member4.htm 문서로 이동

실습하기1. 나누기 힘들 땐 표를 중첩해서 사용한다 - p.178

· 키포인트 : 셀 합치기와 종속 표 사용법을 비교해 보고 행마다 분할되는 셀의 개수가 다를 경우 어떤 방법을 사용하는 것이 좋은지 알아본다.

<html>

<head>

<title>오렌지</title>

</head>

<body bgcolor="#FF9A00" text="#FFFF99">

<table border="0" align="center" width="390" bgcolor="#FFFFCC"><!--코딩1-->

<tr>

<td height="100" colspan="2" background="title.gif">&nbsp;</td><!--코딩2-->

</tr>

<tr>

<td bgcolor="#FF9A00">

<img src="orange.jpg" width="200" height="250" border="1">

</td>

<td valign="top" bgcolor="#FF9A00">

<font size="2" color="#FFFF99">한국에서는 만다린 오렌지가 따뜻한 남쪽지방인 제주도에서 재배되고 있다. 만다린 오렌지의 특징은껍질을 벗기기가 쉬워 다른 감귤류보다 먹기 편하고 당도가 매우 높다는 점이다.<p>

오렌지 오일은 바이러스 감염증을 막는 비타민 C의 흡수를 돕고 또 체온을 낮추는 작용이 있어서 감기, 기관지염, 발열증상에 각각 좋은 효과가 있는 것으로 사료된다.</font>

</td>

</tr>

<tr>

<td width="390" colspan="2" bgcolor="#FF9A00" height="150">

<!--종속테이블 시작**************************************************************-->

<table border="0" align="center" width="390">

<tr valign="top" height="140">

<td width="130">

<img src="cook1.jpg" width="120" height="120" border="1"><br>

<font size="2" color="#FF6600">▶</font>

<font size="2" color="#FFFFCC">오렌지수플레</font>

<!--코딩3-->

</td>

<td width="130">

<img src="cook2.jpg" width="120" height="120" border="1"><br>

<font size="2" color="#FF6600">▶</font>

<font size="2" color="#FFFFCC">오렌지탕수육 </font>

<!--코딩3-->

</td>

<td width="130">

<img src="cook3.jpg" width="120" height="120" border="1"><br>

<font size="2" color="#FF6600">▶</font>

<font size="2" color="#FFFFCC">오렌지크레이프</font>

</td>

</tr>

</table>

<!--종속테이블 끝**************************************************************-->

</td>

</tr>

</table>

</body>

</html>

실습하기2. 분할된 그림 표로 짜 맞추기 - p.179

· 키포인트 : 분할된 그림이 하나의 그림처럼 보이도록 표 태그로 짜 맞추어 본다.

<html>

<head>

<title>커피에 대하여</title>

</head>

<body bgcolor=FFF3DE>

<a name=top></a>

<h1 align=center><font size=7 color="brown" face="MurrayHill Bd BT">About Coffee</font> </h1>

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

<tr>

<td>

<img src="images/coffee_01.gif"></td>

<td>

<a href="#note1"><img src="images/coffee_02.gif" border=0></a><br>

<a href="#note2"><img src="images/coffee_03.gif" border=0></a><br>

<a href="#note3"><img src="images/coffee_04.gif" border=0></a></td>

</tr>

<tr>

<td bgcolor=F8DAA8 colspan=2 background="images/coffee_bg.gif">

<table width=450 align=center><tr><td>

<!-- 두번째 행에 포함되는 내용 시작 ***** -->

<br><br>

<a name=note1></a>

<b>*커피의 기원*</b><br><br>

에티오피아의 고원 아비시니아에 전해지는 이야기로, 양치기 칼디가 양떼들이 흥분 상태로 뛰노는 것을 보고 그 원인을 조사해 본 결과 목장 근처의 나무에서 빨간 열매를 먹었기 때문이라는 것을 알아내었다.<br>

이 사실을 수도원 원장에게 알려 열매를따서 끓여 먹어보니 전신에 기운이 솟는것을 느끼고 다른 제자들도 같은 경험을하게 되었다. <br><br><br>

<center>

<a href="#top"><img src="images/up.gif" border=0></a>

</center><br><br><br>

<a name=note2></a>

<b>*커피의 어원*</b><br><br>

커피라는 말의 뿌리는 에티오피아의 카파(caffa)라는 말에서 찾을 수 있다.<br>

카파란 "힘"을 뜻하는 아랍어로 에티오피아에서 커피나무가 야생하는 곳의 지명이기도 하다. <br>

이 말은 '힘과 정열'을 뜻하는 희랍어 'kawef'와 통한다. <br>

그리고 카파가 아라비아에서 'qahwa' (와인의 아랍어)가 되고 터키에 건너와 '카베(kqhve)'로 유럽에 건너가 '카페(cafe)', 미국에서는 '커피', 일본에서는 '고히'로 불러지고 있다. <br><br><br>

<center>

<a href="#top"><img src="images/up.gif" border=0></a>

</center><br><br><br>

<a name=note3></a>

<b>*커피의 역사*</b> <br><br>

커피나무의 원산지는 에티오피아, 오늘날처럼 맛는 음료로 발전한 곳은 아라비아 지역이다. <br>

1,000년경 이미 커피를 볶아 삶은 물을 마시고 있었다.<br>

즉, 에티오피아를 발원점으로 홍해를 건너 아라비아 지역에, 그리고 중앙아시아의 터키에 이르러 음료로서 자리를 잡게된 것이다. <br>

우리나라는 아관파천 무렵 1895년경 러시아 공사관에서 고종황제가 마신것이 처음, 그 후 독일의 손탁이라는 여인이 중구 정동에 커피점을 차린것이 효시이다. <br><br><br>

<center>

<a href="#top"><img src="images/up.gif" border=0></a>

</center>

<!-- 두번째 행에 포함되는 내용 끝******************** -->

</td></tr></table>

</td></tr>

<tr height=23>

<td colspan=2>

<img src="images/coffee_end.gif">

</td>

</tr>

</table>

</body>

</html>

저작자표시

'Book' 카테고리의 다른 글

[한빛미디어] 인터넷 프로그래밍 입문 9장 연습문제  (0) 2009.04.28
[한빛미디어] 인터넷 프로그래밍 입문 8장 연습문제  (0) 2009.04.28
[한빛미디어] 인터넷 프로그래밍 입문 6장 연습문제  (0) 2009.04.28
[한빛미디어] 인터넷 프로그래밍 입문 5장 연습문제  (0) 2009.04.13
[한빛미디어] 인터넷 프로그래밍 입문 4장 연습문제  (0) 2009.04.13

'Book' Related Articles

티스토리툴바