[CSS] 세련된 Layout 구성을 위한 Flexbox 개념 및 추천 학습 사이트

해당 포스팅에서 flex에 대한 설명을 간단하게 하고 왜 flex를 사용해야하고 어떤 장점이 있는지 설명할 것입니다. 자세한 코드 설명과 속성들에 대해서는 더욱 잘 정리된 사이트와 해당 flex를 연습할 수 있는 사이트를 추천하는 구성을 하였습니다.

---

이번 시간에는 Flexbox Layout에 대해서 알아볼 것이다.

 

지난 시간에서 우리는 display 속성들에 대해서 알아보며 inline-block는 문제점이 있다고 했다.

 

만약 div 태그 5개가 inline-block으로 지정되어 있다고 생각해보자.

우리는 배경 색으로 wheat을 주고 300 px로 스타일링을 했고, 화면에는 다음과 같이 나왔다.

일단 문제점이 좀 보인다.

 

1. 우린 div 사이에 간격을 띄우지 않았는데 간격이 생겼다
2. 우린 5개의 div를 한 번에 띄우고 싶은데 4개를 벗어난 1개가 다음 줄에 출력된다.

여기서 1번 2번 문제를 모두 해결했다고 치자.

 

그런데 아주 Critical한 문제가 발생한다.

 

2번 문제를 해결하고 집에 와서 모바일로 보니 화면 사이즈에 따라 div가 여러 줄에 출력되던 것이다.

이런 문제점을 위해 탄생한 것이 바로 Flexbox 이다.

Flexbox

Flexbox는 모던 웹을 위해 기존 layout 방식(block, inline, inline-block)보다 더욱 세련된 방식의 CSS3의 layout이다.

 

Flexbox는 이름에서도 알 수 있듯 매우 Flexible 하다.

요소의 사이즈가 불명확하거나 동적으로 변화할 때도 유연한 레이아웃을 그릴 수 있다.

Flexbox의 장점

flexbox를 배우기 전에 얼마나 매력적인지 먼저 알아보자.

장점은

• 1줄의 코드 추가로 수평 정렬이 가능하다.
• 요소의 상하좌우 정렬, 순서 변경이 간단하다.
• 요소가 간격 조절이 간단하다.
• 서로 다른 height를 갖는 요소의 수평정렬 시에 간단한 상하중앙 정렬이 가능하다.

이 카테고리의 css는 css의 기초 개념에 대해서 살펴보는 시간이므로 지난 시간을 통틀어 모든 포스팅에서 깊은 코드를 보여주지는 않았지만, 기존의 inline, block, inline-block으로 위에 4가지를 수행하기에는 많은 무리가 있었다.

---

flexbox를 쉽게 볼 수 있는 사이드 poiemaweb

flex에 대한 이해를 위한 미니 게임 flexboxfroggy