티스토리 본문 글씨 밑줄, '형광펜' 효과주는 방법

티스토리에서 글 작성 시, 강조하고 싶은 단어나 문장에 밑줄을 긋거나 배경색을 이용하는데, CSS 코드를 입력해서 밑줄에 형광펜 효과 주는 방법을 알아봅니다.

1. 티스토리 글씨 밑줄 형광펜 효과주기 (CSS에 u코드 삽입)
2. 전, 후 이미지 비교 예시

 

 

1. 밑줄 형광펜 효과 넣기

1) 티스토리 '관리' → 스킨 편집 → HTML 편집으로 이동.

2) CSS의 가장 하단에 아래의 코드를 입력합니다. ▼

u {
text-decoration: none;
display: inline;
box-shadow: inset 0-10px 0 hsla(53, 89%, 50%, 0.53);
}

(그림 1) 티스토리 CSS 코드 입력

 

3) hsla(53, 89%, 50%, 0.53)는 색상을 나타내는 부분으로, 원하는 색상으로 변경 가능합니다. ▼

※ 마우스를 움직여서 원하는 색상 선택.

(그림 2) 색상 변경

 

 

2. CSS 'u코드' 삽입으로 달라진 밑줄 비교

※ 예시) 적용 전·후 본문 글씨 밑줄 비교 이미지 ▼

(그림 3) u코드 적용 전,후 비교 사진

 

 

형광펜 사진