티스토리 본문 밑줄 효과를 형광펜으로 변경하는 방법

티스토리 에디터에서 기본적으로 적용하는 효과를 보면 글자색을 굵게 하거나 기울이거나 밑줄을 사용하거나 하는 등의 기능이 있습니다.

하지만 이 중에서 밑줄 효과는 a 태그의 효과와도 중복되고 왠지 촌스러운 느낌이 들기 마련이기 때문에 가급적 사용하지 않게 되는데요~

이럴 때 글 본문에 있는 밑줄을 css 효과를 이용하여 형광펜을 색칠한 것처럼 보이게 할 수 있다면 좋겠다는 생각이 들어서 적용해 보았습니다.

아래 줄에 적용한 원래 밑줄 효과는 윗줄에 보시는 바와 같이 변경됩니다.

티스토리 본문 밑줄 효과를 형광펜으로 변경하는 방법

이렇게 적용하는 방법은 아래 코드를 CSS 코드 가장 하단에 넣어주시면 됩니다.

(단, 적용하고 계신 스킨에 따라서 class 선택자명이 달라질 수 있습니다.)

/* 포스팅 밑줄 효과 형광펜으로 변경 */
.post u {
    text-decoration:none;
    border-top-left-radius: 10px; 
    border-bottom-right-radius: 10px; 
    font-weight: normal;
    color: #000;
    background: linear-gradient(to top, pink 40%, transparent 40%);
}

너무 쉽죠?

앞으로 유용하게 사용해볼 생각입니다.

이렇게 사용하면 좋은 점은 티스토리에서 글자에 색상을 지정해 줄 필요가 있을 때 단축킥를 쓰기가 불편한데 밑줄사용은 컨트롤+u나 커멘트+u로 간단히 할 수 있기 때문입니다.