HTML의 <multicol> 태그는 텍스트를 여러 열로 나누어 배치할 수 있게 해주는 태그로, 열의 개수와 크기를 직접 지정할 수 있습니다. 이 태그는 <div> 태그와 마찬가지로 그 안에 어떤 HTML 콘텐츠든 포함할 수 있으며, <multicol> 태그 내부의 모든 내용은 일반적인 방식으로 표시됩니다. 다만 Netscape 4에서는 내용을 하나의 열이 아닌 여러 열에 걸쳐 배치한다는 점이 특징입니다.
참고: 이 태그는 Netscape 3 이상 버전에서만 지원되며, 현재는 폐기된(obsolete) 비표준 요소입니다. 최신 브라우저에서는 동작하지 않으므로, 다중 열 레이아웃이 필요하다면 CSS의 Multi-column Layout 모듈(column-count, column-gap 등)을 사용하는 것이 좋습니다.
multicol 태그의 주요 속성
<multicol> 태그에서 사용할 수 있는 주요 속성은 다음과 같습니다.
| 속성 | 값 | 설명 |
|---|---|---|
| cols | 숫자(number) | 텍스트를 표시할 열의 개수를 지정합니다. 브라우저는 각 열의 높이가 비슷해지도록 요소들을 고르게 분배하려고 시도합니다. WIDTH 속성이 없다면, 열의 너비는 사용 가능한 전체 너비를 채우도록 자동 조절됩니다. |
| gutter | 숫자(number) | 열과 열 사이의 간격을 픽셀 단위로 지정합니다. |
| width | 숫자(number) | 각 열의 너비를 픽셀 단위로 지정합니다. 모든 열은 동일한 너비를 가지며, 이 속성이 없으면 gutter 값과 열 개수를 기준으로 너비가 계산됩니다. |
사용 예제
다음 코드를 실행하면 텍스트가 세 개의 열로 나뉘어 표시되는 것을 확인할 수 있습니다.
<h1>Breaking News</h1>
<multicol cols = 3>
<p>State media said more than 2,000 soldiers, police and miners
closed the breach in the dike in Shandong province early Sunday and
installed pipes and five high-speed pumps, but gave no indication if
there were any signs of life.</p>
<p>The Huayuan Mining Co. mine flooded on Friday afternoon when the
Wen river burst a dike, sending water pouring into a shaft and trapping
172 miners, Xinhua and state television said.</p>
</multicol>위 예제에서 cols = 3 속성은 본문을 세 개의 열로 나누도록 지정합니다. 실제 화면에서는 뉴스 기사처럼 긴 텍스트가 신문 지면과 유사한 형태로 좌우로 흐르며 배치됩니다.