[티스토리 꿀팁] 형광펜 밑줄 효과로 글의 가독성 높이기

---

티스토리 본문 형광펜 밑줄효과

형광펜 밑줄효과

글의 가독성을 높여보기

---

티스토리에서 글자 밑줄을 넣으면 아주 얇은 검정색 밑줄만 들어가게 기본설정이 들어가있어요.

이걸 형광펜 효과를 줘서 좀 더 가독성을 높여볼게요.

underline setting

 

CSS 아래 코드 적용

블로그관리의 스킨편집 > HTML 편집 > CSS 에 들어가주세요.

맨 아래로 가서 아래와 같은 코드를 입력해주세요. 

저는 코드만 입력하지는 않고, 어떤 효과인지 '무효화 태그'를 써서 알아보는 편이예요.

 

 

/* 형광펜 밑줄 효과 시작 */
u {
text-decoration: none;
display: inline;
box-shadow: inset 0 -7px 0 #F9F19D;
color: #000000;
}
/* 형광펜 밑줄 효과 끝 */

 

✅ 굵기, 색상 변경 방법

밑줄 효과의 굵기와 효과를 변경할 수 있어요. 

box-shawod 부분에서 수정하시면 됩니다. 

위 코드로 설명드리자면

-7 : 밑줄의 두께, 굵기. -1, -5, -10, -15 등 -숫자가 높아질수록 밑줄 굵기가 굵어져요.

underline bold

#F9F19D : 밑줄 색상. 원하는 색상은 저번에 알려드린 HTML컬러코드에서 확인해주시면 됩니다. 

underline color

 

글자 색상도 자동으로 수정하고 싶으시면 

맨 마지막 color #000000 부분을 컬러코드 변경해주시면 됩니다. 

 

도움이 되셨다면 아래 구독하기 버튼도 눌러주세요. 우리 소통해요 ♡