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

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

티스토리 글자 꾸미기

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

형광펜 효과 만들기

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

linear-gradient

[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)을 의미합니다.

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

  • 그래디언트 라인의 방향은 위쪽(to top)으로 합니다.
  • 시작 색상을 각각 RGBA(red, green, blue, alpha)으로 지정합니다.
  • 지정한 색상에서 시작하여 40% 지점부터 투명하게 배경을 칠하도록 추가합니다.

linear-gradient 함수에 대한 상세한 문법 및 사용 예시가 궁금하면 mdn web docs를 참고해 주세요.

형광펜 효과 적용 이후

티스토리 글자 꾸미기 효과를 주고 난 다음 게시물을 조회해 보았을 때의 화면은 위와 같습니다. linear-gradient 함수에 "to top"은 그대로 하고, 색상 및 배경색이 투명한 부분 비율만 조절해서 사용하면 될 것으로 보입니다.

댓글

댓글 쓰기