티스토리 뷰
Flexbox는 무엇인가요?
간단하게 말하자면 컨테이너 내의 아이템들을 쉽고 깔끔하게 정리할 수 있는 CSS layout 모드입니다.
Flexbox는 왜 좋은 건가요?
기존에 CSS를 사용할 때에는 block 모델을 사용하여 width나 float를 활용하여 페이지 내의 아이템들을 배치하고 그리고 margin, padding이 어느 정도 필요한가 계산을 하고 귀찮아지는 일이 많았습니다.
하지만 float는 초기에 그림 옆에 텍스트를 배치하기 위한 도구였지 웹 전체의 레이아웃을 배치하기 위해 만들어진 것이 아니였습니다. 그로 인하여 마진 병합 등의 문제점들이 많이 발생하게 되었고 모바일 웹 사용량이 폭발적으로 증가하면서 반응형 웹 디자인을 위한 해결책도 필요하게 되었습니다.
Flexbox의 등장으로 이러한 문제들을 더 간단하게 처리할 수 있게 되었습니다.
Flexbox의 장점
- Float를 사용할 일이 없습니다!!
- 반응형이고 모바일 친화적입니다
- child element를 배치하는 것이 훨씬 더 쉽습니다
- margin collapse(마진 병합)이 일어나지 않습니다
- element들의 순서를 변경하기 위해서 HTML 파일을 수정하지 않아도 됩니다
Flexbox Box 모델 특징
- container의 남는 공간에 맞춰서 item의 너비와 높이를 변경할 수 있습니다
- 수평적 배치나 수직적 배치 모두 쉽게 활용 가능합니다
- 작은 규모의 레이아웃에 주로 이용되고 큰 규모의 레이아웃에는 Grid라는 레이아웃이 활용됩니다
Flexbox 구성요소
flexbox propeties들은 mozilla에서 정리가 잘 되어 있습니다.
처음 flexbox를 접하신다면 각 구성요소들을 이해하고 나면 실제 활용하려고 할 때 전혀 감이 안 잡힐 것입니다.
그런 때를 대비하여 어느 착한 분께서 flexbox 배치를 연습해보기 위한 (나름?)재미있는 개구리 배치 게임을 만들어주셨습니다.
실제로 경험해본 결과 활용해보기 전에는 기억이 안 날 가능성이 상당히 높으므로 꼭 밑에 개구리 게임을 해보시길 추천합니다!
'코딩 > Web' 카테고리의 다른 글
| 모바일 이용가능 센서 (0) | 2018.12.17 |
|---|---|
| 스프링 400에러 (0) | 2018.03.15 |