📚 레이아웃의 유연성을 극대화 하는 법: Flexbox
웹 디자인을 하다보면 다양한 레이아웃 요구사항에 맞춰가는 것은 필수적인 작업이다. 특히 사용자 친화적인 웹 디자인을 실현하기 위해서는, 이러한 요구사항들에 '유연하게' 대응할 수 있는 능력이 중요하다. 이것이 바로 '유연성'의 장점이자 핵심이며, 현대 웹 디자인에서 매우 강조되는 부분인 것이다.
그렇다면, 레이아웃을 유연하게 구현하기 위해서는 어떻게 해야 할까? 이때 중요한 역할을 하는 것이 바로 CSS의 Flexbox이다.
Flexbox는 유연하고 강력한 레이아웃 설정을 가능하게 하는 CSS의 중요한 도구이다. Flexbox의 주요 기능과 속성들을 살펴보고, 그것들을 어떻게 활용하여 효과적인 웹 디자인을 구현할 수 있는지를 탐구해보자.
플렉스박스(Flexbox) 정의 및 역할
📌 Flexbox란?
Flexbox는 1차원 형태로 레이아웃을 배치하는 1차원 레이아웃 메서드이다.
Flexbox 는 Flexible Box module로 박스요소들에 대한 효과적인 배치를 위해 개발되었다. Flexbox를 사용하면 기존에 불가능하거나 복잡한 구현이 필요했던 레이아웃 구성도 비교적 쉽게 구현이 가능하다.
이 때, flex 아이템들은 가로 방향으로 배치되고, inline 요소들처럼 자신이 가진 content의 width만큼만 차지하게 된다. 추가적으로 height는 컨테이너의 높이만큼 늘어난다는 점도 참고하자.
📌 Flexbox 역할
Flexbox에서는 배치할 방향을 정하고 어떻게 정렬할지, 요소가 넘칠때는 어떻게 배치할지, 요소들 사이에 간격은 얼마나 줄지, 크기는 어떻게 늘리거나 줄일지 정하는 역할을 수행한다.
- 배치할 방향: flex-direction
- 정렬하기: justify-content, align-items
- 요소가 넘칠 때: flex-wrap
- 요소 간격: gap
- 크기 늘리거나 줄이기: flex-grow, flex-shrink, flex-basis
Flexbox 사용법
📌 기본 축과 교차 축
플렉스박스는 기본 축(main axis)과 교차 축(cross axis)을 가진다. 이 축들은 플렉스 아이템들의 배치와 정렬에 핵심적인 역할을 한다.
기본적으로 요소들은 기본 축 방향으로 순서대로 배치되고, 교차 축 방향으로는 꽉 채워서 배치된다.
📌 배치 방향 설정: flex-direction
flex-direction 속성으로 기본 축의 방향을 정할 수 있다. 기본값은 row로, 아이템들이 수평으로 배치된다.
flex-direction: row; /* 기본값 */
flex-direction: column; /* 세로로 정렬 */📌 기본 축 정렬: justify-content
justify-content 속성을 사용하면 기본 축 방향으로 아이템들을 정렬할 수 있다. 이 때, flex-start, center, flex-end, space-between, space-around 등 다양한 값으로 설정할 수 있다.
justify-content: flex-start; /* 기본 값*/
justify-content: center; /* 중앙 정렬 */
justify-content: space-around; /* 요소 당 기본 축 방향으로 양쪽에 모두 같은 공간 부여 */
justify-content: space-between; /* 기본 축 방향으로 양 끝을 늘어뜨려서 배치 */
justify-content: space-evenly; /* 빈 공간의 크기가 모두 동일하도록 배치 */📌 교차 축 정렬: align-items
교차 축 방향으로 아이템을 정렬할 때는 align-items 속성을 사용한다. 기본값은 stretch로, 아이템들이 교차 축을 따라 늘어난다.
align-items: stretch; /* 기본 값 */
align-items: center; /* 중앙 정렬 */📌 요소가 넘칠 때: flex-wrap
요소가 넘치는 경우 flex-wrap: wrap을 지정해주면, 넘치는 요소는 '교차 축 방향'을 기준으로 넘어가 배치된다.
웹사이트를 만들다보면 요소의 개수가 fixed할 때 보다 flexible 할때가 많으므로, 이럴 때 flex-wrap을 활용하면 매우 유용하게 활용할 수 있다.
flex-wrap: wrap;📌 간격 설정: gap
gap 속성을 사용하면 아이템 간의 간격을 설정할 수 있다.
하나의 값만 주면 모든 방향에 적용되고, 두 개의 값을 주면 세로와 가로 간격을 별도로 설정할 수 있다.
gap: 10px; /* 모든 방향의 간격 */
gap: 10px 20px; /* 세로 간격, 가로 간격 */📌 요소 늘려서 채우기: flex-grow
flex-grow 속성은 플렉스 아이템이 늘어나는 비율을 설정한다. 기본값은 0이며, 값이 클수록 더 많이 늘어난다.
flex-grow: 0; /* 기본값 */📌 요소 줄여서 채우기: flex-shrink
flex-shrink는 플렉스 아이템이 줄어드는 비율을 설정한다. 값이 클수록 아이템이 상대적으로 더 많이 줄어든다.
flex-shrink: 1; /* 기본값 */Outro
Flexbox에 대해 학습하고 나니 내가 가고자하는 목표점, '유연한 개발자'에 한 걸음 더 다가간 것 같다. 단순히 Fixed하게 레이아웃을 구성하는 것이 아니라, Flexible한 레이아웃을 구성함으로써 실시간으로 달라지는 레이아웃에 '유연하게' 대처해보자. 그리고 이를 통해 더욱 '유연한 개발자'가 될 수 있도록 한 단계 더 도약해보자..! 🔥🔥🔥
