별점의 span처리 등..

별점 정리

드디어 별점을 4.5 이렇게, span태그로 처리할 수 있게 됐다.! 😭
아무도 모르는 나만의 앓던 이였는데 이렇게 속이 시원할 수가 없다. 예전에도 시도했다가 실패하고 그냥 div로 block처리된 걸 고깝게 바라보기만 했었는데 이게 무슨 일이야. 모두 덕분입니다. 땡큐-땡큐-

u태그에 형광펜 효과

티스토리가 문제였는지 뭐가 문제였는지 형광펜 효과의 mark태그를 쓰고 글 수정만 하면 p태그 안에서 튀어나와 block처리가 자동으로 되는 게 아주 거슬리고 귀찮아서 쓰지 않았는데 이번에 u태그에 밑줄 대신 형광펜 효과를 추가하게 되면서 아예 mark도 같이 추가해 버렸다. 아예 mark 태그를 썼던 글들을 수정할까 했지만 다 뒤져보는 것도 만만찮고 대충 묻어가기로. 앞으로 u태그만 쓸 거다, 흥.

/* style.css */

u,mark {
text-decoration:none; border-radius: 30px; background: linear-gradient(to top, #a8ff57 60%, transparent 50%);
}

참고 :: 티스토리 반응형 스킨 #2 형광펜 효과 넣는 법 (인용문 포함)

+텍스트형 글목록 요약 글 수 줄이기

위의 블로그의 다른 글을 보고 프라치노 스킨의 텍스트형 글목록 요약 글 수도 3줄에서 2줄로 줄였다.

변경 전/후

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

위의 블로그처럼 -webkit-line-clamp는 없었지만 해당되는 요소 .text-type .index-item-summary의 높이를 줄이고 .text-type .index-item-summary:after의 위치를 올리면서 성공.

/* style_index.css */

.text-type .index-item-summary {
... max-height:60px} /* 82px에서 22px 줄임 */

.text-type .index-item-summary:after {
... top:32px} /* 54px에서 22px 줄임 */

각각의 미디어쿼리 @media (max-width:960px), @media (max-width:760px) 에서도 수정했다.

폰트 Gmarket Sans 적용

블로그에 toc를 적용하면서 소제목에만 적용했었던 '이사만루체'를 '지마켓산스체'로 바꾸었는데 바꾼 김에 (h4는 제외한) 글 제목 등에도 적용해봤다. 이쁜 거 같기도 하고 안 어울리는 거 같기도 하고-.-.-

/* skin.html */
<link rel="stylesheet" href="https://webfontworld.github.io/gmarket/GmarketSans.css" type="text/css" media="screen" />


/* style.css */
.cover-title,.slider-title>h2,.gh-text .gh-headline, /* 홈커버, 글제목 등 */
.card-type .index-item-text h2,.text-type .index-item-text h2,.gallery .index-item-text h2, /* 카드형 목록 등의 제목 */
#article h2,#article h3 /* 본문 소제목 */
{font-family:'GmarketSans';font-weight:normal;word-break:keep-all;}