본문 텍스트 밑줄에 Highlighter 효과 적용하기

안녕하세요! 토미타미입니다. 티스토리 블로그 꾸미기로 돌아왔습니다. 오늘은 텍스트 배경색이 아닌 밑줄로 하이라이터 효과를 주는 방법을 알려드리려고 합니다. 블로그를 작성하면 느낀 게 폰트 굵기, 밑줄과 색상 등 다양하게 활용하는 것도 가독성을 높여줘서 블로그 성장에 도움이 된다고 생각하는데요. 검색 유입으로 들어왔다고 해도 글만 주구장창 작성된 글은 아무리 정확성이 높은 글일지라도 원하는 내용을 찾기 어려우면 뒤로 가기를 누르게 되는 게 현실이라 블로그 이탈을 줄여주는 것이 텍스트 설정이라고 생각해요.

그래서 단순 밑줄이 아닌 공부할 때 중요한 부분을 하이라이트 펜으로 표시하는 것처럼 시각적인 효과를 주기 위해서 텍스트 하이라이터를 구현해봤습니다. 저도 나름 텍스트 배경색을 잘 활용한 편인데. 그것만으론 하이라이트 펜과 같은 느낌을 주기엔 부족하다고 느껴졌어요. 그래서 CSS 변경으로 밑줄 설정만 해도 텍스트 하이라이터 효과를 줄 수 있게 적용해봤습니다. 그럼, 하이라이터 적용방법 알아보려 가실까요?

 

함께 보면 좋은 포스팅:

[일상다반사/블로그] - [티스토리] 본문 소제목 꾸미기 : 쉽게 내용 구분하고 가독성도 높이자!

[일상다반사/블로그] - Whatever 스킨 오른쪽에 사이드바 만들기

[일상다반사/블로그] - 포스팅 URL 주소 통일해야하는 이유!

[일상다반사/블로그] - [티스토리 블로그] 본문 이미지 테두리 적용하기

 

 

 

CSS 적용 : Text Highlighter

 

오늘 2가지 버전의 텍스트 하이라이터를 준비해왔습니다. 보시고 마음에 드는 거 적용하셔서 쓰시면 될 것 같습니다. 개인적으로 하이라이터 하면 떠오르는 대표 색상이 노란색이라 노란색으로 설정해둔 상태입니다. 그리고 Whatever스킨 기준으로 설명드리는 거라 다른 스킨은 조금 다른 부분이 있을 수 있어요! 이 부분은 F12로 직접 확인하셔서 변경해주시거나 잘 모르시면 댓글로 남겨주세요.

 

■절반 높이 색상 연출

텍스트 하이라이터

첫 번째로 글 절반 높이까지만 색상을 주는 연출입니다. [관리자 - 스킨편집 - HTML - CSS] 순으로 들어가 주세요. 검색 기능으로 .entry-content를 검색해 이동해주시고 복사한 걸 붙여 넣어주시면 됩니다. 밑줄의 높이는 background-image 부분 #fffa96cc 옆에 있는 퍼센트로 높낮이를 조절하실 수 있어요. 원하시는 색상으로 변경을 하려면 text-decoration-color와 background-image에 색상을 동일하게 변경해주시면 됩니다. 

 

/*글 절반만 진하게 연출*/

.entry-content u{
text-decoration-color: #fffa96cc; /*색상 변경시 수정*/
text-decoration-style: solid;
text-decoration-thickness: 0.1em;
background-image: linear-gradient(to top, #fffa96cc 65%, transparent 0
); /*색상과 높이 변경시 수정*/
}

 

 

 

■뒤로 갈수록 연해지는 연출

 

텍스트 하이라이터

두 번째는 '색상이 뒤로 갈수록 연해지는 연출'의 밑줄입니다. 제가 생각했을 때 실제로 하이라이터 펜으로 밑줄을 그었을 때 볼 수 있는 자연스러운 연출이란 생각이 들어요! 사실 처음 구상했던 건 첫 번째로 알려드린 절반까지만 효과를 주는 거였는데. 막상 만들고 나니 이 버전이 더 마음에 들어서 적용해둔 상태네요. 그리고 색상 변경은 동일하게 text-decoration-color와 backgroubd-image를 수정하시면 되는데. Background-image에 3가지 색상으로 그라데이션 효과를 준거라 귀찮은 작업이 되실 수 있어서 색상 변경은 안 하시는 걸 추천드려요. 

 

/*뒤로 갈수록 자연스럽게 연해지는 연출*/

.entry-content u{
text-decoration-color: #fffa96cc; /*색상 변경시 수정*/
text-decoration-style: solid;
text-decoration-thickness: 0.1em;
background-image: linear-gradient(300deg, #fffa9626, #fffa9640 20%, #fffa96cc
); /*색상 변경시 수정*/
}

 

여기까지 티스토리 본문 텍스트 하이라이터 적용하는 법 알려드렸습니다. 알려드린 대로 따라 해 보시고 잘 안 되는 부분이나 추가적인 설명이 필요하시면 댓글로 알려주세요! 감사합니다.