[HTML5 웹 프로그래밍 입문 4판 Chapter 07] 연습 문제 정답
✨07장 연습문제✨
[연습문제 01] 다음 문장에 O X를 표시하시오.
(1) 어떤 요소를 수평으로 정렬할 때는 자손에게 float 속성을 지정하고, 부모의 overflow 속성은 hidden으로 적용한다. (O)
(2) 어떤 요소를 화면 중앙에 정렬하고 싶을 때는 {margin: auto}를 사용한다. (X)
(3) 절대 위치로 요소를 배치할 때는 {position: absolute}를 사용한다. (O)
(4) 요소를 고정 위치에 배치할 때는 {position: fixed}를 사용한다. (O)
[연습문제 02] 다음과 같은 포털 사이트 메인 페이지의 기본 형태를 단계별로 구현하시오.
(1) 다음 코드에 스타일을 적용해 그림과 같이 레이아웃을 구성한다.
<!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>
.container {
width: 1080px;
margin: 0 auto;
margin-bottom: 8px;
}
.left {
float: left;
width: 740px;
height: 428px;
background-color: green;
}
.right {
float: right;
width: 332px;
height: 428px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>(2) 다음 코드에 스타일을 적용해 그림과 같이 레이아웃을 구성한다.
<!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>
.container {
width: 1080px;
margin: 0 auto;
margin-bottom: 8px;
}
.gnb {
float: left;
padding: 8px 0px;
background-color: rgb(133, 222, 133);
}
.gnb > li {
list-style-type: none;
float: left;
padding-left: 16px;
}
.gnd > li:first-child {
padding-left: 0;
}
.rank {
float: right;
padding: 8px 0;
background-color: rgb(244, 244, 157);
}
.rank > li {
list-style-type: none;
}
</style>
</head>
<body>
<div class="container">
<ul class="gnb">
<li>메일</li>
<li>카페</li>
<li>블로그</li>
<li>쇼핑</li>
<li>사전</li>
<li>뉴스</li>
<li>증권</li>
<li>부동산</li>
<li>지도</li>
</ul>
<ul class="rank">
<li>실시간 검색 순위</li>
</ul>
</div>
</body>
</html>(3) (1) 번 문제와 (2) 번 문제를 결합한 후 위아래에 헤더(머리말)와 푸터(꼬리말)을 추가해 그림과 같이 레이아웃을 구성한다.
<!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>
.container {
overflow: hidden;
width: 1080px;
margin: 0 auto;
margin-bottom: 8px;
}
.left {
float: left;
width: 740px;
height: 428px;
background-color: rgb(48, 48, 251);
}
.right {
float: right;
width: 332px;
height: 428px;
background-color: rgb(255, 59, 59);
}
.gnb {
float: left;
padding: 8px 0px;
background-color: rgb(133, 222, 133);
}
.gnb > li {
list-style-type: none;
float: left;
padding-left: 16px;
}
.gnd > li:first-child {
padding-left: 0;
}
.rank {
float: right;
padding: 8px 0;
background-color: rgb(244, 244, 157);
}
.rank > li {
list-style-type: none;
}
.footer {
height: 80px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<h1>Logo</h1>
</div>
<div class="container">
<ul class="gnb">
<li>메일</li>
<li>카페</li>
<li>블로그</li>
<li>쇼핑</li>
<li>사전</li>
<li>뉴스</li>
<li>증권</li>
<li>부동산</li>
<li>지도</li>
</ul>
<ul class="rank">
<li>실시간 검색 순위</li>
</ul>
</div>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="container">
<div class="footer"></div>
</div>
</body>
</html>(4) 굉장히 간단하게 기본 형태를 구현해 보았습니다. 실제 네이버 웹 사이트를 보면, 사각형들의 높이가 조금 다를 것입니다. 최대한 비슷하게 맞춘 후 다른 웹 사이트의 디자인도 분석해서 이러한 형태로 레이아웃을 구성해보세요. 빨간색 사각형의 너비(7440px)와 파란색 사각형의 너비 (332px)를 합치면 1072가 됩니다. 여기에 마진으로 지정했던 8px을 더하면, 1080px이 되어 div.container 태그의 너비와 같게 됩니다. 이러한 형탤 숫자를 조금씩 계산해 가면서 여백을 맞추어보세요.
임의로 설정한 값은 다음과 같다.
1280(container width) = 750(left width) + 522(right width) + 8(margin)
<!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>
.container {
overflow: hidden;
width: 1280px;
margin: 0 auto;
margin-bottom: 8px;
}
.left {
float: left;
width: 750px;
height: 428px;
background-color: rgb(48, 48, 251);
}
.right {
float: right;
width: 522px;
height: 428px;
background-color: rgb(255, 59, 59);
}
.gnb {
float: left;
padding: 8px 0px;
background-color: rgb(133, 222, 133);
}
.gnb > li {
list-style-type: none;
float: left;
padding-left: 16px;
}
.gnd > li:first-child {
padding-left: 0;
}
.rank {
float: right;
padding: 8px 0;
background-color: rgb(244, 244, 157);
}
.rank > li {
list-style-type: none;
}
.footer {
height: 80px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<h1>Logo</h1>
</div>
<div class="container">
<ul class="gnb">
<li>메일</li>
<li>카페</li>
<li>블로그</li>
<li>쇼핑</li>
<li>사전</li>
<li>뉴스</li>
<li>증권</li>
<li>부동산</li>
<li>지도</li>
</ul>
<ul class="rank">
<li>실시간 검색 순위</li>
</ul>
</div>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="container">
<div class="footer"></div>
</div>
</body>
</html>
[연습문제 03] 구글 검색이나 ChatGPT 등을 활용해서 다음 내용을 직접 찾아보시오.
(1) CSS Flexbox 레이아웃
Flex는 Flexible Box, Flexbox 라고 부르기도 한다. Flex는 레이아웃 배치 전용 기능으로 고안되었다. 그래서 레이아웃을 만들 때 딱히 사용할 게 없어서 쓰던 float 나 inline-block 등을 이용한 기존 방식보다 훨씩 강력하고 편리한 기능들이 많다.
Flex의 속성들은 컨테이너에 적용하는 속성, 아이템에 적용하는 속성 두 가지로 나뉜다.
- Flex 컨테이너: Flexbox를 적용할 부모 요소입니다. Flex 컨테이너는 display: flex; 속성을 사용하여 정의된다.
- Flex 아이템: Flex 컨테이너 안에 있는 자식 요소들로, 이들이 Flexbox의 주요 구성 요소이다.
Flexbox를 사용하면 다음과 같은 작업을 수행할 수 있다.
- 유연한 레이아웃 구성: 요소들을 수평 또는 수직으로 배치하거나, 요소들의 크기를 조절하고 간격을 조절하여 유연한 레이아웃을 만들 수 있다.
- 정렬: Flexbox는 주축(main axis)과 교차축(cross axis)을 기준으로 요소들을 정렬할 수 있다. justify-content와 align-items 속성을 사용하여 요소들을 가로/세로 중앙 정렬하거나 간격을 조절할 수 있다.
- 요소 순서 변경: HTML에서 요소의 순서와는 별개로 Flexbox를 사용하여 요소들의 순서를 변경할 수 있다.
Flexbox는 반응형 디자인을 할 때 특히 유용하며, 미디어 쿼리와 결합하여 다양한 화면 크기에 따라 유연하게 대응할 수 있다. 이러한 기능들은 웹 디자인에서 복잡한 레이아웃을 다루는 데 큰 도움이 된다.
(2) CSS Grid 레이아웃
CSS Grid는 웹 디자인에서 레이아웃을 구성하는 데 사용되는 강력한 CSS 모듈 중 하나이다. 이 기술은 그리드(격자)를 사용하여 요소들을 배치하고 정렬하는 것을 가능하게 한다.
CSS Grid의 주요 개념은 다음과 같다.
- 그리드 컨테이너: Grid를 생성하는 부모 요소이다. 이를 위해 해당 요소에 display: grid; 속성을 적용한다.
- 그리드 아이템: Grid 컨테이너 안에 있는 자식 요소들로, 그리드의 셀에 배치된다.
CSS Grid를 사용하면 다음과 같은 작업을 수행할 수 있다.
- 2차원 레이아웃: 행(row)과 열(column)을 정의하여 2차원적인 그리드를 만들어 요소들을 배치할 수 있다.
- 자유로운 정렬: grid-template-columns 및 grid-template-rows 속성을 사용하여 열과 행의 크기를 지정하고, grid-column 및 grid-row 속성을 사용하여 요소들을 정확한 위치에 배치할 수 있다.
- 자동 조정: Grid는 아이템들을 자동으로 정렬하고 조정하여 레이아웃을 유연하게 만들어준다.
- 레이아웃 영역 지정: 특정 영역에 요소들을 배치하기 위해 이름을 지정하여 그리드에 특정 영역을 만들고 요소들을 배치할 수 있다.
CSS Grid는 복잡한 레이아웃을 다룰 때 매우 효과적이며, 다양한 디자인 요구사항에 대응할 수 있다. 또한, Flexbox 와 결합하여 더욱 유연하고 강력한 레이아웃을 구현하는 데 사용될 수 있다.
'Study > Web' 카테고리의 다른 글
| [HTML5 웹 프로그래밍 입문 4판 Chapter 08] 연습 문제 정답 (0) | 2023.12.24 |
|---|---|
| [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 |
