[ holy grail layout ]
: 성배 레이아웃은 일반적으로 5개의 영역으로 구성이 되는데요.
회면 최상단에 각각 헤더(header)와 풋터(footer) 영역이 위치하고,
그 사이의 영역이 다시 네비게이션(nav), 메인(main), 사이드바(aside) 영역으로 나누어지게 됩니다.
시멘틱(semantic) HTML을 이용해서 성배 레이아웃을 마크업을 해보면 다음과 같은 구조를 가지게 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: flex;
flex-direction: column;
}
header {
border-bottom: 1px solid gray;
padding-left: 20px;
}
footer {
border-top: 1px solid gray;
padding: 20px;
text-align: center;
}
.content {
display: flex;
}
.content nav {
border-right: 1px solid gray;
flex-basis: 150px;
flex-shrink: 0;
}
.content aside {
border-left: 1px solid gray;
flex-basis: 150px;
flex-shrink: 0;
}
main {
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<header><h1>비오는 날 개구리</h1></header>
<section class="content">
<nav>
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
</ul>
</nav>
<main>비오는 날 개구리 블로그</main>
<aside>AD</aside>
</section>
<footer><a href="https://eundol1113.tistory.com/">홈페이지</a></footer>
</div>
</body>
</html>'프레임워크 > CSS' 카테고리의 다른 글
| [생활코딩] Media Query (0) | 2022.02.04 |
|---|---|
| [생활코딩] Multi Column (0) | 2022.02.04 |
| [생활코딩] flex : basis & grow & shrink (0) | 2022.02.03 |
| [생활코딩] flex : basic (0) | 2022.02.03 |
| [생활코딩] flex : intro (0) | 2022.02.03 |
댓글