반응형 multi-column5 CSS 다단 — column-width 완전 정리 Web Development · CSS Multi-columnCSS 다단 — column-width로반응형 컬럼 만들기컬럼 개수가 아니라 "최소 너비"를 정해 화면 폭에 맞게 자동 적응시작 오늘 분석할 코드column-count가 "고정 N개"라면 column-width는 "한 컬럼 최소 폭은 보장"이다. 화면이 넓으면 자동으로 컬럼 수가 늘고, 좁으면 줄어든다 — 반응형 다단의 핵심.실제 출력 미리보기 (컬럼 너비 120px 기준)건강에 좋은 식품 - Super Food코코넛 오일: 코코넛 오일에 들어있는 중사슬 지방산은 콜레스테롤 수치에 나쁜 영향을 주지 않는 건강한 지방산이다.블루베리: '안토시아닌'이라는 물질은 시력 향상에 뛰어난 효과가 있다.아몬드: 혈관질환에 좋은 오메가3, 섬유소, 비타민 E.. 2026. 5. 5. CSS 다단 — column-span:all 완전 정리 Web Development · CSS Multi-columnCSS 다단 — column-span:all로특정 영역만 전체 폭으로컬럼 안에서 일부 요소만 컬럼을 가로질러 한 줄 전체 차지하기시작 오늘 분석할 코드다단으로 글이 흐르다가 특정 박스만 모든 컬럼을 가로질러 가로 전체 폭을 차지하도록 만들 수 있다. 신문에서 광고나 박스 인용을 끼울 때 흔히 쓰는 패턴..multi { column-count: 3; column-rule: 2px dotted #000; } .no-col { /* 다단을 가로지를 박스 */ background: #f0f0f0; padding: 20px; border-radius: 5px; column-span: all; /* 모든 컬럼을 가로지름 */ }실제 출력 미리보기 (마지막.. 2026. 5. 4. CSS 다단 — column-gap · column-rule 완전 정리 Web Development · CSS Multi-columnCSS 다단 꾸미기 —column-gap · column-rule컬럼 사이 간격과 구분선으로 신문 같은 가독성 만들기시작 오늘 분석할 코드컬럼 3개 + 컬럼 사이 간격(column-gap) 20px + 점선 구분선(column-rule)까지 적용한 다단 레이아웃이다. 신문이나 잡지에서 흔히 보이는 형태..multi { column-count: 3; column-gap: 20px; /* 컬럼 사이 간격 */ column-rule: 2px dotted #000; /* 사이 구분선 */ text-align: justify; /* 양쪽 정렬 */ }실제 출력 미리보기건강에 좋은 식품 - Super Food코코넛 오일파나마에서는 "한 컵이면 모든 병이 .. 2026. 5. 4. CSS 다단 — column-count 완전 정리 Web Development · CSS Multi-columnCSS 다단 레이아웃 —column-count로 신문처럼 나누기긴 글을 여러 컬럼으로 자동 분할 — 신문·잡지 같은 가독성 패턴시작 오늘 분석할 코드한 덩어리의 글을 3개의 컬럼으로 자동 분할해주는 가장 단순한 다단 레이아웃 코드다. 텍스트가 어느 컬럼이 어디서 끝나야 할지는 브라우저가 자동으로 균등 분배한다. class="multi"> 코코넛 오일… 블루베리… 아몬드… 실제 출력 미리보기건강에 좋은 식품 - Super Food코코넛 오일: 남미 파나마에서는 "코코넛오일 한 컵이면 모든 병이 낫는다"라고 이야기할 정도로 효능이 뛰어나다. 코코넛 오일에 들어있는 중사슬 지방산은 콜레스테롤 수치에 나쁜 영향을 주지 않는 건강한 지방산이다.블루베리.. 2026. 5. 4. 이전 1 2 다음 반응형