[HTML5 웹 프로그래밍 입문 4판 Chapter 06] 연습 문제 정답
✨06장 연습문제✨
[연습문제 01] 다음 문장에 O X를 표시하시오.
(1) inline 형식의 태그에는 width 속성과 height 속성이 적용되지 않으며, margin 속성과 padding 속성은 좌우로만 적용됩니다. (O)
(2) inline-block 형식의 태그는 width 속성과 ehight 속성이 지정되며, amrgin 속성과 padding 속성이 상하좌우로 적용됩니다. (O)
(3) block 형식의 태그는 width 속성과 height 속성이 지정되며, margin 속성과 padding 속성이 상하좌우로 적용됩니다. (O)
(4) background-image 속성에는 이미지를 하나만 지정할 수 있습니다. (X)
(5) font-family 속성에 글꼴을 여러 개 지정하는 것은 아무런 의미가 없습니다. (X)
(6) 일반적으로 웹 브라우저의 글자 기본 크기는 16px입니다. (O)
(7) 기본적인 글꼴 굵기 값은 400입니다. (O)
(8) inline 형식의 태그에는 text-align 속성을 지정해도 의미가 없습니다. (X)
(9) 요소들은 기본적으로 절대 좌표계를 사용합니다. (X)
(10) z-index 속성의 숫자가 클수록 앞에 위치합니다. (O)
(11) overflow 속성을 hidden으로 지정하면 영역을 넘은 부분을 보이지 않게 만듭니다. 이때 스크롤을 사용해 보이지 않게 된 부분을 볼 수 있습니다. (O)
[연습문제 02] 다음 중 요소의 배경색을 변경하는 속성은?
① color
② background-color
③ bgcolor
④ background
[연습문제 03] 다음 중 텍스트와 요소 테두리 사이의 간격을 조절하는 속성은?
① margin
② border
③ padding
④ spacing
[연습문제 04] 다음 중 요소의 너비를 설정하는 속성은?
① width
② size
③ element-width
④ w
[연습문제 05] 다음 중 텍스트를 굵게 표시하는 속성은?
① text-weight
② font-style
③ font-weight
④ bold-text
[연습문제 06] 다음 중 글자 색상을 지정하는 속성은?
① font-color
② text-color
③ color
④ background-color
[연습문제 07] 다음 속성 중 박스와 관련한 속성이 아닌 것은?
① border
② margin
③ padding
④ direction
[연습문제 08] 다음 중 배경 이미지로 background.png를 올바르게 지정한 것은?
① background: url(‘background.png’)
② background: image(‘background.png’)
③ background: png(‘background’)
④ background: background as png
[연습문제 09] 다음 중 position 속성을 absolute로 지정한 절대 좌표계에서 위치를 지정할 때 사용하는 속성이 아닌 것은?
① top
② lower
③ left
④ right
[연습문제 11] 다음 코드와 같이 background-image 속성을 적용했을 때, 이미지 A와 이미지 B 중 어떤 이미지가 위쪽에 위치하는가?
<style >
body {
background-image : 이미지 A, 이미지 B;
}
</style >이미지 A가 위쪽에 위치한다.
[연습문제 13] 다음과 같이 HTML을 구성하고 스타일을 적용하시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-color: gray;
}
.id,
.pw,
.submit {
border-radius: 10px;
border: transparent;
}
.submit {
width: 100%;
}
</style>
</head>
<body>
<h1>간단한 입력 양식</h1>
<table>
<tr>
<td><b>아이디</b></td>
<td><input type="text" class="id" /></td>
</tr>
<tr>
<td><b>비밀번호</b></td>
<td><input type="text" class="pw" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" class="submit" value="제출" /></td>
</tr>
</table>
</body>
</html>
[연습문제 14] 다음과 같이 HTML을 구성하고 스타일을 적용하시오.
(1) 이미지를 원형으로 만들 때는 border-radius: 50%를 사용합니다.
(2) 이미지의 오른쪽과 아래쪽 부분에만 여백이 있습니다.
(3) 고양이 이미지는 http://placekitten.com/150/150 을 img 태그의 src 속성에 넣어 구현했습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
img {
float: left;
margin-right: 10px;
border-radius: 50%;
}
p {
font-size: small;
}
.cat1 {
weight: 120px;
height: 120px;
}
.cat2 {
weight: 90px;
height: 90px;
}
</style>
</head>
<body>
<img src="https://placekitten.com/150/149" class="cat1" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem ligula,
volutpat in condimentum et, hendrerit sit amet nisi. Proin a metus
dignissim, porta ipsum sed, porta mi. Pellentesque tempor vitae velit ut
laoreet. Pellentesque tincidunt, dui nec suscipit ornare, elit turpis
mattis velit, et rutrum justo lacus sed lorem. Vestibulum non ipsum
varius, mattis lorem at, consequat mi. Suspendisse non vulputate nihh. ut
dellentesque auam. Fusce vehicula ve lorem ut interdum. Nullam porttitor
massa eget tincidunt tempor.
</p>
<br />
<img src="https://placekitten.com/150/148" class="cat2" />
<p>
Sed dignissim tortor id enim imperdiet, nec viverra sapien vehicula.
Curabitur at euismod sapien. Vivamus at consequat sapien. Nulla non mi
eget purus viverra finibus. Nunc sapien nunc, faucibus vitae wonh wake
wwwe d, racus, ve rinibus urna utricies in Aenean aliquet tristique ligula
sed fermentum. In ut odio at leo convallis fermentum. Praesent vel
volutpat erat sed porttitor massa.Aliquam nec nibh purus.
</p>
</body>
</html>
[연습문제 15] 다음과 같이 HTML을 구성하고 스타일을 적용하시오.
(1) 카드는 div 태그 등으로 HTML을 구현하고, 박스 속성을 주어 크기를 조정합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.card {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid black;
}
.card p {
text-align: center;
}
</style>
</head>
<body>
<div class="card">
<p>카드 1</p>
</div>
<div class="card">
<p>카드 2</p>
</div>
<div class="card">
<p>카드 3</p>
</div>
</body>
</html>(2) 글자가 모두 중앙 정렬되어 있습니다. 어떤 속성을 사용해야 할까요?
text-align: center;을 사용하여 글자를 모두 중앙 정렬할 수 있다.
'Study > Web' 카테고리의 다른 글
| [HTML5 웹 프로그래밍 입문 4판 Chapter 08] 연습 문제 정답 (0) | 2023.12.24 |
|---|---|
| [HTML5 웹 프로그래밍 입문 4판 Chapter 07] 연습 문제 정답 (0) | 2023.12.23 |
| [HTML5 웹 프로그래밍 입문 4판 Chapter 04 연습 문제 포함] (0) | 2023.10.24 |
| [HTML5 웹 프로그래밍 입문 4판 Chapter 05 연습 문제 포함] (0) | 2023.10.23 |
| [HTML5 웹 프로그래밍 입문 4판 Chapter 03 연습 문제 포함] (0) | 2023.09.30 |
