[HTML5 웹 프로그래밍 입문 4판 Chapter 08] 연습 문제 정답
✨08장 연습문제✨
[연습문제 01] 다음 문장에 O X를 표시하시오.
(1) 미디어 쿼리는 link 태그의 media 속성 또는 style 태그 내부의 @media 규칙에 입력할 수 있습니다. (O)
(2) 미디어 쿼리를 사용하면 웹 브라우저에서 인쇄할 때만 적용할 스타일을 지정할 수 있습니다. (O)
(3) 미디어 속성 사용해 방향을 지정할 때는 어떤 모서리가 아래에 있는지에 따라 네 가지 나누어 지정할 수 있습니다. (X)
[연습문제 02] 반응형 웹 디자인의 목적은 무엇인가?
① 웹 사이트의 로딩 속도를 높인다.
② 웹 사이트에 더 많은 멀티미디어 콘텐츠를 추가한다.
③ 웹 사이트의 보안을 강화한다.
④ 다양한 디바이스와 화면 크기에 적응하는 웹 사이트를 제작한다.
[연습문제 03] 다음 중 반응형 웹 디자인에서 사용되는 CSS 기술로, 뷰포트의 크기에 따라 스타일로 적용하는 것은?
① 미디어 그룹
② 스타일 어댑터
③ 미디어 쿼리
④ 뷰포트 스타일
[연습문제 04] 다음 중 @- 규칙으로 알맞지 않은 것은?
① @import
② @font-face
③ @media
④ @scale
[연습문제 05] 다음 중 미디어 특징 중 장치 방향을 지정할 때 사용하는 속성은?
① direction
② orientation
③ way
④ shift
[연습문제 06] 스마트폰 회전을 사용한 레이아웃을 만들어 봅시다. 아이폰의 기본 메시지 앱은 다음과 같이 세로 상태에서는 메시지 목록과 내용이 별도의 페이지로 되어있습니다. 반면 가로 상태에서는 메시지 목록과 내용이 한 화면에 들어옵니다. 자바스크립트를 아직 배우지 않아 화면 이동을 구현할 수 없으므로 그냥 세로 화면에서는 내용을 출력하고, 가로 화면에서는 목록과 내용을 함께 출력하는 형태의 간단한 웹 페이지를 모방해 봅시다.
(1) 크롬에서 스마트폰을 시뮬레이션하는 간단한 방법을 살펴봅시다.
(2) 다음 코드를 입력해 기본 웹 페이지를 구성합니다. div.right 태그 내부의 p 태그에는 글자를 많이 입력해 주세요.
(3) 다음 순서로 스타일을 적용해 그림과 같이 레이아웃을 구성합니다.
<!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>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
@media screen and (orientation: portrait) {
div.left {
display: none;
}
}
@media screen and (orientation: landscape) {
div.left {
width: 30%;
float: left;
}
div.right {
width: 70%;
float: right;
}
}
div.content {
padding: 16px;
}
li {
padding: 24px 0;
border-bottom: 1px solid #c7c7c7;
}
</style>
</head>
<body>
<div>
<div class="left">
<div class="content">
<h1>List</h1>
<ul>
<li>Velit ipsum ullamco</li>
<li>Nulla qui officia anim</li>
<li>quis proident tempor ipsum</li>
<li>et sunt sit culpa ad</li>
<li>fugiat reprehenderit sint mollit.</li>
</ul>
</div>
</div>
<div class="right">
<div class="content">
<h1>Lorem ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
viverra ex a augue porta, quis luctus eros sollicitudin. Nullam in
turpis semper, lacinia justo a, facilisis lacus. Nunc odio nisi,
lobortis sit amet diam et, vestibulum posuere risus. Donec viverra,
risus a ultricies fringilla, lectus purus aliquet quam, sit amet
commodo nisl mi vitae nunc. Nulla cursus non urna eu elementum.
Integer at mi auctor mi suscipit dapibus nec non orci. Sed at libero
non augue ultricies euismod a non erat. Nunc ipsum nulla,
scelerisque id enim nec, lobortis ornare leo. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Cras suscipit egestas felis,
vitae bibendum mi ullamcorper at. Integer scelerisque cursus nunc,
ultricies tincidunt ante tempus ut. Nam id convallis justo. Donec
sagittis, magna at laoreet blandit, dolor lectus rutrum augue, in
accumsan velit orci vitae elit. Vestibulum diam lectus, convallis
porttitor velit eget, dignissim ullamcorper felis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
viverra ex a augue porta, quis luctus eros sollicitudin. Nullam in
turpis semper, lacinia justo a, facilisis lacus. Nunc odio nisi,
lobortis sit amet diam et, vestibulum posuere risus. Donec viverra,
risus a ultricies fringilla, lectus purus aliquet quam, sit amet
commodo nisl mi vitae nunc. Nulla cursus non urna eu elementum.
Integer at mi auctor mi suscipit dapibus nec non orci. Sed at libero
non augue ultricies euismod a non erat. Nunc ipsum nulla,
scelerisque id enim nec, lobortis ornare leo. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Cras suscipit egestas felis,
vitae bibendum mi ullamcorper at. Integer scelerisque cursus nunc,
ultricies tincidunt ante tempus ut. Nam id convallis justo. Donec
sagittis, magna at laoreet blandit, dolor lectus rutrum augue, in
accumsan velit orci vitae elit. Vestibulum diam lectus, convallis
porttitor velit eget, dignissim ullamcorper felis.
</p>
<p>Deserunt irure Lorem</p>
<p>Velit ipsum ullamco et</p>
</div>
</div>
</div>
</body>
</html>
[연습문제 7] 구글 검색이나 ChatGPT 등을 활용해서 다음 내용을 직접 찾아보시오.
(1) 현재 많이 사용되는 반응형 웹 너비의 구분 기준
- 모바일: 대략 320px에서 480px 사이의 너비
- 태블릿: 약 481px에서 1024px 사이의 너비
- 데스크톱: 1025px 이상의 너비
그러나 이것은 절대적인 기준은 아니며, 실제로는 디자이너나 개발자가 프로젝트의 요구 사항과 사용자 경험을 고려하여 더 유연하게 조정하기도 한다.
(2) 현재 많이 사용되는 뷰포트 메타 태그
<meta name="viewport" content="width=device-width, initial-scale=1">
이 메타 태그는 모바일 기기에서 웹 페이지를 올바르게 표시하기 위해 사용된다. width=device-width는 뷰포트의 너비를 기기의 너비에 맞게 설정하라는 의미이고, initial-scale=1은 페이지가 처음 로드될 때 초기 확대 수준을 1로 설정하라는 의미이다. 이렇게 설정하면 모바일 기기에서 사용자가 웹 페이지를 보았을 때 적절한 크기로 보여지도록 도와준다.
'Study > Web' 카테고리의 다른 글
| [HTML5 웹 프로그래밍 입문 4판 Chapter 07] 연습 문제 정답 (0) | 2023.12.23 |
|---|---|
| [HTML5 웹 프로그래밍 입문 4판 Chapter 06] 연습 문제 정답 (0) | 2023.12.22 |
| [HTML5 웹 프로그래밍 입문 4판 Chapter 04 연습 문제 포함] (0) | 2023.10.24 |
| [HTML5 웹 프로그래밍 입문 4판 Chapter 05 연습 문제 포함] (0) | 2023.10.23 |
| [HTML5 웹 프로그래밍 입문 4판 Chapter 03 연습 문제 포함] (0) | 2023.09.30 |
