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

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

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

서술형문제

1. 스타일 삽입법 중에서 태그 내부 삽입형(In-line style) 으로 ‘한빛미디어에서 전문서적 고르기’에서 ‘전문서적’에만 배경색을 지정하는 방법을 적으시오.

▶▶ 한빛미디어에서 <span style=”background-color:yellow”>전문서적</span> 고르기

2. 스타일 삽입법 중에서 외부 문서 삽입형(link style)으로 같은 폴더에 있는 default.css 파일을 현재 문서에 적용하고 싶다면 어떻게 소스를 입력해야 하는가?

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

3. <p> 태그에 두 개 이상의 스타일을 적용하고 싶을 때 어떻게 해야 하는가?

▶▶ 태그선 택자와 아이디 선택자를 함께 사용

4. 글자색과 배경색을 지정하는 스타일 속성을 각각 무엇인가?

▶▶ 글자색 : color, 배경색 : background-color

5. 행간과 자간을 설정하는 스타일 속성은 각각 무엇인가?

▶▶ 행간 : line-height, 자간 : letter-spacing

6. 문단의 내부 여백과 외부 여백을 지정하는 스타일 속성은 각각 무엇인가?

▶▶ 내부 여백 : padding, 외부 여백 : margin

7. 테두리 지정 기본 형식을 적으시오.

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

border:2px solid red

실습형문제

1. 문서에 삽입된 그림 한 번에 꾸미기

ㆍ/*코딩1*/: 문서에 삽입된 그림의 속성을 지정한다.

/*코딩1: width=70 height=70 border=1 hspace=10 vspace=10*/

ㆍ/*코딩2*/에 나열해 놓은 속성처럼 bigimg 클래스 선택자를 생성한다.

/*코딩2: border=1 width=600 height=450*/

ㆍ문서의 첫 번째 그림에 bigImg 클래스 스타일을 적용한다.

· 키포인트 : 문서에 삽입된 그림의 크기, 테두리 등 속성을 스타일을 이용해서 한 번에 바꾸며보자.

<html>

<head>

<style>

/*코딩1 width=70 height=70 border=1 hspace=10 vspace=10*/

img{width:70; height:70; border:1 solid black; margin:10}

/*코딩2 border=1 width="600" height="450"*/

.bigImg{border:1 solid black; width:600; height:450}

</style>

</head>

</center>

</body>

</html>

2. 스타일로 문자 디자인하기

· 키포인트 : 스타일의 끌자 꾸밈 기능과 문단 설정 기능을 최대한 활용하여 포스터 그림에 문자를 디자인하여 삽입한다.

<html>

<head>

/*코딩1*/

body{margin:0; background-color:black}

/*코딩2*/

.front{font-size:60pt; color: FFCC33; font-family:impact, arial black,arial ; position:relative; top: -40px; }

/*코딩3*/

.back{font-size: 30pt; color: e4e4e4; font-weight:bold; font-family:arial black,impact,arial;text-align: center; }

</style>

</head>

<body>

<tr>

<td>

<div class=back>Lose Yourself<br>

</td>

</tr>

</table>

</body>

</html>

ㆍ/*코딩1*/ : 문서 여백 제거, 배경색 검정색

ㆍ/*코딩2*/ : 클래스 선택자 생성, 글자크기 60pt, 글자색 #FFCC33, 글자체 impact, airal black, arial 순으로 지정, 상대좌표로 -40픽셀 위에 표시

ㆍ/*코딩3*/ : back 클래스 선택자 생성, 글자크기 30pt, 글자색 #E4E4E4, 진하게, 가운데 정렬, 글자체 arial black, impact, arial순으로 지정

ㆍ<!--코딩4--!> : Lose Yourself 문자에는 <div> 태그로 back 클래스를 적용, 8 mile 문자에는 <span> 태그로 font 클래스 적용, back 클래스 안에 front 클래스가 포함되도록 지정

심화 연습 문제

1. 섹스 앤더 시티 홈페이지에 스타일 적용하기

<html>

<head>

<title>섹스 앤 더 시티 홈페이지에 스타일 적용하기</title>

a{text-decoration:none; color:white ; line-height:13pt ; }

ul{text-indent:-10}

ul ul{text-indent:-40}

h3{ border: 3 solid #FFCC99 ; background-color: E7AD7B ; color:white ; padding:5,5,5,10 ;}

.contents{margin:10,50; text-align:justify ; color: #996600 ; text-indent : 15pt ;}

</style>

</head>

<td>

</tr>

<br>

<ul>

<li><a href="#">Insider's Guide</a>

<ul>

<li><a href="#">Episode Guide</a>

<li><a href="#">News and Awards</a>

</ul>

<ul>

<li><a href="#">Sarah Jessica Parker</a>

<li><a href="#">Kim Cattrall</a>

<li><a href="#">Kristin Davis</a>

<li><a href="#">Cynthia Nixon</a>

</ul>

<li><a href="#">City Style</a>

<li><a href="#">Community</a>

<li><a href="#">Schedule</a>

</ul>

</td>

</tr>

<tr>

이하 생략

ㆍ하이퍼링크 문자에 밑줄이 생기지 않도록 지정

ㆍ목록을 만들었을 때 자동으로 들여쓰기 되는 정도를 적게 지정하기 위해서 내어 쓰기 사용

ㆍ<h3> 태그 : 테두리, 배경색 지정

ㆍ본문 내용 : contents 클래스 모두 적용, 여백, 정렬, 색상 등을 결과 파일과 동일하게 설정

· 키포인트 : 섹스 앤 더 시티 홈페이지에 스타일을 적용한다. 중첩 목록에 자동 설정되는 들여쓰기 값을 스타일을 사용해서 조금만 들여쓰기 되도록 한다.

저작자표시

'Book' 카테고리의 다른 글

C로 배우는 쉬운 자료구조 - 희소 행렬을 전치 행렬로 변환 (0)	2009.05.08
[한빛미디어] 인터넷 프로그래밍 입문 12장 연습문제 (0)	2009.05.08
[한빛미디어] 인터넷 프로그래밍 입문 10장 연습문제 (0)	2009.04.28
[한빛미디어] 인터넷 프로그래밍 입문 9장 연습문제 (0)	2009.04.28
[한빛미디어] 인터넷 프로그래밍 입문 8장 연습문제 (0)	2009.04.28

공부해서 남주자

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

'Book' 카테고리의 다른 글

티스토리툴바

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

'Book' 카테고리의 다른 글

'Book' Related Articles

티스토리툴바