화면의 Layout을 그리는 Flex에 대하여...

2017. 6. 4. 03:18

[ Flex ]

기존의 table이나 div를 쓰고 position Float를 사용하던 방식에서 벗어나 Flex를 이용한 레이아웃을 구성하는 방법에 대해서알아봅시다.

1. flex 기본(display:flex, flex-direction, flex-basis) & flex-grow, flex-shrink 속성

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>Flex Study</title>
    <style media="screen">
      .container{
        background-color:powderblue;
        display:flex; /* Flex를 사용하려면 container(부모)에 display:flex를 지정해줘야함 */
        flex-direction:row; /* 행으로 정렬 */
        /*flex-direction:column;  수직 정렬 */
        /*
          - 행정렬일 떈 각 자식 element는 수직을 꽉 채우고
          - 수직 정렬일 땐 각 자식 element는 행을 가득 채운다.
        */
        height:200px;
      }
      .item{
        background-color:tomato;
        color:white;
        border:1px solid white;
        flex-grow:1; /* 안드로이드의 weight와 유사(차지하는 비율을 지정) */
      }
      .item:nth-child(2){
        /* flex-basis:200px; /* 자식의 기본 크기 지정 */
        flex-grow:2; /* 2번째 자식은 2비율만큼 차지하도록 함 */
      }
      .item:nth-child(1){
        flex-basis:150px;
        flex-shrink: 1;
        /*
          flex-shrink는 grow와 반대로
          flex-basis 값이 지정되어 있는 상태에서 이 크기보다 창크기를 작게해 줄어들어야하는 경우
          줄어드는 비율을 지정하게 된다.
          0으로하면 안줄어들고
          두군대서 각각 1, 2로해놓으면 첫번째는 3분의 1속도로 줄어들고 2번째는 3분의 2속도로 줄어든다.
        */
      }
    </style>
  </head>
  
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>

2. 위에서 공부한 속성을 활용해서 대표적인 레이아웃 디자인인 Holy Grail Layout을 구성해보도록 하자.

이러한 구조를 만들어 볼 건데

먼저, (Header), (Nav, Main, AD), (Footer)로 구성되어 있다.

크게 태그로

1) header, section, footer 시멘틱 태그로 구성하고 section에는 nav, main, aside(광고부분) 시멘틱 태그를 배치한다.

</section>

</div>

2) 먼저 Flex를 사용하기 위해 가장 부모인 container에 플렉스를 사용하겠다고 display:flex를 지정한다.

그리고, 그 자식들은 수직으로 배치되어야 함으로 flex-direction:column을 지정해 준다.

3) 헌데 section 태그 내의 자식들(nav,main,aside)는 가로로 배치되어야한다.

따라서, 그들의 부모인 section에 flex를 사용하기 위해 display:flex를 지정하고, flex-direction:row를 지정한다.

4) 마지막으로, 화면을 줄여도 nav부분과 aside부분은 줄어들지 않기 위해서 flex-shrink를 지정할 건데

지정하지 않을 경우 flex-shrink:1 로 되어있다. 따라서 나머지 부분은 그대로 두고

nav와 aside만 flex-shrink:0 을 지정해 창을 줄여도 그 크기는 줄어들지 않도록 설정하도록 한다.

또한 nav와 aside는 일정 크기를 가지도록 flex-basis:150px; 정도를 할당하도록 하자.

5) 기타사항

만약, section 태그 내에서 지금은 nav, main, aside 순으로 되어 있는데 이 순서를 main nav aside로 바꾸고 싶은 경우는 어떻게 할까

태그의 위치를 바꿀 수도 있지만 order라는 속성을 사용하면 된다.

main{

order:0;

}

nav{

order:1;

}

aside{

order:2;

}

로 지정하면 된다.

Ex)

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>Holy Grail Layout</title>
    <style media="screen">
      .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를 항상줘야함 */
        display:flex;
      }
      .content nav{
        border-right:1px solid gray;
      }
      .content aside{
        border-left: 1px solid gray;
      }
      nav,aside{
        /* 화면이 줄어들어도 nav와 ad부분은 줄어들지 않도록... */
        flex-basis:150px;
        flex-shrink: 0;
        /* 중간에 main만 줄어들게 됨 */
      }
      main{
        padding:10px;
      }
    </style>
  </head>
  
    <div class="container">
      <header>
        <h1>생활코딩</h1>
      </header>
      <section class="content">
        <nav>
          <ul>
            <li>html</li>
            <li>css</li>
            <li>javascript</li>
          </ul>
        </nav>
        <main>
          생활코딩은 일반인을 위한 코딩 수업입니다.
        </main>
        <aside>
          광고
        </aside>
      </section>
      <footer>
        <a href="https://opentutorials.org/course/1">홈페이지</a>
      </footer>
    </div>

저작자표시 비영리

'개발 > css' 카테고리의 다른 글

float 속성과 float를 이용한 Holy Grail Layout (0)	2017.06.04
반응형 웹의 핵심 media Query (0)	2017.06.04
position offset에 대해서... (0)	2017.06.03
layout 관련 속성 (0)	2017.06.03
폰트 곤련 속성 및 외부 폰트 설정하기 (0)	2017.06.03

악덕고용주의 개발 일기

화면의 Layout을 그리는 Flex에 대하여...

'개발 > css' 카테고리의 다른 글

+ Recent posts

티스토리툴바