티스토리 반응형 스킨 #2 글 리스트(글 목록) 본문 요약 줄 수 줄이기

본문 요약글이 너무 길다.

글이 모여있는 리스트에서 가장 중요한 건 글, 그러니까 포스팅의 제목이 아닐까? 제목 아래 길게 늘어진 본문의 요약글이 아니라.

그런데 대체 왜 티스토리의 글 목록은 그런걸까. 왜 본문의 요약글을 그렇게나 길게 보여주는 걸까.

반응형 스킨 #2 중간 사이즈 화면

반응형 스킨 #2 글 목록의 본문 요약 기본 줄 수가 ... 4줄이었나, 5줄이었나. 고치기 전에 몇 줄이었는지 기억이 흐릿하다. 하지만 4줄이든 5줄이든 긴 건 매한가지.

심지어 요약글은 핵심 요약도 아니다. 그냥 본문의 첫머리부터 주루룩 늘어지는 글이다. 아니, 본문은 포스팅에 들어가서 보면 되지 뭐 그렇게 길담.

가장 큰 문제는 예쁘지가 않잖아. 예쁘지가!

사람마다 취향이 갈리겠지만 일단 내 눈에는 너무 안 예쁘다!

그런데!
어쩌다가!
마침!

스킨 수정 개삽질 난리 블루스를 하다가 뭘 건들다 보니 요약 글 줄 수가 줄어드는 기적을 맛보았다. 개신남! 완전신남!

뭐, 구글링을 하다보니 포스팅 쓸 때 html모드에서 몇 가지를 조작하면 원하는 부분만 요약글로 나오게 할 수도 있더라. 하지만 난 굳이 그렇게까지 하고 싶진 않 ...

여하튼.

본문 요약글 줄 수를 줄이는 방법은 매우 쉬웠다.

스킨 편집 - html 편집 - css탭에서 리스트를 검색하자. 그러면 /* 리스트 */ 라고 주석처리가 된 부분이 나온다.

거기서 .list_content .txt_post로 시작하는 부분을 찾자. 애초에 검색을 이 친구로 해도 되고.

.list_content .txt_post로 검색하면 두 곳이 나오는데, 두 곳 중 처음 등장하는 .list_content .txt_post로 시작하는 코드를 보면 된다.

.list_content .txt_post{display:-webkit-box;display:-ms-flexbox;display:box;overflow:hidden;margin-top:5px;font-size:16px;line-height:25px;color:#7A7A7A;vertical-align:top;word-break:break-all;-webkit-box-orient:vertical;-webkit-line-clamp:5}  

나는 하도 이것저것 건들여놔서 다른 부분이 제법 있을 것이다. 그러니 .list_content .txt_post로 시작하는 부분을 찾는 것에 주력하길.

저 코드에서는 본문 제목과 본문 요약글 사이의 간격을 건들일 수도 있고(pc뿐만 아니라 모바일 환경에서 보이는 간격도 같이 영향을 준다) 요약글 폰트 사이즈도 줄일 수 있고 여하튼 뭔가 건들일 수 있는 게 참 많다.

그리고 우리는 거기서 제일 건들이기 뭐한 부분을 건들여야 한다.

저 빨간 부분 말이다.

line-clamp: 이 부분은 대체 왜 빨간색인걸까 ... 그래서 건들여보기가 매우 쫄렸지만 정말 많이 쫄렸지만 여기가 답이었다.

-webkit-line-clamp: 얘의 기본값이 원래 4였는지 5였는지는 모르겠지만 중요한 건 저기 붙는 숫자가 줄 수를 뜻 한다는 것!

-webkit-line-clamp:의 숫자를 3으로 줄이는 순간!

짠!

캬, 이거쥐.

완전 깔끔한 것 봐. 크으! 세상 깔끔!

요약글 줄 수는 개인 취향껏 마음대로 바꾸길.

다만.

반응형 스킨 #2 모바일 사이즈 화면

위의 코드 변경으로는 모바일 환경에서의 글 목록의 본문 요약글 줄 수까지 바뀌진 않는다.

모바일 환경은 따로 수정해 줘야 한다.

.list_content .txt_post를 또 검색하자.

위에서 .list_content .txt_post를 검색하면 두 곳이 나온다고 했을 것이다. 두 곳 중 처음 등장하는 곳이 아닌, 두번째로 등장하는 .list_content .txt_post로 시작하는 코드를 보면 된다.

.list_content .txt_post {font-size:13px;line-height:18px;color:#A6A6A6;font-family:'NEXON Lv2 Gothic';-webkit-line-clamp:4;margin-bottom:5px}

저 밑줄 친 부분의 숫자를 2로 바꾸는 순간!

깔끔!

역시나 위의 코드도 요약글 줄 수 외에 많은 부분이 수정 가능하다. 모바일 환경 한정으로 요약글의 폰트 사이즈라던지 컬러, 폰트, 간격 등. 이것저것 건들여보길.

그나저나.

티스토리 반응형 스킨 #2 수정 삽질 기록 포스팅을 개인 기록 겸, 누군가에게도 도움이 되라고 차근차근 쌓아가고 있긴 한데 ... 누가 보고 있긴 한걸까?

이 스킨 ... 사람들 진짜 안 쓰는 것 같아 ..... 반응형 스킨 #2 예쁜데 .....