CSS 다단 — column-span:all 완전 정리

 

 

Web Development · CSS Multi-column

CSS 다단 — column-span:all로
특정 영역만 전체 폭으로

컬럼 안에서 일부 요소만 컬럼을 가로질러 한 줄 전체 차지하기

시작 오늘 분석할 코드

다단으로 글이 흐르다가 특정 박스만 모든 컬럼을 가로질러 가로 전체 폭을 차지하도록 만들 수 있다. 신문에서 광고나 박스 인용을 끼울 때 흔히 쓰는 패턴.

.multi { column-count: 3; column-rule: 2px dotted #000; } .no-col { /* 다단을 가로지를 박스 */ background: #f0f0f0; padding: 20px; border-radius: 5px; column-span: all; /* 모든 컬럼을 가로지름 */ }

실제 출력 미리보기 (마지막 박스만 전체 폭)

건강에 좋은 식품 - Super Food

코코넛 오일

중사슬 지방산이 콜레스테롤에 나쁜 영향을 주지 않는 건강한 지방. 라우르산이 풍부해 세균을 물리치고 염증을 가라앉히는 효과가 있다.

아보카도

오메가 3와 단백질, 비타민 E가 풍부. 콜라겐 합성을 도와 피부 탄력을 높인다.

케일

최고의 녹황색 채소. 베타카로틴과 엽록소가 풍부해 항암효과가 뛰어나다.

블루베리

안토시아닌이 시력 향상에 효과적. 폴리페놀이 지방세포를 녹여준다.

아몬드 — 강조 박스 (column-span: all)

혈관질환에 좋은 오메가3, 섬유소, 비타민 E가 풍부해 항산화 효과가 높으며 콜레스테롤 수치를 낮추는 L-아르기닌 등의 좋은 영양소도 들어 있다. 식욕 감소, 세로토닌 분비 증가에 도움.

용어 용어 정리

column-span이 요소가 차지할 컬럼 개수

column-span: all모든 컬럼을 가로질러 한 줄 차지

column-span: none기본값 — 일반 컬럼 흐름 따름

flow break컬럼 흐름이 끊기고 그 아래에서 다시 컬럼 시작

---

1 column-span: all의 작동 방식

column-span: all은 "이 요소부터 그 너비만큼은 컬럼을 한 번 끊고 가로 전체"로 만든다. 그 아래는 다시 컬럼 흐름이 시작된다.

column-span 없음 (기본): [코코넛] [아보카도] [케일] [블루베리] [아몬드] [...] column-span: all 적용 (아몬드 박스): [코코넛] [아보카도] [케일] [블루베리] [...] [...] [──────── 아몬드 박스 가로 전체 ────────] [그 아래 다시 컬럼 시작]

※ 값 종류

• none: 기본 — 컬럼 안에서 일반 흐름
• all: 모든 컬럼 가로지름
• 숫자(예: 2): 명세에는 있지만 브라우저 지원 미흡 — 실무에서는 안 씀

---

반응형

2 어떤 상황에 쓰나?

제목 강조

큰 섹션 제목을 컬럼 위에 가로로
h2 { column-span: all; }

중간 박스

광고·인용·이미지를 다단 흐름 가운데 끼움

---

3 자주 하는 실수

실수	증상	해결
너무 자주 column-span: all	다단 효과가 사라짐	강조 박스 1~2개만
컬럼 분배 어긋남	span 위 컬럼 높이 불균등	span 박스 위치를 적당한 길이 뒤로
span 박스 양쪽 여백 부족	본문이 빽빽해 보임	margin: 10px 0 추가

---

핵심 한 줄 요약

column-span요소가 차지할 컬럼 개수 지정

column-span: all모든 컬럼 가로질러 한 줄 전체

활용큰 제목·인용·강조 박스를 다단 가운데 끼움

기본값none — 일반 컬럼 흐름

Tags

#column-span #all #multi-column #CSS다단 #컬럼병합 #헤드라인 #매거진레이아웃 #columns #가로한줄 #column-count #인용박스 #CSS #HTML #박스모델 #웹개발 #티스토리

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

column-span, all, multi-column, CSS다단, 컬럼병합, 헤드라인, 매거진레이아웃, columns, 가로한줄, column-count, 인용박스, CSS, HTML, 박스모델, 웹개발, 티스토리