CSS #3 Flex box

zzwwoonn·2021년 8월 23일

Web Front

목록 보기

5/13

대망의 마지막 챕터!! CSS 의 꽃!!
Flex box에 대해서 공부해보고, CSS 파트를 마무리하겠습니다 🔥

Flex box 는 박스와 아이템들을 행 또는 열로 자유자재로 배치할 수 있는 정말 유연한 기능입니다. 원하는 구조로 너무나 쉽게 구현이 가능하고, 이것만 잘해도 웹 사이트의 레이아웃을 어느정도 잡을 수 있습니다. CSS 의 꽃이라고 불리는 이유가 있죠!!
바로 시작해보겠습니다🖤

예전에는 모든 브라우저에서 호환이 가능하면서, 강력하게 만들기 위해
position(CSS #2)을 이용하거나 float , table 등을 이용해 레이아웃을 짜곤 했습니다. 하지만 너무 복잡하고 시간이 많이 소요되었고, 이것들로는 도저히 구현 할 수 없는 제약 사항이 있었습니다. 하지만 이젠 Flex box 로 손쉽게 다룰 수 있습니다!!

float

Flex box 를 설명하기에 앞서, float 속성을 간단하게 알아보겠습니다.
float 의 원래 목적은 이미지와 텍스트를 어떻게 배치 할 건지 정의하기 위해 나온 속성입니다. float:left 로 정의되어 있다면, 이미지가 왼쪽에 배치되고 텍스트가 이미지를 감싸면서 자리를 잡습니다.

이전까지만 해도 많은 사람들이 float을 이용해서 박스, 아이템들을 각각 왼쪽, 오른쪽, 중간에 배치를 하곤 했는데, 이것은 float의 원래 목적에는 어긋나는 것입니다 !!!!
(이런 경우를 Hack 이라고 합니다.)

출처 - 드림코딩 by 엘리

이제 본격적으로 flex box 에 대해 알아보겠습니다.
flex box 는 크게 2가지만 알고 있으면 큰 그림을 이해하기 되게 쉽습니다.
첫 번째는 박스(container)와 아이템에 각각 지정 가능한 속성들이 다르게 존재한다!
라는 것입니다.

container 에 지정 가능한 속성

display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

item 에 지정 가능한 속성

order
flex-grow
flex-shrink
flex
align-self

두 번째 컨셉은 플렉스 박스에는 중심축과 반대축이 있다 라는 것입니다.
수평선과 수직선이 있다면 수평선을 중심축(main axis)으로 잡았을 때, 자동으로 수직선이 반대축(cross axis)이 됩니다.

실습(JSbin.com)을 통해서 각각의 특징들을 천천히 익혀보겠습니다 😎

100vh vs 100%

100vh 와 100% 는 어떻게 다를까요 !?

% 속성은 해당 컨테이너(.container)가 들어있는 부모의 높이에서의 %를 얘기합니다. 하지만 위와 같은 상황에서 container의 부모인 body 의 높이를 100% 라고 주어도 결과는 똑같습니다. 이것은 또한 같은 이유로, body 의 부모의 높이가 지정이 안되어있기 때문입니다.(높이가 100%가 아님)
따라서 body 의 부모인 html 의 높이까지 100%를 준다면 아래와 같이 결과가 나옵니다 !! (100vh 와 같은 결과가 나옵니다)

부모의 높이가 지정이 안되어 있다면?
들어있는 내용물(박스, 아이템)에 해당하는 딱 그만큼만 높이가 잡아지는겁니다.

이와는 다르게 부모에 상관없이, 보이는 vh(view point height)의 100%를 다쓰겠다!! 하면 100vh 라고 하면 되는것입니다.

%속성을 쓰려면 부모의 부모의 ~~ 부모에서부터 차근차근 내려와야 함을 알 수 있습니다. 이걸 잘 몰라서,, 프로젝트 할 때 되게 애를 많이 먹었네요ㅜㅠ

flex-direction

flex-direction 은 중심축을 정하는 속성입니다.
아래의 사진과 같이 row 가 기본값이고, 중심축을 세로(컬럼)으로 바꾸고 싶다면 속성값을 column 으로 지정해주면 됩니다.

flex-wrap

flex-wrap 은 만약에 아이템이 10개가 아니라 더 많아지는 경우에 (넘쳤을 경우에) 어떻게 넘어가게 되는지를 정해주는 속성입니다.

기본값인 nowrap은 한줄에 빼곡하게 붙어있고, 뷰 사이즈를 가로로 작게 줄여도 한줄에 그대로 빼곡하게 붙어있습니다. (박스 사이즈가 줄어들면서)
=> 랩핑을 안하겠다 라고 해놓은 상황

속성값을 wrap으로 준다면 크기에 맞게 꽉 차고, 넘어가는 부분은 밑으로 넘어가게 됩니다.

wrap-reverse 를 속성값으로 준다면 반대로 정렬이 되면서 10-9-8-7-6 이런식으로 나오게 됩니다!

bolder 속성을 공부하면서 bolder: 1px solid black 이런식으로 한줄에다가 다 적을 수 있다고 배웠는데요, flex 속성도 마찬가지로 적용 가능합니다.

flex-flow 로 flex-direction 과 flex-wrap 을 표현가능합니다.

Ex > flex-flow : column nowrap;

justify-content

컨테이너 안에있는 아이템들을 어디에 정렬할건지 그 위치를 정해줍니다.
기본값은 flex-start 이고, row가 중심축이라면 제일 왼쪽부터
column이 중심축이라면 제일 위쪽부터 배치가 됩니다.
속성값이 flex-end 라면 row 에서 오른쪽에서부터 딱 붙어서 나오게 됩니다.
이때에 배치되는 순서는 원래의 상태를 유지합니다 !! (헷갈리면 안됨)

개인적으로 프로젝트 할 때 가장 많이? 유용하게 쓰이는 속성이라고 생각합니다!!

center -> 중간으로

space-around -> 박스를 둘러싸게 스페이스를 줘서(일정하게, 뷰 사이즈에 맞게, 자동으로) 알아서 공백을 부여해줍니다.
space-between, space-evenly 등등 공백의 간격을 어떻게 줄거야! 라는점에 대해서? 여러가지의 속성값이 있습니다.

이처럼 justify-content 는 중심축을 기준으로 아이템들을 어떻게 배치할것인가!! 를 정하는 속성값입니다.

align-items

그림만 봐도 이해가 되실거라 믿어 의심치 않습니다!
중심축으로 row, 반대축으로 column 을 주었을 때, 반대축에서도 가운데다가 냅두고 싶다!! 했을 때에 아래와 같이 속성 값을 주면 됩니다.

align-items 에는 baseline 이라는 속성이 있는데요! 예를 들어 item1 에 패딩이 있다면,, 박스들끼리의 위치가 애매해 질 수 있습니다.

하지만 baseline 속성을 준다면?

텍스트(1,2,3,4~~)가 균등하게 일자로 배치될 수 있게 됩니다.

align-content

반대축을 기준으로 어디에 놔둘건데?? 실습을 통해 확인해봅시다!!

space-between : 제일 위와 제일 아래는 딱 붙고, 나머지는 같은 공백으로

center : 중간으로 전부다

새로 나온 속성 값들은(start end ~~) 가끔 특정 브라우저에서는 지원이 안되는 경우가 가끔 있습니다.
can i use 에서 확인 하시고 사용하시길 바랍니다!

지금까지 컨테이너에 적용 가능한 속성값들을 알아봤습니다.
justify-content에 어떤 속성값들이 있더라? 하고 기억을 못해도 괜찮습니다 !!
현업에서 일을 할 때 그런 부분이 자세히 기억 안나는건 제때 찾아서 쓰면 됩니다.
중요한 핵심 키 포인트는 큰 개념을 내가 이해하고 있느냐 없느냐 입니다.
해당 개념을 이해하고 있을 때 내가 정보를 찾는 속도와,
이해를 전혀 못하고 있을 때 처음부터 찾는 속도는 어마무시한 차이가 납니다...!!
큰 그림을 이해하고 있는게 정말 중요하고, 자세한 속성값들이나 세세한 내용들은 그때 그때 찾으면서 쓰면 됩니다 ⭐️

바로 다음으로 아이템에 적용 가능한 속성값들에 대해 알아보겠습니다 🔥🔥