14장 연습문제

인터넷활용

서술형문제

1. 필터의 종류를 아는 대로 나열하고 간단한 특징을 쓰시오.

사진에 특수효과를 주는 필터
gray	컬러 사진을 흑백 사진으로 변환
invert	그림 반전
xray	X-Ray 촬영 사진
chroma	배경색을 투명하게 해줌
문자와 그림
filph	수평 뒤집기
filpv	수직 뒤집기
alpha	그림 경계를 투명하게 해줌
blur	번짐효과
wave	물결효과
문자에주로
dropshadow	원하는 위치에 그림자 생성
shadow	원하는 각도로 번지는 그림자 생성
glow	외부 광채

2. 컬러 값을 모두 제거하고 흑백사진을 만들어 주는 필터는 무엇인가?

▶▶ gray()

3. 불투명도(opacity) 값으로 투명도를 조절하여 경계가 흐린 그림을 만들 수 있는 필터는 무엇인가?

▶▶ alpha()

4. 그림자를 만들어주는 필터 2가지를 쓰시오.

▶▶ dropshadow(), shadow()

5. 스타일 속성만 기록해서 외부에 저장한 CSS 파일을 문서에 적용하는 법은 무엇인가? 같은 폴더에 저장한 style.css를 적용할 경우 소스를 쓰시오.

▶▶ <link rel=stylesheet href="style.css" type="text/css">

실습형문제

1. 흑백 사진과 그림자 문자 만들기

ㆍ <!--코딩 1--> : 문자에 그림자 필터를 적용한다.

ㆍ <!--코딩 2--> : 그림을 흑백 사진으로 바꾼다.

· 키포인트 : 컬러 사진을 흑백 사진으로 변경하고 문자에 그림자를 만들어 표현한다.

<html>

<head>

<title>흑백 사진과 그림자 문자</title>

</head>

<body>

<center>

<!-- 코딩1 -->

<p style="width:500 ; font-size:20pt ; font-family:arial black ;

filter:dropshadow(color=gray,offx=3,offy=3,position=0)">

How to Lose a Guy in 10 Days!</p>

<!-- 코딩2 -->

<img src="poster.jpg" width=400 height=500 style="filter:gray()">

</center>

</body>

</html>

2. 그림과 문자 수평으로 뒤집기

<html>

<head>

<title>수평 뒤집기</title>

</head>

<body>

<center>

<!-- 코딩1 -->

<p style="width:400; font-size:20pt; color : #999966; font-family: comic sans ms; filter:fliph()">

How to Lose a Guy in 10 Days!</p>

<!-- 코딩2 -->

<img src="poster.jpg" width=400 height=500  style="filter:fliph()">

</center>

</body>

</html>

· 키포인트 : 문자와 그림을 수평으로 뒤집는다.

3. 별자리 운세 홈페이지 CSS 파일 생성 및 적용하기

· 키포인트 : 별자리 운세 홈페이지에 적용할 스타일을 CSS 파일로 생성한 다음 모든 문서에 적용해본다.

ㆍstar.css 파일을 생성해서 문서에 적용할 스타일을 모두 지정하고 모든 문서에 적용

ㆍ<body> 태그 선택자 : 글자크기 10pt, 행간 15pt, 여백 40으로 설정

ㆍ<td> 태그 선택자 : 글자크기 10pt, 행간 18pt로 설정

ㆍtitle1 클래스 선택자 : 글자크기 15pt, 가운데 정렬

ㆍtitle2 클래스 선택자 : 진하게, 글자크기 11pt, 왼쪽 들여쓰기 20, 배경 그림 images/star.gif 삽입, 반복되지 않게 설정

<star.css> 작성

body { font-size:10pt; color:rgb(0,102,204); line-height:15pt; background-color:white; margin:40; }

td { font-size:10pt; color:rgb(0,153,255); line-height:18pt; }

.title1 { font-size:15pt; color:rgb(0,153,255); text-align:center; }

.title2 { font-weight:bold; font-size:11pt; color:rgb(0,102,204);

background:url('images/star.gif') no-repeat; padding-left:20; }

star01~12까지

head 태그 내에

<link rel="stylesheet" href="star.css"> 삽입

심화 연습 문제

1. 레이어와 필터로 포스터 그림 디자인하기

<html>

<head>

<title>레이어와 필터 함께 사용하기</title>

<!-- 코딩1 -->

<style>

img{width:400; height:500}

div{width:400; height:500;position:absolute;}

#layer1{left:300; top:50; z-index:1}

#layer0{left:400; top:90; z-index:0}

#layer2{left:260; top:130; z-index:2; width:300; font-size:15pt; color: #FF6600; text-align:left; filter:wave(strength=25,freq=4,lightstrength=25,phase=21,add=0)}

</style>

</head>

<body>

<!-- 코딩2 -->

<div id=layer1><img src="poster.jpg"></div>

<div id=layer0><img src="poster.jpg" style="filter:gray()"></div>

<div id=layer2 style="left:340"> &nbsp;&nbsp; 뭔가~ </div>

<div id=layer2 style="top:260"> &nbsp;&nbsp; 특별한 꿍꿍이가 있는 </div>

<div id=layer2 style="left:300; top:190"> &nbsp;&nbsp; 그들의 로맨스! </div>

</body>

</html>

ㆍposter.jpg 그림 삽입, 크기 400*500

ㆍ그림을 레이어에 담아서 두 개를 겹침, 뒤에 배치되는 그림을 흑백 사진으로 변환

ㆍ포스터 문자 : 레이어로 처리, 포스터 그림 위에 두고 wave()필터 적용

· 키포인트 : 레이어와 필터로 포스터 그림을 디자인해 본다.