CSS display: flex; property

문제

15. 메뉴 바(.bar) 안의 항목들을 가로로 배치하고, 가로축 기준 가운데로 모으려고 한다. 빈칸 (ㄱ), (ㄴ)에 들어갈 코드는? [4.0점]

.bar {
  display: (ㄱ); /* 자식들을 가로로 배치 */
  (ㄴ): center; /* 가로축 기준 가운데로 */
}

개요

먼저 문제에는 (ㄱ), (ㄴ)으로 표기되어있는데, 선지에서는 (가), (나)로 표기되어있어 문제에 오류가 있다는 것을 알 수 있다.

이 문제는 Flexbox의 기본 배치 방향과 정렬 축을 묻는 문제로 판단된다. 초보자에게는 Flexbox가 "요소를 가로로 배치하기 위한 CSS 속성"처럼 보일 수 있다. 하지만 Flexbox라는 이름과 가로는 관련이 없어 보이니, Flexbox가 무엇인지에 대해 다시 생각해보자.

Flexbox는 요소 간 공간 배분과 정렬을 유연하게 처리하기 위해 만들어졌다. 화면 크기나 컨테이너 크기에 따라 자식 요소들이 줄어들거나 늘어나며 배치될 수 있고, 필요한 경우 요소의 흐름도 오른쪽, 왼쪽, 위쪽, 아래쪽 등 여러 방향으로 지정할 수 있다. 즉 Flexbox의 핵심은 "가로 배치"가 아니라, 다양한 화면 환경에서 요소들의 크기와 위치를 유연하게 조정하는 데 있다. 역사적으로는 모바일 기기와 반응형 웹의 확산, 그리고 Bootstrap 같은 JavaScript/CSS 레이아웃 프레임워크의 사용 증가가 Flexbox와 Grid 같은 CSS 레이아웃 명세의 발전에 영향을 주었다.

풀이

먼저 "항목들을 가로로 배치"한다는 조건만으로 display 값이 반드시 flex여야 한다고 말할 수는 없다. 앞에서 본 것처럼 Flexbox의 정의가 "가로"에 국한되어있지 않고, grid도 열을 명시하면 가로 배치를 만들 수 있기 때문이다.

grid는 명시적인 열 설정이 없으면 기본적으로 항목들이 세로로 정렬된다. 이것은 grid-auto-flow의 기본값이 row이기 때문이다. (나)에 justify-content와 align-items뿐인 것을 보았을 때 (ㄱ)는 inline이 될 수도 없다. 따라서 grid를 고른 ②번과 ③번, 그리고 flex/grid 컨테이너를 만들지 않는 ⑤번은 정답이 될 수 없다. 또한 아래의 시뮬레이션을 보면 grid와 inline 중 문제의 의도대로 정렬되는 것이 없다는 것을 알 수 있다.

남는 것은 ①번과 ④번인데, 정답은 ①번으로 되어 있다. 정렬이 어느 방향인지가 관건인데, 가로축 기준이라는 표현은 아무래도 모호하다. 1번 선지처럼 정렬할 수도 있고, 4번 선지처럼 정렬할 수도 있다. 아래의 시뮬레이션을 보면, 4번 선지는 세로가 아닌 가로축을 그었을 때 오히려 시각적으로 정렬이 된다는 것을 볼 수 있다.

1학기 총정리 프린트에서는 가로, 세로 표현을 flex-direction 속성에서만 사용하고, 대신 주축, 교차축이라는 표현을 사용하는 것을 볼 수 있다. 게다가 기준이라는 표현도 모호한데, 방향이라는 표현이 그나마 오해를 덜 수 있다고 생각한다. 따라서 명확하게 하기 위해서는 주축 방향이라는 표현을 사용하고, 다이어그램을 같이 추가해야 했다고 생각한다.

시뮬레이션

아래 박스들은 각 선지의 코드를 실제로 넣었을 때 항목들이 어떻게 놓이는지를 보여준다. 모든 예시는 같은 크기의 관찰 영역 안에 너비와 높이가 서로 다른 A, B, C 세 항목을 넣은 것이다.