여러 단으로 본문 나누기

탕비수다 이마고 스킨에서 정식 지원하는 기능은 아니지만, 요청이 있어 ‘여러 단으로 나누기’ 형식을 소개합니다. 여러 단으로 나누기는 본문을 두 개 또는 설정한 값으로 여러 단으로 보여주는 기능입니다. 세로 스크롤에 익숙한 사용자에게는 낯설고 불편할 수 있는데요. 개인 블로그의 최대 장점은 타인을 신경 쓰지 않고 자신만의 스타일을 스킨에 적용해 사용할 수 있는 것이 아닐까 싶습니다.

여러 단으로 본문 나누기 적용은 의외로 간단합니다. 소개하기도 민망한데요. 아래 CSS를 적용하면 본문에 적용된 모습을 바로 볼 수 있습니다.

@media only screen and (min-width: 1025px) {
  .article-desc.effect { -webkit-column-count: 2; column-count: 2; -webkit-column-gap: 3em; column-gap: 3em; -webkit-column-rule: #c0c0c0 dashed 1px; column-rule: #c0c0c0 dashed 1px; }
  .article-desc.effect p { display: inline-block }
}

끝입니다. 음, 이렇게 소개를 끝내면 너무할까요? 민망하면 말수가 적어지기도 하지만 말이 많아지죠. 전 후자인가 봅니다. 세 줄 정도의 정의이지만 세부적으로 사용된 속성이 많으니 해당 속성을 상세히 설명해 민망함을 감추려합니다.

@media only screen and (min-width: 1025px) {}

미디어 쿼리 정의입니다. 미디어 쿼리는 브라우저의 폭에 따라 다른 CSS 정의를 할 수 있는 공간입니다. min-width: 1025px은 가로 폭이 1025px부터 이제부터 정의할 CSS를 적용하라는 의미입니다.

.article-desc.effect {}

-webkit-column-count: 2;
column-count: 2;

해당 정의는 단 나누기 수와 관련이 있습니다. 대부분 2 개로 설정하겠지만, 개인 취향에 따라 3 개 혹은 그 이상으로 설정할 수 있습니다. 다만, 단이 많아지면 가로 폭이 상대적으로 좁은 모니터에서는 너무 빽빽해 가독성이 더 떨어질 수 있습니다.


-webkit-column-gap: 3em;
column-gap: 3em;

단의 여백을 설정합니다. column-gap의 기본 값은 1em입니다. 적절한 값으로 변경해 사용하세요. 참고로 탕비수다 이마고 스킨은 1em을 px 단위로 환산하면 14입니다.


-webkit-column-rule: #c0c0c0 dashed 1px;
column-rule: #c0c0c0 dashed 1px;

단 사이에 나눔 줄을 형성합니다. 여기서는 dashed 형태를 사용했는데요. 다른 형태로 변경하려면 'css border style'로 검색하면 다양한 형태를 찾을 수 있습니다.

.article-desc.effect p{}

display: inline-block

해당 정의는 꽤 중요한 설정입니다. IE 경우 아래 설정이 없어도 두 번째 단이 시작하는 곳에 여백이 발생하지 않는데요. 크롬의 경우 첫 번째 단의 영향으로 두 번째 단에 여백이 발생하는 경우가 생깁니다. 아래 정의를 통해 이를 방지할 수 있습니다. 다만, 늘 그렇지만, P 태그에만 적용한 상태이기 때문에 첫 번째 단의 마지막 요소가 P 태그가 아니면 두 번째 단이 시작하는 곳에 여백이 발생할 수 있습니다.

문단 첫 글자 스타일

.article-desc.effect > p:nth-of-type(1):first-letter { display: block; float: left; font-size: 40px; line-height: 40px; color: #ef7583; margin-top: 4px; margin-right: 8px }

여러 단으로 본문 나누기와는 상관 없는 효과입니다. 본문 가장 첫 번째 문장 가운데 첫 글자에 특정 스타일을 지정할 수 있습니다. 다만, 눈으로 본문을 보는 것과 실제 본문 HTML 구성은 다를 수 있어서 일부 글에서는 스타일 적용이 안 될 수 있습니다. 첨부된 사진에서는 문단 첫 글자 스타일을 지정했지만 이런 이유로 적용이 안 된 상태입니다.

신고

롤랑존

이미지를 활용해 다양한 기능을 제공하는 티스토리 반응형 스킨

    이미지 맵

    지원 다른 글

    댓글 8

      • 최고네요! 실제 사용할 진 모르겠지만 오래전부터 여러 단으로 나뉜 페이지를 사용하고 싶었어요! ㅎㅎ

      • 아무래도 세로 스크롤에 익숙한 탓에 사용을 망설이기도 합니다. 그럼에도 매력적인 효과임에도 분명하죠. ^^

      • 비밀댓글입니다

      • 꽤 복잡한 정의나 선언을 해야 하는 경우도 있지만 이처럼 간단한 선언을 통해 활력있는 모습으로 탈바꿈할 수도 있습니다. ^^

        종종 유용하다고 생각되는 정보를 소개해보겠습니다.

      • 비밀댓글입니다

      • 정식 지원하는 기능이 아니라 뭐라 드릴 말씀은 없지만 스킨 가이드에 보면 본문 가로 폭과 관련된 본문 축소, 본문 어울림을 적절히 사용하면 좋을 것 같습니다. ^^

    *

    *

    이전 글

    다음 글

    티스토리 툴바