티스토리 형광펜 효과 만드는 방법

티스토리에서 형광펜 효과를 만들어 보겠습니다. 그래디언트를 활용하여 시각적으로 형광펜과 같은 효과를 만들어 보는 것이지요. 여러분이 보고 있는 이 부분도 형광색 밑줄이 그어져 있을 것입니다.
블로그 꾸미기에 관심이 있다면 한 번 따라 해 보세요~😘

오늘의 주제는 폰트 꾸미기입니다! 위 사진과 같이 티스토리 에디터 영역에서 굵게(bold), 기울임꼴(italic), 밑줄(underscore), ~~취소선(strikethrough)~~을 추가했을 때, 아래 사진처럼 형광색 밑줄이 그이도록 해보겠습니다.😘

해당 효과를 추가하기 위해서는 HTML편집이 필요합니다. 티스토리 [블로그관리홈] => [꾸미기] => [스킨편집] => [HTML편집]으로 이동해 주세요.

[HTML] 옆에 있는 [CSS]를 선택합니다. 그리고 해당 태그에 백그라운드로 linear-gradient 효과를 주겠습니다.그래디언트는 색상에 점진적 전환 효과를 주는 함수입니다.

.article-view b {
    background: linear-gradient(to top, rgba(3, 174, 255, 0.3), transparent 40%);
}

.article-view i {
    background: linear-gradient(to top, rgba(255, 174, 3, 0.3), transparent 40%);
}

.article-view u {
    background: linear-gradient(to top, rgba(255, 3, 174, 0.3), transparent 40%);
}

.article-view s {
    background: linear-gradient(to top, rgba(3, 255, 174, 0.3), transparent 40%);
}

.article-view 는 티스토리 오디세이 스킨의 본문 태그의 클래스 이름입니다. 그리고 뒤에 따라오는 b, i, u, s는 각각 굵게(bold), 기울임꼴(italic), 밑줄(underscore), ~~취소선(strikethrough)~~을 의미합니다.

리니어 그래디언트에 사용한 인자는 다음과 같습니다.