1. Hloy Grail Layout
Holy Grail Layout이란, 아래와 같은 레이아웃을 만들기 위해 성배를 찾듯이 해매고 다녔다는 의미에서 Holy Grail Layout이라 합니다.
Holy Grail Layout 구조는 아래와 같습니다.
- header
- navigator | content | AD
- footer
이제 위와 같은 구조를 flex를 사용하여 만들어 보려고 합니다.
이전 글에서는 같은 구조를 float을 이용하여 만들어 보았는데 "flex가 레이아웃을 잡는데 매우 간편하고 효과적이다"라는 것을 느낄 수 있을 것입니다.
( float을 이용한 레이아웃 잡기 글 - 링크 )
1) 1단계
우선 HTML 구조를 잡아보겠습니다.
<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>
광고
</aside>
</section>
<footer>
<a href="#">푸터</a>
</footer>
</div>
- flex를 사용하기 위해서는 부모 태그가 존재해야 하므로, 부모 태그 <div class="container">로 감쌌고, 부모 태그에 display:flex 속성을 부여했습니다.
그리고 시각적인 효과를 위해 여러가지 속성들을 추가했습니다.
<style type="text/css">
.container{
display:flex;
flex-direction: column;
}
header{
border-bottom: 1px solid gray;
}
footer{
border-top: 1px solid gray;
}
</style>
2) 2단계
.content{
display:flex;
}
.content nav{
border-right:1px solid gray;
}
.content aside{
border-left:1px solid gray;
}
- Holy Grail Layout을 만들기 위해서는 <nav>, <main>, <aside> 요소를 하나의 row에 배치해야 합니다.
- 세 요소를 감싸고 있는 부모 태그는 <section> 요소이므로, <section> 요소에 display:flex 속성을 부여합니다.
- 그리고 시각적인 효과를 위해 선을 추가하는 속성을 부여했습니다.
3) 3단계
몇 가지 속성을 추가하지도 않았는데 벌써 완성이 된 것 같네요.
이제 브라우저 크기를 줄였을 때 <nav> , <aside> 크기가 고정되어 있고, <main> 크기만 변할 수 있도록 flex-shrink 속성을 부여하겠습니다.
그러기 위해서는 flex-basis 속성도 필요하겠네요.
nav, aside{
flex-basis:200px;
flex-shrink: 0;
}
브라우저의 크기를 줄인 상태의 결과입니다.
<nav>, <aside> 부분은 크기가 고정되어 있고, <main> 부분만 크기가 줄어드는 것을 확인할 수 있습니다.
이상으로 Holy Grail Layout을 flex를 이용하여 만들어보았습니다.
float과 비교했을 때 매우매우 간단하고 쉽고, 편하다는 것을 느낄 수 있습니다.
대부분의 서비스에서 버전이 낮은 브라우저에 대한 대응이 점점 끝나가고 있기 때문에, flex 사용 및 도입을 적극 추천드립니다!
[ 참고 ]
생활코딩 CSS - flex
[ 좋은자료 ]
flex로 만들 수 있는 10가지 레이아웃 - https://d2.naver.com/helloworld/8540176