티스토리 블로그 설명은 왜 줄바꿈이 안되나?
티스토리 블로그는 처음 써봅니다.
업무가 아니라 개인적인 사이드 프로젝트이니 제 입맛에 맞게 사용해보고 싶었습니다.
그래서 바로 스킨 제작에 도전합니다.
프론트엔드 개발은 조금이나마 할 줄 압니다.
이미 구조가 있어서 쉽게 정리를 해나갔는데 마지막으로 QA하는 과정에서 글 하단에 붙는 블로그 설명 박스가 마음에 걸립니다.
이렇게 입력했는데 결과물은 아래와 같이 나옵니다.
입력값
20+n년차 브랜드 커뮤니케이터.
작은 에이전시에서 플랫폼 운영 부문을 담당하고 있습니다.
결과물
20+n년차 브랜드 커뮤니케이터.작은 에이전시에서 플랫폼 운영 부문을 담당하고 있습니다.
의도대로 줄바꿈이 안되는 겁니다.
블로그 설명 영역은 일반 본문처럼 HTML을 그대로 해석하지 않는 구조로 보입니다.
되는 스킨도 있겠지만, 다른 분들 티스토리 블로그에 들어가봤더니 블로그 소개 박스에 줄바꿈이 적용된 경우가 없더군요.
줄바꿈 할 곳에 <br> 을 넣어보지만 안됩니다.
개발자 도구로 확인해보니, 블로그 설명 값에 입력한 <br> 은 HTML 태그로 해석되지 않고 문자 그대로 출력되고 있었습니다.
즉 이 영역에서는 <br>을 넣는 방식으로 줄바꿈을 처리하기 어렵습니다.
되게 하자
티스토리 스킨은 CSS를 직접 수정할 수 있으니, 출력 영역의 스타일을 조정하는 방식으로 접근해볼 수 있습니다.
크롬 개발자 도구로 해당 영역을 확인해보니 소개글 영역에 .tt_desc 클래스가 적용되어 있었습니다.
<div class="tt_box_namecard">
<div class="tt_cont">
<a class="tt_tit_cont" href="https://frme.tistory.com">FRME</a>
<a class="tt_desc" href="https://frme.tistory.com">20+n년차 브랜드 커뮤니케이터.
작은 에이전시에서 플랫폼 운영 부문을 담당하고 있습니다.
</a>
</div>
이 문제는 CSS의 white-space 속성으로 해결할 수 있습니다.
white-space는 요소 안의 공백과 줄바꿈을 브라우저가 어떻게 처리할지 지정하는 CSS 속성입니다.
normal은 기본값이며, 줄바꿈을 일반 공백처럼 처리합니다.
pre는 엔터와 공백을 모두 그대로 유지하지만, 긴 문장이 자동 줄바꿈되지 않아 레이아웃이 깨질 수 있습니다.
pre-wrap은 엔터와 공백을 유지하면서 긴 문장은 영역 폭에 맞춰 자동 줄바꿈합니다.
pre-line은 엔터로 입력한 줄바꿈은 유지하되, 여러 칸의 공백은 일반 문장처럼 정리합니다. 블로그 소개글처럼 짧은 문장을 줄 단위로 보여줘야 하는 영역에는 pre-line이 가장 적합합니다.
티스토리 스킨 관리 페이지에서 css에 아래 코드를 추가합니다.
.tt_box_namecard .tt_desc {
display: block;
white-space: pre-line !important;
line-height: 1.6;
}
.tt_desc만 지정해도 적용될 수 있지만, 스킨에 따라 다른 스타일 규칙에 밀릴 수 있어 상위 요소인 .tt_box_namecard를 함께 지정했습니다. 적용 범위를 블로그 설명 박스 안으로 한정하고 선택자 우선 순위도 조금 높이기 위한 방식입니다.
display: block;은 소개글 영역을 하나의 블록 요소처럼 처리하기 위한 설정입니다. 현재 소개글은 링크 태그인 a.tt_desc로 출력되고 있어 기본적으로 인라인 요소처럼 작동할 수 있습니다. 블록 요소로 바꿔주면 줄바꿈과 영역 폭 제어가 더 안정적으로 적용됩니다.
white-space: pre-line !important;는 입력된 텍스트의 줄바꿈을 화면에서도 유지하기 위한 핵심 코드입니다. 사용자가 소개글 입력란에서 엔터로 줄을 나누면, 그 줄바꿈이 실제 블로그 화면에도 반영됩니다. 여러 개의 공백은 일반 문장처럼 정리되고, 줄바꿈만 유지되기 때문에 소개글처럼 짧은 문장 단위로 보여줘야 하는 영역에 적합합니다. !important는 기존 스킨 CSS보다 이 설정이 우선 적용되도록 하기 위해 사용했습니다.
line-height: 1.6;은 줄 사이 간격을 조정하는 코드입니다. 줄바꿈이 적용되면 여러 줄로 보이기 때문에, 줄 간격이 너무 좁으면 읽기 불편해질 수 있습니다. 1.6 정도의 줄 간격을 주면 소개글이 답답하지 않고 자연스럽게 읽힙니다.
결과는 이 글의 블로그 설명에 보시는 바와 같습니다.
끝.