티스토리 북클럽 스킨 모바일 화면에서 제목 잘림 해결하기

티스토리 북클럽 스킨은 속도가 빠른 장점이 있고 간단하다는 장점이 있다. 하지만 조금 마음에 안 드는 것은 첫 번째 사진이 타이틀의 배경이미지가 되고 글자가 잘리는 현상이 있다는 것이다.

 

모바일 화면에서 H1태그로 설정된 제목이 잘리는 현상을 해결하는 방법을 알아보자.

 

 

 

 

 

북클럽 스킨 모바일 화면 제목 잘림 해결 방법

 

1. 티스토리 스킨편집 > HTML편집 > CSS편집으로 들어간다.

 

2. 그리고 아래의 항목을 찾는다. Ctrl+F를 누르고 " .post-cover .inner "를 검색한다.

 

3. 아래와 같이 webkit-line-clamp 가 기본값으로는 2로 되어있다. 이것은 제목의 줄 수를 말하는 것으로 2줄이 되어있으니 제목이 잘린 것이다. 따라서 이것을 3줄로 변경해 주겠다.

 

4. 혹시 CSS를 편집할 때 나중에 다시 원상복구를 하려면 수정한 내용을 옆에 적어두는 것이 좋다.

따라서 아래 예시와 같이 적어두었다.

 

/* 주석 - 메모남길말 */

 

5. 여기서 주석은 나중에 Ctrl+F를 누르고 "주석"만 검색해서 나중에 쉽게 찾기 위해서 남겨놓았다. 주석대신에 다른 단어를 사용해도 된다. 중요한 것은 /* 쓰고 싶은 말 */ 이렇게 하이픈과 별을 이용하는 것이다. 그럼 CSS에서는 이것을 명령어로 인식하지 않는다.

 

.post-cover .inner > h1 {
display: -webkit-box;
-webkit-line-clamp: 3; /* 주석 제목 줄 수 2줄에서 3줄로 */
-webkit-box-orient: vertical;
overflow: hidden;

 

 

 

수정된 제목 잘림 현상

아래 사진과 같이 제목 부분이 시원하게 3줄이 모두 나오게 설정하였다. 지금 다시 보니 제목 부분이 페이지의 상당한 부분을 차지하고 있기 때문에 제목의 폰트와 제목 부분의 검은색 부분을 좀 더 줄여서 본문이 바로 보이도록 설정을 해야겠다는 생각이 든다.

북클럽 스킨 제목 잘림 현상