5장 연습문제

서술형문제

1. 홈페이지에 삽입할 수 있는 그림 파일 형식을 모두 쓰시오.

▶▶

GIF	저속 모뎀용, 256 컬러, 단순한 그림, 움직이는 그림
JPG	JPEG에서 개발, 16만 컬러, 압축률이 좋아 고해상
PNG	JPG와 GIF의 장점, 하지만 브라우저와의 호환성 문제로 사용 저조
BMP	파일크기대, 윈도우와 OS/2에서만 사용

2. GIF 형식의 특징을 설명해 보시오.

▶▶

애니메이션 (Animated GIF)	단순한 움직이는 그림
투명 그림 (Transparent GIF)	배경 색상을 투명 처리 가능
인터레이스 그릴 (Interaced GIF)	점차적으로 선명하게 표현 가능

3. bg.gif 그림을 배경 그림으로 삽입하고 배경 그림이 스크롤되지 않게 하려면 어떻게 해야 하는가? 소스를 적으시오.

▶▶ <body background="bg.gif" bgproperties=fixed>

4.그림과 문자가 서로 정확하게 가운데 위치시킬 때 사용되는 align 속성 값은 무엇인가?

▶▶ <img src=".." align=absmiddle>

5. 문자열을 그림 아래로 내려주는 태그는 무엇인가?

▶▶ <br clear=all>

6. img1.gif, img2.gif가 양쪽 정렬되고 문자열이 그림 사이에 가운데 정렬되게 하는 소스를 쓰시오.

▶▶

<img src="img1.gif" align=left>

<img src="img2.gif" align=right>

<div align=center>문자열</div>

실습형문제

1. 고양이 앨범 제작하기

· 준비 파일 : C:/MyHome/Section2/Chap05/05ex02 폴더의 그림

· 키포인트 : 그림 여백으로 그림간의 간격을 두고, 그림을 가운데 정렬한다.

<html>

<head>

</head>

<body>

<center>

<h2>고양이 앨범</h2>

<img src="cat1.jpg" border=1 hspace=10 vspace=10>

<img src="cat2.jpg" border=1 hspace=10 vspace=10>

<img src="cat3.jpg" border=1 hspace=10 vspace=10><br>

<img src="cat4.jpg" border=1 hspace=10 vspace=10>

<img src="cat5.jpg" border=1 hspace=10 vspace=10>

<img src="cat6.jpg" border=1 hspace=10 vspace=10>

</center>

</body>

</html>

2. ‘발렌타인데이의 유래’문서 꾸미기

· 준비 파일 : C:/MyHome/Section2/Chap04/04ex04/valentine_start.htm

· 키포인트 : 그림과 문자열이 어울리도록 한다.

<html>

<head>

<title>발렌타인데이의 유래</title>

</head>

<body bgcolor="#733C18" text="#B59A94" leftmargin=100>

<center><img src="choco_title.jpg"></center>

<img src="choco.jpg" width=250 height=330 align=left hspace=10>

<div align=justify><font size=2>

발렌타인데이의 유래는 미스테리로 싸여 있습니다만 2월은 오랜 동안 로맨스의 달이 되어 왔습니다. 성발렌타인데이는 기독교와 고대 로마 역사의 유물입니다. 그러면 성 발렌타인은 과연 누구일까요? <p>

[중략]

축하카드협회에 의하면 발렌타인데이카드는 크리스마스카드에 이어 두 번째로 많이 보내지며 약 85%는 여자가 보낸다고 합니다.<br clear=all></font>

</div>

<center><img src="choco_line.jpg"></center>

</body>

</html>

3. ‘한사람이 있었습니다’문서 배경 고정하기

· 키포인트 : 배경 그림을 고정시킨다.

<html>

<head>

<title>한사람이 있었습니다</title>

</head>

<body background="jjang.jpg" bgproperties=fixed text=#FFFFCC>

<basefont size=4>

<pre>

한사람이 있었습니다

만나면 헤어지기가 싫고,

[중략]

그 한 사람은 바로 당신입니다......

</pre>

</basefont>

</body>

</html>

심화 연습 문제

1. 루시를 찾아서

· 준비 파일 : C:/MyHome/Section2/Chap04/04menu01/diary_start.htm

· 키포인트 : 그림과 문자열의 정렬 관계를 다양하게 설정해본다

<html>

<head>

<title>루시를 찾아서</title>

</head>

<body bgcolor="black" text="#999999" leftmargin=150 topmargin=20>

<basefont size=2>

<center>

<font face="도담9" color="white" size=7>루시를 찾아서!</font>

</center><br>

<p align=center>

<img src="lucy4.gif" align="middle" hspace=0>

Sandra Bullock<br clear=all>

영화 "While You Were Sleeping"(1995)의 Lucy Eleanor 'Luce' Moderatz 역

</p><br><br>

<img src="lucy3.gif" align="left">

<img src="lucy2.gif" align="right">

<div align="left">

<br><br>

Lucille Ball<br>

TV-Series "I Love Lucy" (1951-1957)<br>

Lucy Esmeralda MacGillicuddy Ricardo 역<br>

</div>

<div align="right">

<br><br>

Dakota Fanning <br>

영화 "I Am Sam" (2001) <br>

Lucy Diamond Dawson역<br>

</basefont>

</body>

</html>