CSS 멀티 컬럼 + 테이블 정렬·테두리 완전 정리

 

 

Web Development · CSS Layout & Table

CSS 멀티 컬럼 + 테이블 정렬·테두리
완전 정리

신문처럼 컬럼 나누기 · 셀 안 정렬 · border 병합과 간격 조절

시작 이 글의 두 가지 주제

CSS의 두 가지 "정렬 도구"를 한번에 다룬다. (1) 멀티 컬럼 레이아웃 — 긴 텍스트를 신문처럼 여러 단으로 나누는 column-count 계열 속성. (2) 테이블 디자인 — 셀 안 텍스트의 수직 정렬, 셀 사이 간격, 테두리 병합/분리, 셀 너비 고정과 줄바꿈 처리. 두 영역은 서로 다른 문제처럼 보이지만 "콘텐츠를 격자 안에 깔끔하게 배치한다"는 같은 목표를 가진다.

용어 핵심 키워드

column-count컬럼 개수 지정 (3 → 3단)

column-width컬럼 최소 너비 (자동으로 개수 계산)

column-rule컬럼 사이 구분선 (border와 같은 문법)

column-gap컬럼 사이 간격

column-span: all특정 요소만 모든 컬럼을 가로지름

break-before해당 요소부터 새 컬럼에서 시작

vertical-align셀 내부 수직 정렬 (top/middle/bottom)

border-collapse테이블 테두리 병합/분리

border-spacing분리 모드일 때 셀 사이 간격

table-layout: fixed셀 너비 고정 (내용 무시)

word-break긴 단어 강제 줄바꿈

caption테이블 위 표제

---

1 column-count — 컬럼 개수 지정

가장 기본. 한 컨테이너의 텍스트를 N개의 단으로 나눈다.

.multi { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }

<div class="multi"> <p>코코넛 오일: ...</p> <p>블루베리: ...</p> <p>아몬드: ...</p> </div>

3단 컬럼 결과

코코넛 오일 — 중사슬 지방산은 콜레스테롤 수치에 나쁜 영향을 주지 않는 건강한 지방산이다. 라우르산이 풍부해 세균을 물리치는 효과.

블루베리 — 안토시아닌이 시력 향상에 뛰어난 효과. 폴리페놀 성분은 체내 지방세포를 녹여주는 역할.

아몬드 — 오메가3, 비타민 E가 풍부해 항산화 효과. L-아르기닌이 콜레스테롤을 낮춤.

⚠️ 브라우저 prefix(-webkit-, -moz-)는 구버전 호환용. 최신 브라우저는 column-count만 써도 충분하지만, 크로스브라우저 안전을 위해 같이 쓰는 코드가 많다.

---

2 column-width — 너비로 자동 분할

"몇 개로 나눠라"가 아니라 "한 단의 최소 너비는 N px이다"라고 지정하는 방식. 화면이 넓어지면 컬럼 개수가 자동으로 늘어나서 반응형에 유리하다.

.multi { column-width: 120px; /* 최소 120px씩, 화면 따라 개수 자동 */ }

120px 기준 자동 분할

코코넛 오일 — 중사슬 지방산. 라우르산. 하루 2~4스푼.

블루베리 — 안토시아닌, 폴리페놀. 시력 + 다이어트.

아몬드 — 오메가3, L-아르기닌. 30g 권장.

column-count

• "몇 단으로 나눌지" 지정
• 화면 너비와 무관하게 항상 N단
• 좁은 화면에서 단이 너무 좁아질 수 있음

column-width

• "한 단의 최소 너비"를 지정
• 화면 따라 개수 자동 조정
• 반응형에 유리

---

3 column-rule + column-gap — 단 사이 디자인

.multi { column-count: 3; column-gap: 20px; /* 단 사이 간격 */ column-rule: 2px dotted #000; /* 단 사이 구분선 */ text-align: justify; /* 양쪽 정렬 (신문 효과) */ }

💡 column-rule은 border와 똑같은 문법. 두께 스타일 색상 순서로 적는다.
예: 2px solid #333, 1px dashed gray

---

4 column-span: all — 한 줄로 가로지르기

여러 컬럼 안의 어떤 요소를 모든 단을 가로지르는 한 줄짜리 영역으로 만들 때 사용. 신문 헤드라인이나 강조 박스에 적합.

.no-col { background: #f0f0f0; padding: 20px; border-radius: 5px; column-span: all; /* 모든 컬럼 가로지름 */ }

<div class="multi"> <h3>코코넛</h3><p>...</p> <h3>블루베리</h3><p>...</p> <div class="no-col"> <!-- 이 영역만 단을 안 나누고 가로 한 줄 --> <h3>아몬드</h3><p>...</p> </div> </div>

---

5 break-before: column — 새 단에서 시작

특정 요소(보통 h3 같은 소제목)를 만나면 그 자리에서 강제로 새 컬럼을 시작하게 한다. 각 항목이 단의 맨 위에서 시작하도록 정렬할 때 유용.

.multi h3 { break-before: column; /* h3 만나면 새 단 시작 */ }

※ 멀티 컬럼 응용 팁

• column-count: 4 + break-before: column → 4개 항목이 깔끔히 4단으로 떨어짐
• 반응형 사이트라면 column-width 권장
• text-align: justify 함께 쓰면 신문 분위기 완성

---

6 셀 내부 수직 정렬 vertical-align

테이블 셀에 높이가 있을 때, 텍스트가 기본적으로 가운데(middle)로 위치한다. 이를 위(top)·아래(bottom)·가운데(middle)로 명시할 수 있다.

.va1 { vertical-align: top; } .va2 { vertical-align: bottom; } .va3 { vertical-align: middle; }

td height: 90px 일 때 비교

vertical-alignment

top

middle

bottom

---

7 border-collapse — 테두리 병합 vs 분리

표를 그리면 기본적으로 셀마다 테두리가 따로 그려져서 이중선처럼 보인다. 이를 한 줄로 만들려면 border-collapse: collapse를 쓴다.

collapse (병합)

• 인접한 셀의 테두리가 합쳐짐
• 한 줄짜리 깔끔한 표
• 대부분의 실무 표에 사용

separate (분리, 기본)

• 각 셀이 자기 테두리를 가짐
• border-spacing으로 셀 사이 간격 조절 가능
• 카드형 표 디자인에 적합

/* 병합 모드 */ .table1 { border: 1px solid black; border-collapse: collapse; } /* 분리 모드 + 셀 간격 (가로 20px, 세로 10px) */ .table2 { border-collapse: separate; border-spacing: 20px 10px; }

collapse 적용

울산	울산 vs 인천
부산	부산 vs 대전

separate + border-spacing: 16px 8px

울산	울산 vs 인천
부산	부산 vs 대전

⚠️ border-spacing은 반드시 border-collapse: separate(또는 기본값)일 때만 동작. collapse 상태면 무시된다.

---

8 table-layout: fixed + word-break

표의 셀 너비는 기본적으로 내용에 따라 자동 조정된다(auto). 그러나 한국어 띄어쓰기 없는 긴 단어나 영어 long_string은 셀을 강제로 늘려서 레이아웃이 깨진다.

fixed로 너비 고정

.table1 { width: 300px; table-layout: fixed; /* 셀 너비 = 지정한 값 그대로 */ word-break: break-all; /* 긴 단어 강제 줄바꿈 */ } .table1 td { width: 150px; }

fixed + word-break 적용

한글로띄어쓰기없기길게붙여쓰기

long_description_without_space

속성	의미
table-layout: auto	(기본) 내용에 맞춰 셀 너비 자동 조정
table-layout: fixed	지정한 width 그대로 고정 — 렌더링 빠름
word-break: normal	(기본) 단어 단위로만 줄바꿈
word-break: break-all	글자 단위로 강제 줄바꿈 (긴 영문 처리)
word-break: keep-all	한글 단어 중간 줄바꿈 방지

---

9 자주 하는 실수

실수	증상	해결
collapse + border-spacing 같이 사용	spacing이 동작 안 함	collapse 제거 또는 separate로 변경
td에 border:none 줬는데 두 줄 보임	인접 td의 테두리가 살아있음	전체 td에 일괄 적용
긴 영문에 셀이 이상하게 늘어짐	auto layout 특성	table-layout:fixed + word-break:break-all
column-count 적용했는데 단이 안 나뉨	안에 짧은 텍스트만 있음	충분한 텍스트 양 확보 또는 height 지정
vertical-align이 div에서 안 먹힘	div는 table 셀이 아님	flex(align-items) 또는 grid 사용

---

요약 핵심 한 줄 정리

Multi-Column · Table 핵심

column-count단 개수 지정 (정해진 N개)

column-width단 최소 너비 (개수는 자동 = 반응형)

column-rule단 사이 구분선 — border와 같은 문법

column-gap단 사이 간격

column-span: all특정 요소만 가로 한 줄로

break-before: col해당 요소부터 새 단 시작

vertical-align셀 안 수직 정렬 (top·middle·bottom)

border-collapsecollapse(한 줄) / separate(개별 + spacing)

border-spacing분리 모드에서 셀 간격

table-layout: fixed셀 너비 고정 + word-break로 줄바꿈

Tags

#column-count #column-width #column-rule #column-span #border-collapse #border-spacing #table-layout #vertical-align #word-break #CSS멀티컬럼 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

column-count, column-width, column-rule, column-span, border-collapse, border-spacing, table-layout, vertical-align, word-break, CSS멀티컬럼, 웹개발, 티스토리