티스토리 형광펜 효과 주기 밑줄 대신

티스토리 형광펜 효과 주는 방법을 알아봅니다. 본문의 글의 가독성을 위해 종종 밑줄을 해두는 경우가 있는데 그럼에도 눈에는 잘 띄지 않아서 형광펜처럼 색이 칠해지면 좋겠다는 생각을 해보았습니다. 그래서 정리해 보았습니다. 생각보다 매우 간단하지만 효과는 매우 좋으니 꼭 따라 해 보시길 바랍니다.

 

티스토리 형광펜 효과

 

📝목차
✔ 티스토리 형광펜 효과
✔ 인용구 밑줄 형광펜 효과

 

 

티스토리 형광펜 효과

 

티스토리 형광펜 효과 스킨편집

▶ 티스토리 관리 < 스킨편집 < html 편집 < CSS < 아래 내용 입력 (입력이 번거로우신 분은 아래 파일첨부 클릭 후 내용 복사)

 

 

형광펜효과.txt

0.00MB

 

 

/* 형광펜 효과 */
.contents_style > p > u { text-decoration:none; border-radius: 30px; font-weight: normal; color: #000; background: linear-gradient(to top, #B9F3E4 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, #B9F3E4 60%, transparent 50%); }

 

✅ 형광펜 색깔 변경
▶ 위의 형광펜 효과 되어 있는 부분이 색깔입니다. 두 군데를 원하시는 색의 코드로 변경하시면 됩니다. 다른 색깔들은 아래 링크를 통하여 원하시는 색을 고르시거나 아니면 제가 예시로 색깔 코드 올려둔 것에서 사용하셔도 됩니다.

 

 

 

 

 

 

형광펜 색깔

 

 

✅ 그 밖의 효과

▶ transparent: 50% 는 투명도를 뜻하는 것으로 숫자를 높일수록 투명도가 높아집니다.
▶ border-radius: 30px 는 형광펜 효과의 모서리 부분의 둥글기를 조절하는 숫자로 0px 이면 완전한 직사각형이라고 생각하시고 숫자를 조절하시면 됩니다.

 

 

인용구 밑줄 형광펜 효과

▶ 글 작성 시 위의 메뉴 중에 따옴표 표시의 인용구 세 종류가 있는데 여기에서는 형광펜 효과가 나타나지 않기에 아래의 코드 아까 CSS에 붙여 넣었던 곳 아래에 추가로 입력하면 됩니다.

 

/* 인용구 형광펜 효과 */
.contents_style > blockquote > u { text-decoration:none; border-radius: 30px; font-weight: normal; color: #000; background: linear-gradient(to top, #B9F3E4 60%, transparent 50%); }

 

인용구 형광펜 효과.txt

0.00MB

 

 

---

다 적용을 하셨으면 글 작성 시에 밑줄 효과를 넣으시면 미리 보기나 글이 발행되면 형광펜 효과로 변경되어 있음을 확인하실 수 있습니다. 글을 작성하는 동안은 변화가 보이지 않으므로 왜 안되지라고 생각하지 마시고 미리 보기로 확인해 보시길 바라며, 미리보기로 했는데도 그대로 밑줄로 보인다면 CSS에 넣은 코드가 오타가 있거나 잘 못 입력되어 있을 수 있으니 꼼꼼히 확인해 보시면 되겠습니다.

 

 

👇아래의 글들을 참고하여 티스토리의 광고 수익을 늘려보세요👇

티스토리 링크버튼 1분만에 초간단 만드는 방법

 

티스토리 글씨체 변경하는 법

 

티스토리 사이드바 멀티플렉스 광고 설정하기