티스토리 Letter 스킨 모바일 본문 요약 내용 편집

안녕하세요.

지난 포스팅에서는 Letter 스킨 블로그 메인화면의 포스팅 요약 내용 표시를 2줄에서 3줄로 늘렸습니다. PC 화면 기준으로 편집을 하였기 때문에 모바일 화면에서도 문제없이 표시되는지 확인이 필요합니다.

크롬 개발자 도구를 사용하여 블로그의 모바일 화면을 확인하면, 위의 그림과 같이 포스팅 요약 내용이 3줄로 표시됨을 확인할 수 있습니다. 하지만 작은 모바일 화면에서 요약 내용이 3줄로 표시되다 보니 레이아웃이 복잡해 보입니다. 이번 포스팅에서는 모바일 화면에서 포스팅 요약 내용을 2줄로 다시 바꾸는 방법을 알아보겠습니다. 즉, PC 화면은 3줄, 모바일 화면은 2줄로 표시되도록 편집해보겠습니다.

크롬 개발자 도구의 선택 도구를 사용하여 모바일 화면의 포스팅 요약 부분을 선택합니다. 선택 후 CSS창을 확인해보면 모바일 화면의 요약 내용에 대한 속성이 별도로 지정되어 있음을 알 수 있습니다.

@media screen and (max-width : 820px)의 의미는 가로 해상도 820px까지는 별도의 CSS 속성을 사용한다는 의미입니다. 즉, 820px 해상도까지는 .article_contente.txt_post로 묶인 속성 값을 적용한다는 의미이며, font-sizes는 16px, 아래쪽 마진은 0으로 설정되어 있습니다. 해당 영역을 편집하게 되면 모바일 화면에서 표시되는 포스팅 요약 내용을 2줄로 변경할 수 있습니다.

max-height: 55px;

-webkit-line-clamp: 2;

티스토리 HTML 편집기에서 CSS 속성 2283행을 찾습니다. 그리고 위의 속성 값들을 추가한 후 적용을 클릭합니다.

블로그 모바일 화면을 새로 고침 해보면 위와 같이 요약 내용이 2줄로 표시됨을 확인할 수 있습니다.

 

행복한 하루 보내세요.

감사합니다.