티스토리 글에 형광펜 밑줄 긋기

티스토리 글을 쓸 때 형광펜으로 밑줄을 그은 글을 종종 보셨을 것입니다. 제가 사용하고 있는 스킨에서는 볼드체(B)로만 표시해주어도 아래와 같이 형광펜 밑줄이 그어지지만, 다른 스킨에서는 형광펜으로 밑줄 긋는 기능이 따로 없더라고요. 형광펜 밑줄 기능을 첨가할 수 있을까 하여 찾아보니 간단히 CSS에 코드를 더해주어 밑줄 효과를 줄 수 있는 방법이 있어 소개해보려고 합니다. 

 

형광펜 밑줄의 예

 

CSS탭에 형광펜 밑줄 코드 추가하기

u {text-decoration: none; display: inline; box-shadow: inset 0 -11px 0 hsla(53, 90%, 83%, 0.93);}

위 코드를 복사하셔서 CSS탭 아무데나 추가해주시면 다음과 같은 형광펜 밑줄 기능이 추가됩니다. 빨간색으로 표시된 숫자 부분을 수정하시면 아래와 같이 형광펜의 두께가 달라집니다. 개인적으로는 글 전체 다 덮는 것보다는 반 정도 덮는 형광펜이 예쁜 것 같네요. 아래 파일 첨부해둘께요. 

 

형광펜줄긋기코드.docx

0.01MB

 

11px 적용

15px 적용

 

CSS 추가방법

• 관리 - 꾸미기 - 스킨 편집 - html 편집 - CSS
• CSS 아무 데나 붙여 넣어주시면 됩니다.

CSS에 붙여넣기

 

---

간단한 꾸미기 기능으로 블로그를 더 예쁘게 꾸미시면 좋겠네요 :D