티스토리 Letter 스킨 본문 요약 내용 늘리기

안녕하세요.

이번 포스팅에서는 Letter 스킨 메인 화면에서 포스팅 요약 내용을 더 많이 표시될 수 있도록 늘려보겠습니다.

티스토리 메인 페이지에서 본문 요약 내용은 위의 그림처럼 2줄로 표시되도록 기본값이 설정되어 있습니다. 개인 취향에 따라 요약 내용을 더 늘리고 싶은 경우에 CSS 속성을 어떻게 편집하는지 알아보겠습니다.

먼저 크롬 개발자 도구를 실행시킵니다. 선택 도구를 사용하여 내용 요약 부분을 선택합니다. 개발자 도구의 CSS 창을 보면 CSS 속성 1128행부터 해당 속성이 시작됨을 알 수 있습니다. 여기서 편집해야 할 부분은 max-height와 -webkit-line-clamp 속성 값입니다.

개발자 도구 CSS 창에서 -webkit-line-clamp 값을 3으로 바꿉니다. 즉 포스팅 요약 내용이 3줄로 표시되도록 변경하는 것입니다. 값을 3으로 바꾸고 나면 3번째 줄이 화면에 잘려서 보이는 것을 확인할 수 있습니다. 

그럼 이제 개발자 도구 CSS 창에서 max-height 값을 변경합니다. 65px로 값을 지정하면 3번째 줄이 잘리지 않고 올바르게 표시되는 것을 확인할 수 있습니다.

이제 개발자 도구에서 변경한 값을 티스토리 HTML 편집기의 CSS 속성에 적용해보겠습니다. CSS 속성의 1128행을 찾아서 해당 값들을 모두 변경하고 적용을 클릭합니다.

이제 블로그 메인 화면을 새로 고침 해보면 본문 요약 내용이 3줄로 늘어났음을 확인할 수 있습니다.

행복한 하루 보내세요.

감사합니다.