[CSS] Flex (2) - 레이아웃 ( Holy Grail Layout )

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