Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12

[CSS3] 다단 기능 column-count : 현재 파폭,크롬,사파리 지원

어제 이야기를 나누다가 획기적인 발견(?)을 했다. 바로 다단 기능을 HTML에서 곧장 지원한다는 사실을 알게 된 것이다.

나는 얼마 전 알게 된, CSS3와 HTML5의 요소를 지원하는 최신 브라우저들이 은근 많으므로 지원을 시작하는 족족 활용할 수 있다는 것을 떠올렸다.

그리고 바로 검색에 들어갔다. 쉽게 찾을 수 있었다.

사용법은 간단했다.

.content {
    /* Column-count는 아직 구현되지 않았다. */
    -moz-column-count: 2;
    -webkit-column-count: 2;  

    /* Column-gap은 아직 구현되지 않았다. */
    -moz-column-gap: 22px;
    -webkit-column-gap: 22px;
}

이렇게 간단할 수가.

활용도

사실, 다단은 화면에서 보는 용도로는 많이 사용하지 않을 수도 있다.

하지만 인쇄할 때는 얘기가 다르다.

공간을 효율적으로 사용할 수 있는 대표적인 방법이 다단이고, 나는 긴 글을 인쇄할 때 항상 다단을 이용했다.

그래서 내가 개인적으로 구축해 두고 사용하는, ckeditor를 이용한 word 시스템에 이 다단 기능을 당장 도입하기로 결심했다.

나는 인쇄할 때 보통 파폭을 사용하기 때문에 다단 기능을 충분히 활용할 수 있다.(현재 오페라는 지원하지 않고 있으며, 파폭과 크롬, 사파리가 지원한다.)

땡큐 CSS3.

참고

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다