글자 아래 형광색 밑줄 긋는 방법 : 티스토리 꾸미기

티스토리 블로그에 글을 작성하다 보면 강조하고 싶은 대목에서 형광펜 밑줄 긋듯이 표시하는 방법을 몰라서 못하셨다면 이 글을 참고하시기 바랍니다.

 

 

 

 

티스토리 블로그를 시작한 지 정말 얼마 안 된 초보자가 아니라면 대부분 아실만한 코드 일거라고 생각은 되지만 그래도 초보자분들에게는 도움이 될 것 같아 포스팅해 보겠습니다.

 

 

 

 

 

글자 아래 형광색 밑줄 긋는 방법

 

글자 아래 밑줄을 형광펜 칠한 것처럼 표시하려면 CSS 코드를 따로 입력해줘야 하고 밑줄을 바꾸는 CSS 코드를 변경하게 되면 기본 밑줄은 사용할 수 없는 것은 당연한 것이겠지요.

 

 

 

1. CSS 코드 변경

---

티스토리 관리 > 스킨편집 > html 편집 > CSS로 변경

 

 

 

 

CSS 제일 아래로 내리면 빈 곳이 있습니다. 그곳에 아래의 코드를 복사한 뒤 붙여 넣으면 하면 됩니다.

 

[ 적용 코드 ]

u{

text-decoration:none;

display:inline;

box-shadow:inset 0 -10px #FFF242;

color: #000000;

}

 

 

 

[ CSS 적용 예시 ]

 

 

 

 

2. 형광색 밑줄 색상 변경

---

[ 적용 코드 ]  4번째 줄  box-shadow:inset 0 -10px #FFF242; 에서 #FFF242 이 부분은 밑줄 색상입니다.

원하는 색상으로 변경해서 적용하시면 됩니다.

 

 

[ HTML 색상 -10px 예시 ]

#80FF00

#00FF80

#2EFEF7

#F7FE2E

#D0A9F5

 

 

 

---

 

3. 형광색 밑줄 두께 변경

---

색상코드 앞에 있는 -10px는 밑줄의 두께입니다.

위 적용코드를 -20px으로 변경하면 글자 전체를 칠하게 되고 -10px 이면 글자 절반만 칠합니다.

 

 

[ HTML 색상 -20px 예시 ]

#80FF00

#00FF80

#2EFEF7

#F7FE2E

#D0A9F5

 

 

 

---

 

4. 형광색 밑줄 적용 방법

---

본문에 글을 작성 한 뒤 밑줄을 그을려는 곳을 드래그 한 뒤 상단 메뉴에서 밑줄을 클릭하면 적용됩니다.

 

 

 

 

 

 

 

 

함께 보면 좋은 글

티스토리 저품질 탈출방법 Daum 고객센터 문의방법

구글 애드센스 GDPR 메시지 만들기 설정하는 방법

ads.txt 파일 해결방법 이렇게 쉬운데?

구글 애널리틱스와 티스토리 블로그 연결방법

 

 

알고 나면 너무 쉬운 글자 아래 형광색으로 밑줄 긋는 방법에 대해 알아보았습니다. 여러 가지 다양한 색상으로 나만의 블로그를 꾸며 보시길 바랍니다. 그리고 중요한 한 가지 CSS 코드 변경 하실 때에는 혹시 모를 일에 대비해서 기존 코드는 복사해서 저장해 두시길 바랍니다. 혹시 모르잖아요 뭐가 잘못되면 원상 복구는 할 수 있도록 최소한의 조치는 해놓아야 하니깐요.