티스토리 형광펜 밑줄 효과

블로그의 가독성을 높이기 위해 밑줄이나 글자색 변경 등을 활용하는 경우가 많습니다. 그 중에서 오늘은 티스토리 형광펜 밑줄 효과를 이용해 보려고 합니다. html이나 css를 잘 알지 못해도 간단하게 원하는 색으로 변경이 가능하니 본 포스팅을 차례대로 따라해보시기 바랍니다.

티스토리 형광펜 밑줄 효과
       관리자 > 꾸미기 > 스킨 편집 > html 편집 > CSS
       굵기, 색상 변경방법
관련글 함께 읽기

 

∎  형광펜 밑줄효과

티스토리의 기본 밑줄 기능을 사용하면 검정색 얇은 줄로 나타납니다. 하지만 조금 더 예쁘게 티스토리를 꾸미기 위해 형광펜처럼 굵은 밑줄 효과로 변경해줄 수 있습니다.

 

형광펜밑줄 효과

위의 예시는 파란색 글자에 빨간색 형광팬으로 표시를 설정해본 모습입니다. 차이를 느낄 수 있도록 다른 색을 사용해 보았습니다. 

 

 

티스토리 형광펜 밑줄 효과는 CSS에 다음의 코드만 입력해주시면 됩니다.

경로는 관리자 > 꾸미기 > 스킨 편집 > html 편집 >CSS로 들어갑니다.

 

티스토리형광펜밑줄효과 코드

 

CSS의 가장 마지막으로 갑니다. 그리고 아래와 같이 입력을 합니다.

 

u {
text-decoration: none;
display: inline;
box-shadow: inset 0 -7px 0 #f3c000;
color: #000000;
}

 

 

∎  굵기, 색상 변경방법

티스토리 형광펜 밑줄 효과 편집 방법입니다. 본인의 티스토리 컨셉에 맞게 밑줄의 색상과 굵기를 조절할 수 있습니다.

 

u {
text-decoration: none;
display: inline;
box-shadow: inset 0 -7px 0 #f3c000;
color: #000000;
}

 

-7 : 밑줄의 두께, 굵기입니다. -1, -5, -10, -20일때 아래와 같이 굵기가 달라지니 원하는 숫자를 입력해주시기 바랍니다.

 

형광펜 밑줄 굵기

 

#f3c000 밑줄의 색상표입니다. 자신이 원하는 색을 입력하면 티스토리 밑줄 전체 색상이 변경됩니다. 기존에 설정해놓았던 밑줄도 한번에 변경이 됩니다. 색상표는 네이버 색상표를 참고해주시면 되겠습니다.

 

 

티스토리 형광펜 밑줄 효과

 

#000000는 글자의 색상입니다. 만약 글자 색상도 바꾸길 원한다면 이 부분의 색상코드도 변경해주시면 됩니다.

 

 

∎  관련글 함께 읽기

티스토리 폰트 변경 : 체류시간 높이는 법

티스토리 2차 도메인 활용법 : 하위도메인

구글 애드센스 무효 트래픽 IP 추적 : 구글 애널리틱스

 

이상으로 티스토리 형광펜 밑줄 효과 설정방법이었습니다.