티스토리 반응형 스킨 #2 텍스트에 밑줄 넣는 방법과 밑줄 간격 조정하기

티스토리에서의 밑줄은 뭐랄까, 참 깝깝하다.

강조를 위해서 밑줄 효과를 즐겨 쓰는 편인데 오히려 밑줄이 텍스트를 가려서 가독성을 방해할 정도다.

간격을 떼기 전, 일단 밑줄 부터 넣어보자.

나는 저 '팁글/팁스토리'에 밑줄을 넣고 싶다!

먼저 밑줄을 넣어야 밑줄의 간격을 뗄 수 있으니 저기 포스팅 제목 위 카테고리를 나타내는 텍스트 '팁글/티스토리'에 밑줄을 넣어보도록 하자.

여기서 필요한 코드는 text-decoration:underline 다.

스킨 편집 - html편집 - css탭에 들어가서 .area_title .tit_category a로 시작하는 코드를 찾자. 내 코드는 이미 이것저것 건들여놓았기 때문에 내 코드와 전체가 같은 것을 찾아선 안 된다.

/* 포스팅 제목 위 카테고리에 밑줄 넣기*/

.area_title .tit_category a {font-family:'MaruBuri-Regular';font-weight:normal;font-size:15px;text-decoration:underline}

기존의 코드에 넣을 곳에 세미콜론(;)을 잊지 말고 넣어주자. 세미콜론을 빼먹으면 text-decoration:underline을 넣어도 안 된다.

여하튼 이렇게 text-decoration:underline을 넣어주면 밑줄이 없던 텍스트에 밑줄이 생긴다.

밑줄 넣기는 완성됐다.

비단 이 위치 뿐만이 아니라 다른 곳 역시 text-decoration:underline을 넣어주면 쉽게 밑줄을 넣어줄 수 있다.

밑줄의 위치가 너무 갑갑하니 이제 텍스트와 밑줄을 좀 떼어보자.

이제 필요한 코드는 text-decoration:underline;text-underline-position:under

text-decoration:underline을 넣었던 자리에 저 코드를 넣어주면 끝난다.

/* 포스팅 제목 위 카테고리에 밑줄 간격과 함께 넣기*/

.area_title .tit_category a {font-family:'MaruBuri-Regular';font-weight:normal;font-size:15px;text-decoration:underline;text-underline-position:under}

그러면 이렇게 -

텍스트랑 밑줄이 떼짐!

텍스트와 밑줄 사이에 거리가 생기면서 한결 가독성이 좋아졌다.

하, 정말 텍스트랑 밑줄이랑 딱 붙어서 얼마나 갑갑했는지! 그래서 저번에 본문의 밑줄을 이렇게 바꿔버렸었잖은가!

참고로 저렇게 본문의 밑줄을 형광펜 느낌처럼 주는 방법은 아래의 포스팅을 참고하길.

티스토리 #2 스킨에 형광펜 효과 넣는 법 (인용문 포함)

여하튼.

코드를 좀 건들면 저 단순한 줄 밑줄의 색상이라던지 밑줄의 위치를 픽셀단위로 옮길 수 있을 것 같은데, 솔직히 그 것 보다는 저 형광펜 느낌이 훨씬 예쁘기 때문에 더 이상 건들지 않기로 하고.

저 형광펜 스타일 코드를 바로 때려박았음 ㅎㅎㅎㅎㅎㅎㅎ

좋아좋아. 예뻐예뻐.

/* 포스팅 제목 위 카테고리에 예쁜 밑줄 넣기*/

.area_title .tit_category a {font-family:'MaruBuri-Regular';font-weight:normal;font-size:15px;text-decoration:none; border-radius: 20px; font-weight: normal; color: #888; background: linear-gradient(to top, #F2F2F2 10%, transparent 50%);}

저 밑줄 친 코드를 때려넣으면 된다. 세미콜론 잊지말고.

컬러값(#888은 밑줄 칠 폰트 색상이고 #F2F2F2는 형광펜 색-회색-이다.)이라던지 투명도 값이라던지 이것저것 건들다보면 감이 올 것이다.

다들 예쁘게 밑줄 깔기를!



P.S. PC버전에서는 안 보이고 모바일에서만 보이는 걸 보니 PC 쪽에도 적용되게 수정을 해야 할 것 같은데 ... 그건 ... 나중에 ......... 어차피 나는 모바일에서 더 본다구!