지난 포스트에서 요소를 자유롭게 배치하는 'position' 속성을 배웠다면, 이번에는 현대 웹 디자인에서 가장 강력하고 유연한 레이아웃 도구인 Flexbox를 알아볼 차례다.
과거의 복잡했던 편법들을 뒤로하고, 오직 레이아웃만을 위해 탄생한 flex가 어떻게 화면 구성을 혁명적으로 바꾸었는지, 그리고 기본적인 사용법도 정리해 보겠다.
이전 포스트
CSS position 속성 완벽 가이드: static, relative, absolute, fixed 차이점 정리
생활코딩 CSS 수업 영상: flex (intro)
Flex의 발음은 '플렉스'인데, 계속 '플럭스'라고 말하시는 부분 때문에 집중이 조금 힘들어지는 수업이다.
하지만 이런 양질의 수업을 무료로 제작하고 공개한 생활코딩의 이고잉 님께 감사하면서 그러려니 하고 본질에 집중하자.
CSS 레이아웃의 역사를 알면 왜 flex가 '혁명'이라 불리는지 체감할 수 있다.
과거의 웹 개발자들은 화면을 나누기 위해 flex가 아닌 다른 코드들을 본래의 목적과 다르게 써야 했었다.
1. table 태그 시대
원래는 표 데이터를 보여주기 위한 <table> 태그를 쪼개서 레이아웃을 만들었다.
코드가 매우 복잡해지고, 수정이 힘들며, 검색 엔진이 내용을 파악하기 어렵다는 치명적인 단점이 있었다.
2. float 시대
이미지 옆에 텍스트를 흐르게 만드는 float 속성을 억지로 끌어다 박스를 배치했었다.
하지만 '마진 겹침'보다 더 지독한 '부모 높이 인식 불가' 문제 등으로 인해 매번 clearfix 같은 복잡한 편법을 써야 했다.
3. flex의 등장
그래서 등장한 것이 바로 처음부터 레이아웃 설계만을 위해 태어난 Flexbox다.
flex는 혼자 작동하지 않는다.
부모(컨테이너)가 규칙을 정하면, 자식(아이템)들이 그 규칙에 맞춰 배치되는 방식이다.
생활코딩 CSS 수업 영상: flex (기초)
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: powderblue;
display: flex;
flex-direction: row-reverse;
}
.item {
background-color: tomato;
color: white;
border: 1px solid white;
}
</style>
</head>
<body>
<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>
</body>
</html>위의 생활코딩 수업 영상에서 사용한 코드다.
부모(class="container")의 display 속성을 flex로 설정하면, 이제부터 이 박스는 Flex 규칙을 따르게 된다.
flex-direction 속성은 아이템을 가로로 쌓을지(row), 세로로 쌓을지(column) 정한다.
row와 column 이외에 row-reverse와 column-reverse 등도 있다.
row-reverse: 아이템들이 오른쪽 끝에서부터 시작하여 왼쪽으로 쌓인다. (1, 2, 3번 순서가 오른쪽부터 3, 2, 1처럼 보인다.)column-reverse: 아이템들이 아래쪽 끝에서부터 시작하여 위로 쌓인다.
display: block; (기본) VS display: flex; flex-direction: column;
display 속성을 아예 설정하지 않은 것과 display: flex;를 설정하고 flex-direction: column;을 준 것은, 겉보기에는 둘 다 수직으로 쌓이지, 내부는 완전히 다르다.
그냥 두었을 때 (Block)
- 강제적: 자식들은 무조건 한 줄을 다 차지하며 아래로 쌓인다.
- 정렬의 한계: 자식들을 수직 중앙에 놓거나, 간격을 일정하게 벌리는 등의 세밀한 조절이 어렵다.
Flex + Column 설정
- 유연함: 자식들이 수직으로 쌓이긴 하지만, 이제부터는 Flex의 규칙을 따른다.
- 강력한 정렬:
justify-content를 쓰면 자식들 사이의 간격을 똑같이 맞출 수 있고,align-items로 가로 정렬도 한 번에 해결한다. - 순서 변경: HTML 코드를 건드리지 않고도 CSS만으로 자식들의 순서를 뒤바꿀 수 있다.
생활코딩 CSS 수업 영상: flex (basis & grow & shrink)
이번에는 자식(아이템)들에 주는 속성에 대해서 배워보겠다.
1. flex-basis
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: powderblue;
height: 200px;
display: flex;
flex-direction: row;
}
.item {
background-color: tomato;
color: white;
border: 1px solid white;
}
.item:nth-child(2) {
flex-basis: 200px;
}
</style>
</head>
<body>
<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>
</body>
</html>.item:nth-child(2){ ... }라는 선택자는 태그의 class="" 속성이 item인 요소 중에서 두 번째 것을 선택하는 선택자다.
flex-basis 속성은 아이템의 기본 크기를 설정한다.
flex-direction을 row로 했다면 지정한 픽셀 값만큼 가로로 크기가 커지고, column으로 했다면 세로로 크기가 커진다.
2. flex-grow
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: powderblue;
height: 200px;
display: flex;
flex-direction: row;
}
.item {
background-color: tomato;
color: white;
border: 1px solid white;
flex-grow: 1;
}
.item:nth-child(2) {
flex-grow: 2;
}
</style>
</head>
<body>
<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>
</body>
</html>flex-grow 속성의 기본값은 0이다.
flex-grow는 남는 빈 공간을 자식들이 어떤 비율로 나눠 가질지 정한다. (숫자가 클수록 더 많이 가져감)
위의 코드처럼 다른 item들에는 flex-grow에 1을 줬는데, .item:nth-child(2){ ... }에는 2를 주면, 이 요소는 다른 요소들보다 공간을 2배로 차지하게 된다.
3. flex-shrink
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: powderblue;
height: 200px;
display: flex;
flex-direction: row;
}
.item {
background-color: tomato;
color: white;
border: 1px solid white;
}
.item:nth-child(1) {
flex-basis: 150px;
flex-shrink: 1;
}
.item:nth-child(2) {
flex-basis: 150px;
flex-shrink: 2;
}
</style>
</head>
<body>
<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>
</body>
</html>flex-shrink 속성은 공간이 부족할 때 어떤 비율로 줄어들지 정한다.
위의 코드를 예로 들면, 크기를 설정해 놓은 두 자식의 기본 크기 합은 300px인데, 부모는 200px밖에 안 된다고 치자.
결과적으로 100px만큼을 줄여야(희생해야) 하는 상황이다.
flex-shrink는 숫자가 클수록 "나는 더 많이 줄어들 준비가 되어 있어."라는 뜻이다.
그래서 자식 1은 전체 희생량의 1/3만큼 줄어들어서 약 33.3px 감소하고, 자식 2는 전체 희생량의 2/3만큼 줄어들어서 약 66.6px 감소하게 된다.
다음 포스트
CSS Flexbox로 만드는 Holy Grail 레이아웃과 flex 기타 속성 정리
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊
지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.
0 Comments
댓글 쓰기
🔸 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
🔸 비로그인 방문자 분께서는 '익명'보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
🔸 구글 로그인 방문자는 '알림 사용'에 체크를 하시면, 남겨주신 댓글에 대한 답글 알림을 메일로 받아볼 수 있습니다. 📩