Lesson #5 CSS FlexBox ( 플렉스박스 1)

Lesson #5 CSS FlexBox ( 플렉스박스 )

이 포스팅의 목차

0. 플렉스박스 소개.

1. 플렉스박스란

2. 방향, 흐름, 시각적인 순서 처리

2-1.flex-direction

2-2. flex-wrap

2-3. flex-flow

CSS Flexbox

00. 플렉스박스 소개

flex모듈에 대해 소개해드릴께요.

grid Layout과 함께 유동적인 레이아웃 모듈인 Flrex box(플렉스박스)모듈에 대해 소개합니다.

이 Flexbox(플렉스박스)모듈은 복잡한 웹 페이지와 응용프로그램들을 구현할 수 있도록 디자인된 새로운 레이아웃입니다.

CSS를 많이 다뤄본 분들이라면 본인들만의 노하우로 수직중앙 정렬(Vertical centering)을 하고 계실거에요.

이처럼 중요하고 필요하지만 조금은 허술한 방식에 의존해 구현해야만 했던 문제들을 Flexbox(플렉스박스)를 사용하면 쉽게 해결됩니다. 더불어 같은 공간에 여러개의 박스가 같은 간격으로 분배되어야 하는 문제들도 간단히 해결할 수도 있죠.

flexbox(플렉스박스)를 잘 알아두면 일상적으로 발생하는 문제들을 많이 처리할 수 있고, 웹페이지의 배치에 획기적으로 변화를 주는 잠재성을 갖고있습니다. 요즘 웹개발을 할 때 고정 폭을 사용하는 것이 많이 드물어 졌죠. 넓이값에 있어서만큼은 한계가 없다는 인식으로 변했습니다. 웹이 앞으로 지향해야 할 방향과 더할 나위 없이 잘 맞는 모듈이 바로 flexbox(플렉스박스) 입니다.

flexbox(플렉스박스)가 정확하게 무엇인지, 그리고 어떤 기능을 갖고 있는지에 대해서 살펴보고 이 모듈에서 제시하고 있는 각각의 속성과 값들을 살펴봅시다. 그리고 마무리로 실전 예제를 통해 직접 적용해봅시다.

1. 플렉스박스란

정확하게 플렉스박스 레이아웃이란 무엇을의미하고 어ᄄᅠᆫ 장점이 있을까요?

이 레이아웃을 형성하는 가장 기본적인 모델은 플렉스 컨테이너(Flex Container)와 관련이 있습니다. 이 컨테이너의 컨텐츠를 플렉스 항목(Flex item)이라고 합니다. 플렉스 항목들은 유연하지 않은 요소와는 매우 다른 규칙들에 의해 작용하고 훨씬 더 많은 기능들을 제공할 수 있다.

** 플렉스 항목(Flex item)의 기능

이 플렉스 항목의 가장기본적인 기능은 "유연"하게 조절하는 능력이다.

가용공간에 대한 비율을 기반으로 크기를 조절할 수도 있다.

또 하나의 인상적인 기능은 시각적인 순서와 방향을 정할 수 있다는 것이다.

플렉스박스 레이아웃 모듈은 우리가 원하는 순서나 방향에 따라 플렉스 항목들이 나타나게 할 수 있다. 실제 소스와는 별개로 동작하기 때문에 접근성에 제약을 받지 않는다.

마지막으로 정렬을 제어하는 능력이 있다. 너비와 간격을 대등하게 하고 또, 단의 높이를 동일하게 하고 수직 정렬을 하는 등 과거에는 힘들게 작업해야 했었던 부분들을 제어할 수 있다.

2. 방향, 흐름, 시각적인 순서 처리

새로운 석성들을 제시하고 있기는 하지만 기존 속성들을 위한 자리도 마련해 놓았다. 특히 display 속성이 대표적이다. 플렉스박스 모듈은 display를 위해 두 개의 값을 새로이 제시하고 있다. 이 값들은 요소를 블록(block) 또는 인라인(inline)레벨의 플렉스 컨테이너로 전환시킬 수 있습니다.

display : flex 블록 레벨의 플렉스 컨테이너 지정

display ; inline-flex 인라인 레벨의 플렉스 컨테이너 지정.

요소에 적용할 때 이 display 값들은 컨텐츠를 위해 새로운 플렉스 서식 환경(flex formatting context)을 만들게 됩니다. 그것이 바로 플렉스 항목이 되죠. 다음 아래 HTML코드를 기준으로 실습하겠습니다.

<HTML>

<section class="container">
      <div class="bucket">
        <h2>Heading 1</h2>
        <img src="http://adidas03312.nanuminet.co.kr/01.jpg" alt="TEST">
        <p><!-- 네 줄의 텍스트 --></p>
      </div>

      <div class="bucket">
        <h2>Heading 2</h2>
        <img src="http://adidas03312.nanuminet.co.kr/01.jpg" alt="TEST">
        <p><!-- 네 줄의 텍스트 --></p>
      </div>

      <div class="bucket">
        <h2>Heading 3</h2>
        <img src="http://adidas03312.nanuminet.co.kr/01.jpg" alt="TEST">
        <p><!-- 네 줄의 텍스트 --></p>
      </div>

      <div class="bucket">
        <h2>Heading 4</h2>
        <img src="http://adidas03312.nanuminet.co.kr/01.jpg" alt="TEST">
        <p><!-- 네 줄의 텍스트 --></p>
      </div>

      <div class="bucket">
        <h2>Heading 5</h2>
        <img src="http://adidas03312.nanuminet.co.kr/01.jpg" alt="TEST">
        <p><!-- 네 줄의 텍스트 --></p>
      </div>

      <div class="bucket">
        <h2>Heading 6</h2>
        <img src="http://adidas03312.nanuminet.co.kr/01.jpg" alt="TEST">
        <p><!-- 네 줄의 텍스트 --></p>
      </div>

      <div class="bucket">
        <h2>Heading 7</h2>
        <img src="http://adidas03312.nanuminet.co.kr/01.jpg" alt="TEST">
        <p><!-- 네 줄의 텍스트 --></p>
      </div>
    </section>

<CSS>

.container{ width:1200px; margin:50px auto; background: #eee; /*fex layout*/ display:flex; } 
.bucket{ width:300px; background:#eeeeee; padding:2em; border:1px solid #fe6565; }

2-1 flex-direction 속성의 기본값은 row

흐름의 방향을 제어하는 이 속성은 기본적으로 왼쪽에서 오른쪽, 위에서 아래쪽 쓰기를 기준으로 합니다.

1) row는 기본값이고, 왼쪽에서 오른쪽으로 나열.
2) row-reverse, 오른쪽에서 왼쪽으로 나열.
3) column, 수직으로 위쪽에서 아래쪽으로 향해 나열.
4) column-reverse 수직으로 아래쪽에서 위쪽으로 향해 나열.

2-2 flex-wrap 속성의 기본값은 nowrap

flex-wrap속성은 항목들이 열을 바꾸는 방법을 제어합니다.

1) wrap은 항목들이 컨테이너안에서 여러 줄로 열 바꿈을 할 수 있게 허용. 새롭게 생기는 항목을 아래쪽 열에 배열.

2) wrap-reverse 항목들이 여러 번 열 바꿈을 할 수 있지만 그 나열 방향은 반대방향입니다. wrap이 새롭게 생기는 컨테이너를 아래쪽 열에 배열한다면, wrap-reverse는 위쪽의 새로운 열에 배열합니다

이 값이 적용되면 항목들이 여러 개의열로 나뉘지 않고, 여러 항목들이 너비를 조정해서 하나의 열 안에 모두 끼워넣어집니다.

.container{ width:1200px; margin:50px auto; background: #eee; /*fex layout*/ display:flex; flex-direction:row; flex-wrap: nowrap; } 
.bucket{ width:100%; background:#eeeeee; padding:2em; border:1px solid #fe6565; }
.bucket > img{width:100%;}

이때 bucket의 width:값은 100%로 변경한다. width값을 100%로 변경하지 않으면 버킷들이 추가되어도 이미지 너비보다 더 작아지지 않게 된다. 이미지에도 함께 width:100%를 주었습니다.

See the Pen Flexbox : flex-wrap by daeyun (@daeyun) on CodePen.

2-3 flex-flow

flex-flow는 fow-direction과 flex-wrap값을 명시하는 단축 속성입니다. 문법은 관대한 편입니다. 두 개의 매개변수를 순서에 상관없이 지정할 수 있고, 둘 중의 하나를 생략하는 것도 가능하기 때문입니다. 만약 버킷 컨테이너에 높이를 추가한다면 버킷이 column이 명시하는 방향 값과 wrap-reverse가 지정한 나열 방식에 따라서 어떻게 달라지는지 확인할 수 있을 것입니다.

.container{
      width:1200px;
      margin:50px auto;
      background: #eee;
       /*fex layout*/
      display:flex;
      height:500px;
      flow-flow : column wrap-reverse;
    }

See the Pen flexbox : flex-flow by daeyun (@daeyun) on CodePen.

[참고서적]

전문가를 위한 CSS3

[참고사이트]

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://www.w3schools.com/Css/css3_flexbox.asp

728x90

저작자표시 비영리 변경금지

찐 웹개발자가 되기위해 오늘도 step by step

Lesson #5 CSS FlexBox ( 플렉스박스 1)