[Frontend/Flexbox] display: flex를 이용하여 효율적으로 작업하기

HTML, CSS 코드를 사용해서 화면을 만들다 보면, 최종 디자인이 적용되기 전까지는 굉장히 러프하게 화면을 먼저 만들게 됩니다. 이 때에는 색상도 없고 검정색, 흰색, 회색 톤으로 작업을 하게 됩니다.

 

어차피 마지막에는 다 뜯어고쳐야 하지만, 그래도 백엔드 개발자와 합을 맞춰보기 위해서 샘플 페이지들을 만들어야 하는 상황이 발생하는데요...

 

이럴 때 두가지의 준비만 해 두면 정말 빠르게 화면을 구성해 볼 수 있습니다. 첫번째는 bootstrap의 그리드 스타일을 가져와서 사용하는 것입니다. 이 그리드 스타일을 가져다가 사용을 하게 되면 화면 전체에 있어서 일정 비율로 빠르게 분할이 가능합니다. 두번째로는 새로로 배열하는 박스와 가로로 배열하는 박스의 스타일을 클래스로 정의해 두는 것입니다. 이렇게 배열방식에 따른 박스를 미리 클래스로 정의해 두면 각각의 화면에서 유용하게 사용할 수 있습니다.

 

이 두가지의 준비를 위해 bootstrap의 그리드 스타일을 먼저 구해보겠습니다. 아래의 링크를 클릭하시면 grid.min.css를 다운받아 보실 수 있습니다.

 

grid.min.css

0.06MB

 

이어서 가로/세로 배열하는 박스 스타일을 클래스로 정의해 두겠습니다.

 

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

 

이렇게 그리드와 가로/세로 배열박스를 활용하여 마크업을 하면 좀 더 빠르고 효율적으로 작업하실 수 있습니다.