티스토리 본문글 밑줄에 두꺼운 형광펜 효과 주기

 

다른 분들의 티스토리 블로그를 살펴보다 보면 재밌는 효과를 적용해놓은 경우를 많이 보았습니다. 알찬 콘텐츠로 가득찬 블로그에 멋진 효과까지 더해져 있는 블로그를 보면 저런 멋진 블로그로 키워보고 싶다는 생각이 많이 듭니다.

 

저는 티스토리 블로그를 2019년 7월 정도부터 운영하기 시작했는데요. 약 2년이 조금 안된 현재까지 HTML과 CSS를 요리조리 인터넷과 유튜브 등으로 배우면서 스킨을 만지작 거리고 있습니다. 순정스킨부터 시작해서 무료스킨, 유료스킨, 그리고 2021년 5월 현재 다시 돌아온 순정스킨까지 4번 정도 스킨을 바꾸고 수정하면서 조금씩 스킨 수정에 자신감이 붙기 시작했습니다. 2년전 티스토리 블로그에 대해 아무것도 몰랐던 시절에 비하면 2년이라는 시간이 꽤 길긴 한가 봅니다.

 

이번에 새로 적용한 스킨에는 여러가지 효과를 넣어보기로 했습니다. 대표적인 효과들은 공유되고 있는 소스가 많기 때문에 단순히 블로그에 적용하는 것은 그리 어렵지 않습니다. 티스토리 메인화면에서 보았던 인상깊은 말이 떠오릅니다.

 

티스토리는 그저 공간일 뿐이에요. 그 공간에 무슨 일이 일어나는지 아무도 상상할 수 없죠.

 

이번에 알아볼 효과는 바로 위에 노란색으로 표시된 두꺼운 형광펜 밑줄 효과입니다. 제가 '티스토리는 그저 공간일~~' 부분에 아래 아이콘으로 단지 밑줄(underline)만 쳤을 뿐인데, 실제 표시는 단순 밑줄이 아닌 두꺼운 형광색 효과가 적용되게 한 것입니다.

 

이런 효과는 CSS에서 미리 간단한 설정을 해주었기 때문입니다. 복잡하지 않으니 하나씩 따라와 주세요!

 

1. 티스토리 스킨편집 화면에 들어가 아래와 같이 '홈 부분을 '글' 부분으로 바꾸고, CSS편집기로 들어갑니다.

2. 크롬브라우저에서 F12버튼을 눌러 개발자도구를 켜고, 개발자도구의 왼쪽상단(아래 그림 참고)에 화살표를 클릭 후 "티스토리는 그저 공간일~~" 부분에 마우스를 놓고 클릭합니다. 그러면 개발자도구에 해당 위치의 HTML 코드가 나옵니다. 자세히 보면 <div>태그 안에 <p>태그가 있고, <p>태그 안에 <u>태그가 있습니다.

<div>태그의 class명은 tt_article_useless_p_margin입니다. <p>태그와 <u>태그는 class명이 따로 없습니다. 이 정보를 바탕으로 CSS에서 다음과 같이 코드를 작성하시면 됩니다. 결론만 말씀드리면 아래의 코드를 CSS의 맨 하단에 붙여넣으시면 됩니다. HTML은 따로 건드릴게 없습니다.

.tt_article_useless_p_margin > p > u {
    text-decoration:none;
    border-radius: 30px; 
    font-weight: normal;
    color: #000;
    background: linear-gradient(to top, #FFE400 60%, transparent 50%);
}

.tt_article_useless_p_margin > p > span > u {
    text-decoration:none;
    border-radius: 30px; 
    font-weight: normal;
    color: #000;
    background: linear-gradient(to top, #FFE400 60%, transparent 50%);
}

다만 혹시 스킨마다 tt_article_useless_p_margin > p > u 부분이 class명이나 모자관계가 다를 수 있으니, 혹시 적용이 안된다면 위에서 설명드린 것처럼 크롬에서 F12키를 눌러 개발자도구로 계층구조를 확인 후 적용해주시면 됩니다.

 

border-radius는 형광펜의 네 모서리 부분의 둥글기 정도입니다. 0px이면 완전 직사각형이고 픽셀값을 줄 수록 더 둥글둥글해집니다.

 

background에서 #FFE400부분은 형광펜의 색상입니다. 이 부분을 바꾸면 원하는 색상으로 밑줄 효과를 낼 수 있습니다. 그 옆의 60%와 50%는 투명도로 입맛에 맞게 적절히 조정하시면 됩니다.