HTML에서 레이아웃이란?
HTML에서 레이아웃은 웹 페이지를 구성하는 뼈대를 만드는 과정과 비슷합니다. 레이아웃은 페이지 구조와 디자인을 결정하는 중요한 요소 중 하나인데요. 적절한 레이아웃을 구성하면 사용자에게 정보를 효과적으로 전달하고 웹 페이지의 사용성을 높일 수 있습니다.
일반적인 웹페이지에서 필요한 레이아웃은 위 이미지와 같습니다.
HTML에서 레이아웃을 구성하는 방법에는 여러 가지가 있지만, 대표적인 방법을 몇개 보여드릴게요.
HTML에서 레이아웃을 구성하는 방법
레이아웃은 웹 페이지의 성격과 개발자에 따라 다양한 방식으로 구성됩니다. 아래에서 레이아웃을 구성하는 방법은 대게 많이 사용되고 보편적으로 사용되는 레이아웃 구성 방법입니다.
div 태그를 사용한 레이아웃 구성
HTML에서 div 태그는 아무 의미가 없는 블록 요소입니다. 이 div 태그를 사용하여 웹 페이지의 레이아웃을 구성하는 것이 일반적입니다. div 태그를 이용하여 웹 페이지를 여러 영역으로 나누고, 각 영역에 스타일을 적용하여 원하는 디자인을 구현할 수 있습니다.
<div class="container">
<div class="header"></div>
<div class="main">
<div class="content"></div>
<div class="sidebar"></div>
</div>
<div class="footer"></div>
</div>
HTML5의 시맨틱 태그를 사용한 레이아웃 구성
HTML5에서는 레이아웃 구성을 위해 새로운 시맨틱 태그들이 추가되었습니다. 이러한 태그를 사용하면 레이아웃을 더 쉽게 구성할 수 있습니다. 예를 들어, header, nav, section, article, aside, footer 등의 태그가 추가되었습니다.
<header></header>
<nav></nav>
<section>
<article></article>
<aside></aside>
</section>
<footer></footer>
CSS 그리드를 사용한 레이아웃 구성
CSS 그리드는 웹 페이지를 그리드 형태로 나누어 레이아웃을 구성하는 방법입니다. 그리드를 사용하면 웹 페이지를 구성하는데 필요한 HTML 요소를 줄일 수 있으며, 반응형 디자인을 구현하기에도 용이합니다.
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 10px;
}
.item {
background-color: #fff;
border: 1px solid #000;
}
.item-1 {
grid-row: 1 / 3;
grid-column: 1 / 2;
}
.item-2 {
grid-row: 1 / 2;
grid-column: 2 / 3;
}
.item-3 {
grid-row: 2 / 3;
grid-column: 1 / 2;
}
.item-4 {
grid-row: 2 / 3;
grid-column: 2 / 3;
}
</stlye>
<div class="grid-container">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
<div class="item item-4"></div>
</div>레이아웃 구성 예시
다음은 레이아웃을 구성하는 방법 중 HTML5의 시맨틱 태그를 사용하여 실제 웹 페이지 제작을 위한 예시 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>웹 페이지 제목</title>
<style>
/* 전체 페이지 스타일 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Header 스타일 */
header {
height: 80px;
background-color: #333;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
/* Navigation 스타일 */
nav {
height: 50px;
background-color: #f2f2f2;
display: flex;
align-items: center;
justify-content: center;
}
nav ul {
list-style: none;
display: flex;
}
nav li {
margin: 0 10px;
}
nav a {
color: #333;
text-decoration: none;
}
/* Main Content 스타일 */
main {
display: flex;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
section {
flex-basis: 70%;
background-color: #fff;
padding: 20px;
margin-right: 20px;
}
aside {
flex-basis: 30%;
background-color: #f2f2f2;
padding: 20px;
}
/* Footer 스타일 */
footer {
height: 50px;
background-color: #333;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<header>
<h1>메타보드 서브 사이트</h1>
</header>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
</nav>
<main>
<section>
<h2>본문 제목</h2>
<p>본문 내용</p>
</section>
<aside>
<h2>사이드바 제목</h2>
<p>사이드바 내용</p>
</aside>
</main>
<footer>
<p>저작권 © 2023 메타보드. All Rights Reserved.</p>
</footer>
</body>
</html>위 코드를 실제 웹 페이지에서는 아래와 같이 보여집니다.
HTML에서 레이아웃은 이렇게 웹 사이트의 기본 뼈대를 만드는데 사용되기 때문에 아주 중요합니다. 레이아웃만 잘 구성하면 웹 페이지 안에 콘텐츠를 채워넣는 것은 어렵지 않을 거에요.
레이아웃과 관련하여 궁금한점은 방명록이나 아래 댓글을 남겨주세요.
