웹 페이지 상에서 다단을 나누는 경우는 큰 포탈 정도인 것 같다. 한 페이지에 많은 섬네일을 보여주기 위해서 다단을 나누거나 한다. 생각보다 많이 쓰이지는 않는 것 같은데 이건 나의 웹관련 실무적인 경험이 부족한 탓이라 생각든다.
다단을 나누기 위해서는 CSS를 사용해야 한다. 다단을 만드는 방법과 css 속성 중에 break-after, break-before 등이 어떻게 동작하는지도 살펴볼 생각이다. 내가 인터넷을 뒤져본 결과 이 속성(break-*)을 명확하게 정리해 놓은 곳은 못찾았다. 그래서 자세히 정리해 보려 한다.
예전에 flex 레이아웃을 공부한 적이 있었는데 다단과 약간 비슷하다고 생각할 수 있겠다. 따라서 반응형 웹에서 레이아웃을 잡는 용도로 다단을 사용할 수 있을까? 하는 쓸데없는 생각도 들었지만 역시 아닌 길로 가는 건 아닌 것 같다. 반응형 웹을 만들 때는 다단 말고 flexbox를 이용하는 것이 맞다고 본다. 물론 미디어쿼리를 사용할 수도 있겠다.
다단 나누기
2개의 다단을 만든다. 너무 간단해서 더이상 설명이 필요없고 다음 결과를 보도록 하자.
이렇게 다단의 개수를 지정했을 때는 현재 브라우저 창의 가로 사이즈를 기준으로 다단이 2개가 생기게 된다. 따라서 위와 같이 브라우저의 가로 사이즈를 반으로 나뉘어 다단이 정해진다. 만약 브라우저를 늘리면 다단의 열의 너비도 증가하게 될 것이다.
column-gap 속성
다단으로 나뉘어진 열과 열 사이에는 보이지 않는 구분선이 있다. 이 때 이 구분선과 열의 내용간의 간격을 조정해주는 속성이다. 기본값은 16px이다.
column-rule-style, column-rule-color, column-rule-width 속성
이 속성들은 다단을 나누는 경계선에 대한 속성인데 순서대로 경계선의 색, 모양, 너비를 지정해 준다. 우리가 박스모델을 배울 때 태그 요소의 테두리(border) 속성에 지정하는 값들과 동일하다. 단지 속성 이름 앞에 column-rule이 붙은 것 뿐이다.
이 세가지 요소를 축약해서 한번에 지정하는 방법은 다음과 같다.(이미 앞서 배운 margin, padding 등도 축약법이다.)
column-width
column-width 속성에 250px을 주는 것은 엄밀히 말하면 다단으로 나뉜 열의 너비를 250px 이상으로 한다는 뜻이다. 아래 그림은 브라우저 가로 너비의 세가지 시나리오다.
첫 번째는 브라우저의 가로 너비가 colum-gap + column-rule + column-width + column-width 보다 약간 큰 경우다. 따라서 다단으로 나뉜 열의 너비는 250px보다 약간 크다.
두 번째 시나리오는 브라우저를 좀 더 줄였다. colum-gap + column-rule + 250px + 250px 보다 브라우저의 너비가 더 적으므로 2개의 다단으로 나눈다면 어쩔 수 없이 각 열의 너비가 250px보다 작아져야 한다. column-width를 250px로 했으므로 다단이 2개가 아닌 한개로 줄어든다.
세 번째 시나리오는 브라우저의 너비를 colum-gap + column-rule + 250px + 250px + 250px 보다 큰 경우다. column-count 속성으로 다단의 개수를 지정하지 않았으므로 최대한으로 다단을 만들게 되어 3개가 된다. 만약 브라우저 창을 옆으로 더 늘리면 다단은 더 많이 생길 수 있다.
따라서 2개 이상의 다단이 생기지 않도록 하게 하려면 column-count:2;를 추가해 주면 된다.
하지만 이렇게 다단을 만들면 다단의 너비가 고정되지 않고 브라우저의 크기에 따라 유동적으로 바뀌므로 보기 좋지 않을 수 있다. 따라서 div 요소의 박스크기를 지정하여 고정한 후 그 안에서 다단을 나눈다면 일정한 크기의 다단을 만들 수 있을 것이다.
column-span
우선 다음 코드를 보도록 하자.
결과는 다음과 같다.
이런 결과가 원하는 그림일 수도 있겠지만 지금 우리가 원하는 시나리오가 굵은 글씨의 제목은 다단에 포함시키지 않도록 하는 것이라고 하자. 이제 다음 코드를 보자.
추가된 줄은 9~11과 수정된 줄은 17번째 줄이다. 17번째 줄에서 h2 태그에 id값 "title"을 추가한 후 css에 column-span 속성을 주었다.
위 코드에서 h2태그 전체를 p태그들 중간으로 옮겨 보면 다음과 같은 결과를 볼 수 있다.
내용이 많이 길어져서 break-before, break-after 관련 속성은 다음 포스팅으로 미뤄야 겠다.