안녕하세요! 프론트엔드 개발 공부는 잘 진행되고 계신가요?
웹 페이지에서 마치 신문이나 잡지처럼 텍스트를 여러 단(column)으로 예쁘게 나누고 싶을 때 사용하는 것이 바로 CSS의 '다단 레이아웃(Multi-column layout)'입니다. 텍스트가 많아지는 책 리뷰 사이트 같은 포트폴리오를 구상하고 계시다면 아주 유용하게 쓰일 수 있죠.
이러한 다단 레이아웃 환경에서는 우리가 흔히 쓰는 정렬(Alignment) 속성들이 어떻게 동작할까요? 오늘 우리가 살펴볼 MDN 문서는 '다단 레이아웃에서의 박스 정렬(Box alignment in multi-column layout)'입니다.
이 문서는 아주 핵심적인 내용만 짧고 굵게 다루고 있습니다. 강사의 실무 팁과 함께 구어체로 쏙쏙 이해되도록 번역해 드릴게요!
다단 레이아웃에서의 박스 정렬 (Box alignment in multi-column layout)
CSS 박스 정렬(CSS box alignment) 모듈은 여러 레이아웃 방식(Flex, Grid 등)에서 '정렬'이 어떻게 작동하는지를 상세히 설명하고 있습니다. 이 가이드에서는 그중에서도 다단 레이아웃(multi-column layout)이라는 환경 안에서 박스 정렬이 어떻게 동작하는지 탐구해 볼 것입니다.
이 가이드는 다단 레이아웃 모듈과 박스 정렬 모듈, 두 가지 모두에 특화된 내용만을 설명하고 있습니다. 따라서 모든 레이아웃 방식에 걸쳐 공통적으로 적용되는 박스 정렬의 기본적인 특징들을 먼저 설명하고 있는 박스 정렬 개요(box alignment overview) 문서를 함께 읽어보시는 것을 권장합니다.
기본 개념(Basic concepts)에 따르면, 다단 레이아웃에서 정렬 컨테이너(alignment container)는 전체 다단 컨테이너(multicol container)의 콘텐츠 박스(content box)가 됩니다. 그리고 정렬의 대상이 되는 정렬 주체(alignment subject)는 각각의 단(column) 박스입니다. 다단 레이아웃에 적용되는 정렬 속성들에 대한 구체적인 내용은 아래와 같습니다.
💡 강사 팁:
즉, 다단 레이아웃에서는 컨테이너 안에 들어있는 텍스트 한 줄, 이미지 하나하나를 따로따로 정렬하는 것이 아니라, 나누어진 '단(column)' 그 자체 덩어리를 정렬한다고 생각하시면 이해하기 쉽습니다!
이 문서의 내용 (In this article)
align-content와justify-content(align-content and justify-content)column-gap(column-gap)- 참고 자료 (See also)
align-content와 justify-content (align-content and justify-content)
align-content속성은 블록 축(block axis, 세로 방향)을 따라 적용됩니다.justify-content속성은 인라인 축(inline axis, 가로 방향)을 따라 적용됩니다.
이때 justify-content를 사용해 공간 분배(space distribution, 예: space-between, space-around 등)를 요청하게 되면, 남는 공간들은 모두 단과 단 사이의 간격(gap)에 추가됩니다. 그 결과, 여러분이 애초에 column-gap (또는 단축 속성인 gap) 속성을 이용해 지정해두었던 간격보다 단 사이의 간격이 더 크게 벌어지게 됩니다.
만약 justify-content 속성값으로 기본값인 normal이나 꽉 채우는 stretch가 아닌 다른 값(예: space-between이나 center)을 사용한다면, 각 단(column box)들은 다단 컨테이너에 명시된 column-width 크기만큼만 정확히 차지해서 표시됩니다. 그리고 남는 나머지 빈 공간들은 여러분이 지정한 justify-content의 값 규칙에 따라 단 사이사이나 양끝에 분배됩니다.
💡 강사 팁:
평소 다단 레이아웃은 부모 너비에 맞춰서 단의 너비를 쫙쫙 늘려(stretch) 남는 공간 없이 알아서 꽉 채우는 게 기본입니다. 하지만 여러분이justify-content: center;를 주는 순간, "아, 너비를 꽉 채우지 말고 원래 지정된 너비(column-width)만 유지한 채 가운데로 모여야겠구나!"라고 판단해서 단들이 가운데로 모이고 양옆에 빈 공간이 생기게 된답니다.
column-gap (column-gap)
column-gap 속성은 원래 '다단 레이아웃 명세(multiple-column layout specification)'에서 가장 처음 만들어졌던 속성입니다. 그러다 나중에 박스 정렬 모듈이 등장하면서 Flex나 Grid 같은 다른 레이아웃 방식에서도 함께 사용할 수 있도록 하나로 통합(unified)되었죠.
재미있는 점은, 다른 레이아웃 방식(Flex나 Grid)들은 column-gap의 초기 기본값(initial value)을 0으로 취급하지만, 다단 레이아웃만큼은 예외적으로 그 기본값을 1em으로 취급한다는 것입니다. 상식적으로 생각해 봐도, 글이 여러 단으로 나뉘어 있는데 단 사이에 간격이 0이라면 글씨가 다닥다닥 붙어서 읽을 수가 없겠죠? 다단 레이아웃에서는 일반적으로 단 사이에 어느 정도 간격이 필요하기 때문입니다.
참고 자료 (See also)
- CSS 박스 정렬 (CSS box alignment) 모듈
- 박스 정렬 개요 (Box alignment overview)
- Flexbox에서의 박스 정렬 (Box alignment in flexbox)
- CSS Grid 레이아웃에서의 박스 정렬 (Box alignment in grid layout)
- 블록, 절대 위치(absolute), 테이블 레이아웃에서의 박스 정렬 (Box alignment for block, absolutely positioned, and table layouts)
MDN 개선에 참여하기 (Help improve MDN)
이 페이지가 도움이 되셨나요?
[Yes][No]
기여하는 방법 알아보기(Learn how to contribute)
이 페이지의 마지막 수정일은 2025년 11월 20일이며, MDN 기여자들에 의해 수정되었습니다.
👨🏫 마무리 강사 코멘트:
다단 레이아웃(column-count,column-width)은 신문 기사나 책의 본문을 웹으로 옮겨올 때(예: 독후감 포트폴리오의 본문 영역 등) 아주 유용한 레이아웃입니다. 이때gap이나justify-content를 함께 활용하면 레이아웃을 훨씬 더 세련되고 읽기 좋게 구성하실 수 있을 거예요. 언제든 더 궁금한 점이 있으면 질문 남겨주세요!
