본문 바로가기
Book

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

블루사파 2009. 5. 8. 12:55

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

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



인터넷 프로그래밍 입문 12장 연습문제

서술형문제

1. 배경색은 하늘색, 배경 그림은 logo.gif, 화면의 정가운데 한 번만 표시하고자 할 때 스타일 소스를 적으시오.

▶▶ <style type="text/css">

<!--

body{background:skyblue url("logo.gif") center center no-repeat;}

-->

</style>

2. 하이퍼링크를 설정해도 밑줄이 표시되지 않고 마우스를 올릴 때만 밑줄이 표시되도록 하는 스타일 소스를 적으시오.

▶▶ <style type="text/css">

<!--

a{color:red; text-decoration:none;}

a:hover{text-decoration:underline;}

-->

</style>

3. 하나의 문서에서 네이버 링크 문자를 선택하면 밑줄이 나타나고, 엠파스 링크 문자를 선택하면 배경색이 바뀌게 하는 스타일 소스를 구성해 보시오.

▶▶ <style type="text/css">

<!--

a{color:blue; text-decoration:none;}

a.underline:hover{text-decoration:underline;}

a.bgcolor:hover{background-color:skyblue;}

-->

</style>

<a href="http://www.naver.com" class=underline>네이버</a>

<a href="http://www.empas.com" class=bgcolor>엠파스</a>

4. ‘가자’에 마우스를 올리면 마우스 커서가 상하 양방향 화살표 모양이 되도록 <a> 태그에 스타일 소스를 구성해 보시오.

▶▶ <a href="#" style="cursor:n-resize">가자</a>

실습형문제

1. 배경 그림 오른쪽 하단에 고정 시키기

· 키포인트 : 배경 그림을 문서의 오른쪽 하단에 한 번만 표시하고 고정시킨다. 문서의 여백은 위쪽과 왼쪽에만 30픽셀로 지정한다.

<html>

<head>

<title> 배경이미지 고정 </title>

<style>

<!--

/*코딩1*/

body{background:url(bg.jpg) no-repeat fixed right bottom;margin:30,0,0,30 }

td{line-height:17pt; color:navy ; }

h2{text-align:center ; }

.title2{color: #0066FF ; margin-left:100px }

-->

</style>

</head>

<body leftmargin=0 topmargin=0>

~ 이하 생략 ~

2. 하이퍼링크와 커서 모양 설정하기

<html>

<head>

<title>하이퍼링크와 커서 모양 설정</title>

<!-- 코딩1********************* -->

<style type="text/css">

<!--

a { text-decoration: none; color: black; margin:20px; line-height:20pt;cursor:nw-resize}

a:hover { text-decoration: none ; color: gray ; }

a.bullet { color: silver}

a:hover .bullet { color: #FF3300}

-->

</style>

</head>

<body bgcolor=#ffffff leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>

~ 이하 생략 ~

ㆍ 하이퍼링크 문자 : 검정색, 밑줄 표시 안 함, 여백 20픽셀

ㆍ 커서 모양 : 북서쪽 방향 양방향 화살표로 설정

ㆍ 마우스가 올라오면 글자색이 Gray로 변하도록 설정

ㆍ 마우스가 올라오면 글자 뒤쪽에 있는 사각형 모양만 #FF3300 색상으로 변하도록 설정

· 키포인트 : 하이퍼링크 문자에 대한 스타일 속성을 다양하게 설정해본다.

심화 연습 문제

1. 동적인 메뉴판 만들기

<html>

<head>

<title> 동적인 메뉴 </title>

<style>

<!--

/*코딩1*/

a{width:335; height:20; border:1px solid; margin:2px; background-color:#B5CFDE; color:#5A798C; text-decoration:none; padding:2; text-indent:15pt}

/*코딩2*/

a:hover{background-color: #E7EFEF; background:url(bullet.gif) no-repeat}

body{background:url(city.gif) no-repeat fixed center center}/*배경 이미지 고정*/

body{margin:10,100 ; line-height:14pt}/*기본 스타일*/

h2{font-size:25px; font-family:궁서체; text-align:center; letter-spacing:-2pt}/*대제목*/

.title1{border-bottom:1px dotted; margin-top:30px; margin-bottom:10px}/*소제목*/

hr#hr5{height:5px;color:#5A798C;width:400}/*두께 5픽셀의 선*/

hr#hr2{height:2px;color:#5A798C;width:400}/*두께 2픽셀의 선*/

hr#hr10{height:10px;color:#5A798C}/*두께 10픽셀의 선*/

-->

</style>

</head>

<body bgcolor="#E7EFEF" text="#5A798C">

~ 이하 생략 ~

ㆍ<!--코딩 1--> : 하이퍼링크 문자의 전체 스타일 속성 지정, 폭과 높이는 각각 335, 20 픽셀, 외곽선은 1픽셀 실선, 바깥쪽 여백, 안쪽 여백은 각각 2픽셀, 배경색은 #B5CFDE, 글자색은 #5A798C, 하이퍼링크 밑줄 제거, 들여쓰기 15pt 로 지정

ㆍ<!--코딩 2--> : 마우스가 올라왔을 때의 하이퍼링크 속성 지정, 배경색은 #E7EFEF, 배경 그림은 bullet.gif로 한번만 표시하도록 지정

· 키포인트 : 하이퍼링크 속성을 지정하여 마우스를 올리면 배경색이 변하고 그림이 나타나도록 한다.

저작자표시

'Book' 카테고리의 다른 글

C로 배우는 쉬운 자료구조 - 링크드 리스트 구현하기  (1) 2009.05.08
C로 배우는 쉬운 자료구조 - 희소 행렬을 전치 행렬로 변환  (0) 2009.05.08
[한빛미디어] 인터넷 프로그래밍 입문 11장 연습문제  (0) 2009.05.08
[한빛미디어] 인터넷 프로그래밍 입문 10장 연습문제  (0) 2009.04.28
[한빛미디어] 인터넷 프로그래밍 입문 9장 연습문제  (0) 2009.04.28

'Book' Related Articles

티스토리툴바