본문 바로가기
Book

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

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

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


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



13장 연습문제

서술형문제

1. 테두리를 한 번에 표현하는 방법을 소스로 표현해 보시오.

▶▶ border : 테두리두께 테두리스타일 테두리색상

border : 2px solid red

2. 깔끔한 실선 테이블을 만드는 소스를 나열하시오.

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

<!--

table{ border-collapse:collapse;}

table,th,td{border:solid 1px orange;}

--></style>

3. 레이어를 생성하는 방법 중 태그에 생성하는 방법을 소스로 표현하시오.

▶▶ <div id=layer1 style=“position:absolute”>내용</div>

4. 레이어의 계층 순서를 나타내는 스타일 속성은 무엇인가?

▶▶ z-index

5. 레이어를 보고 숨기는 기능을 하는 visibility 속성의 속성 값은 어떤 것이 있는가?

▶▶ visible, hidden

6. 레이어 속성 중 Position 속성의 개요와 종류를 말하시오.

▶▶

static

배치 방법 미지정 상태로 기본 값

relative

상대좌표 기준 위치설정

absolute

절대좌표 기준 위치 설정

fixed

absolute와 같이 고정됨

실습형문제

1. 달력에 스타일 적용하기

ㆍ/**/ 주석에 처음 만들었을 때의 테이블 태그 속성을 복사해 두었다. 태그 속성으로 만들었던 표를 스타일 속성으로 변경한다.

ㆍ표 안쪽 여백 : 스타일에서는 <td> 태그 속성으로 지정

ㆍ셀 안에 있는 글자 : 오른쪽, 위쪽에 정렬

ㆍ공휴일과 기념일 : 클래스 선택자를 생성해서 적용

ㆍ달력이 완성되면(table_end.html) 추가 제공한 완성 파일 table2_end.htm 처럼 변경해 본다.

· 키포인트 : 5장에서 만들어서 본 달력을 태그가 아닌 스타일로만 꾸며본다.

<html>

<head>

<title>달력에 스타일 설정하기</title>

<!-- 코딩1 -->

<style type="text/css">

<!--

table{border-collapse:collapse; border:solid 1px #119999 ; height:100px;border-top:solid 5px #229999; border-bottom:solid 3px #999999}

/*border="1" cellpadding="8" cellspacing="0" bordercolor="white" bordercolorlight="#999999"*/

tr.bg1{border-bottom:solid 3px #999911 ; background-color: #F3F3F3 ;}

th{border:solid 1px #991199 ; background-color: #CCCCCC; color:white;}

/* bgcolor="#CCCCCC"*/

td{border:solid 1px #992299 ; width:80; height:80 ; padding:8 ;text-align:right; vertical-align:top; font-weight:bold}

/* width="80" height="80" align="right" valign="top"*/

caption { color:#FF6600; font-size:11pt; font-weight:bold}

.holiday{color: #FF0099; font-size:8pt}

/*<font size="1" color="#FF0099">*/

.event{color: #666666; font-size:8pt}

/*<font size="1" color="#666666">*/

-->

</head>

<body>

~이하 생략~

2. 레이어 내용을 숨겨라!

<html>

<head>

<title>반짝 메뉴를 띄워보자!</title>

<style type="text/css">

/* 코딩1 : 메뉴에 대한 설정*/

div#menu{position:absolute; left:510; top:110; font-family:(한)볼펜체C, 굴림; font-size:20pt }

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

/* 코딩2 : 설명글에 대한 설정*/

div#note1,#note2,#note3{position:absolute; left:235; top:320; width:450px; height:200; padding: 10px; visibility: hidden; z-index:0; font-family:굴림; font-size:11pt; color:78533A }

/*코딩3 : 대제목*/

h1{font-family:MurrayHill Bd BT, BlackChancery, Comic Sans MS; color: brown; font-size:25pt; }

</style>

</head>

<body bgcolor=FFF3DE>

<h1 align=center>About Coffee </h1>

<!-- 코딩4 : 메뉴 -->

<div id=menu>

<a href=#>

커피의 기원</a><br><br>

<a href=#>

커피의 어원</a><br><br>

<a href=#>

커피의 역사 </a><br><br>

</div>

~ 중략 ~

<!-- 코딩5 : 설명글 -->

<div id=note1 style="visibility: visible">

~ 이하 생략 ~

ㆍ메뉴에 해당하는 그림 : 레이어에 담아 표현

ㆍ메뉴에 해당하는 설명글 : 각각 레이어에 담아 표현

ㆍ설명글 : 모두 숨김 속성 지정

ㆍ처음 등장하는 제목 : <h1> 태그로 스타일 적용

ㆍ설명글 중에서 첫 번째 레이어인 note1만 보이도록 설정

· 키포인트 : 설명글을 레이어에 담아서 하나만 보여준다.

심화 연습 문제

1. 테이블, 폼에 스타일 적용하기

<html>

<head>

<title>민원 상담 폼양식</title>

<!-- 코딩1 -->

<style type="text/css">

<!--

table{border:solid 0px cornflowerblue; border-collapse:collapse;width:500px;}

th{border:dotted 0px cornflowerblue ; border-bottom:1px dotted cornflowerblue; background-color: white; color: cornflowerblue; padding:10px ; text-align: right;}

td{border:dotted 0px cornflowerblue ; border-bottom:1px dotted cornflowerblue; padding:9px}

caption { color:#FF6600; font-size:11pt; font-weight:bold}

input{border:solid 1px cornflowerblue ;}

.noinput{border:solid 0px cornflowerblue ;}

/*코딩2 : 스크롤바 스타일*/

body

{

scrollbar-face-color: #DFEFFF;/*스크롤 이동탭 내부색*/

scrollbar-shadow-color: #6699FF;/*오른쪽,하단 테두리색*/

scrollbar-highlight-color: #66CCFF;/*왼쪽,상단 테두리색*/

scrollbar-3dlight-color: #ffffff;/*좌측,상단 바깥 테두리색*/

scrollbar-darkshadow-color: #ffffff;/*우측,하단 바깥 테두리색*/

scrollbar-track-color: #EEF7FF;/*스크롤바 내부색*/

scrollbar-arrow-color: cornflowerblue/*이동버튼 화살표색*/

}

--></style>

</head>

~ 중략 ~

<tr><th>메일수신 : </th>

<td>

<!-- 코딩3 --><input type="checkbox" name="mailling" checked class=noinput>

문의사항을 메일로 즉시 발송해 드립니다.

</td></tr>

<tr><td bgcolor=#e9f1f9 colspan=2 align=middle>

<!-- 코딩3 -->

<input type="image" src="btn_send.gif" class=noinput>

<input type="image" src="btn_cancel.gif" class=noinput>

</td>

</tr>

~ 이하 생략 ~

ㆍ테이블을 꾸며줄 스타일을 지정 : 테이블 외곽선 표시 안 함, 너비는 500픽셀로 지정

ㆍ테이블 안쪽 선 : 아래쪽에만 1픽셀 점선으로 표시, 색상은 cornflowerblue 로 지정

ㆍ입력상자 : cornflowerblue 색상의 실선 테투리로 표현

ㆍ입력상자 중에서 이미지 버튼과 체크 버튼 : 테두리가 표시되지 않도록 noinput 클래스 선택자를 생성 및 적용

ㆍ여러 줄 입력상자의 스크롤 바 색상 : #DFEFFF, #6699FF, #66CCFF, #EEF7FF, Cornflowerblue 적용

· 키포인트 : 테이블과 폼에 스타일 적용하여 문서를 완성한다.

저작자표시

'Book' 카테고리의 다른 글

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

'Book' Related Articles

티스토리툴바