본문 바로가기
Book

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

블루사파 2009. 5. 29. 21:46

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



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



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()필터 적용

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

저작자표시

'Book' 카테고리의 다른 글

[한빛미디어] 인터넷 프로그래밍 입문 16장 연습문제  (0) 2009.06.05
[한빛미디어] 인터넷 프로그래밍 입문 15장 연습문제  (0) 2009.06.05
[한빛미디어] 인터넷 프로그래밍 입문 13장 연습문제  (0) 2009.05.29
[한빛미디어] C로 배우는 쉬운 자료구조 - 5장 연습문제  (0) 2009.05.08
C로 배우는 쉬운 자료구조 - 링크드 리스트 구현하기  (1) 2009.05.08

'Book' Related Articles

티스토리툴바