CSS: flexbox(플렉스박스)

편리한 엘리먼트 배치

  작년 중후반이었습니다. 좀비 서바이벌 어드민 여러분들이 게임 외에서도 편하게 유저를 관리할 수 있도록 웹 관리 툴을 만드려고 했는데, 제 절망적인 디자인 감각이 망설이게 만들었었죠. 재작년이었나 재재작년이었나, Ruby on Rails 상에서 돌아가는 웹 도구를 만드려고 하다가 미친듯한 색감과 배치에 포기했던 아픈 기억이 있었기 때문입니다.

당시의 절망적인 디자인 배치

  뭐, 결론부터 말하자면 지금도 디자인은 똥망이지만! 그래도 작업하는 속도는 확실히 빨라졌습니다. 당시 위 절망적인 디자인을 하며 왼쪽 사이드 메뉴와 오른쪽 콘텐츠 영역을 딱 보기 좋게 한번에 나누고, 모바일 접속을 대비해 CSS 미디어 쿼리로 반응형으로 만드는 데 굉장히 많은 수정 노가다가 필요했었는데, 지금부터 알려드릴 Flexbox를 쓰시면 그런 노가다가 상당히 줄어들게 됩니다.

Flexbox?

  처음엔 플렉스박스란 게 생긴지도 모르고 있었습니다. 디자인에 참고하려고 새롭게 바뀐 애드센스 페이지를 분석하다가 display 프로퍼티에 처음 보는 녀석이 있길래 조사하다가 알게 되었죠.

Flexbox를 사용한 새로운 애드센스

  그리고 display:flex에 대해 찾아보니, 기존엔 CSS로 굉장한 노가다를 해야 했던 작업을 flex를 사용해 간단하게 처리할 수 있는 사실을 알게 되었습니다. 뷰포트 사이즈에 따른 자동 비율 설정, 특정 엘리먼트는 뷰포트에 상관없이 일정 크기 유지 등등... 당시 저에겐 신세계였죠.

  물론 저것 말고도 많은 기능이 들어있습니다. A Complete Guide To Flexbox - CSS Tricks에 접속해 자세한 사용 방법과 기능을 실시간으로 테스트해보세요. 몰랐던 분이라면 앞으로 자주 사용하게 될 겁니다.