티스토리 형광펜 밑줄 추가하기 (feat. HTML CSS U태그 활용)

 

티스토리 형광펜 밑줄 효과 

티스토리 형광펜 효과

티스토리 글 작성 중 문장을 강조하고 싶을 때, 위의 예시와 같이 기본제공 밑줄 외에 형광펜 밑줄 효과를 추가해 볼 수 있습니다. 형광펜 밑줄 효과를 추가하는 CSS 태그에 대해 소개해드리겠습니다.

 

 

형광펜 밑줄효과 CSS 태그 추가 

티스토리 형광펜 밑줄 코드

Book Club 스킨 기준으로 설명을 드리지만, 이 효과는 스킨 타입과 무관하게 적용이 가능합니다.

스킨 편집 > html 편집 > CSS 편집 화면으로 이동을 해주세요. 

CSS 스크립트 맨 아래로 내려가서 다음 코드를 복사 붙여 넣기 후 "적용" 해주시면 즉시 적용됩니다. 

/* 형광펜 밑줄 */
u {
text-decoration:none;
display:inline;
box-shadow:inset 0-9px #fde937d0;
color: #000000;
}

 

u 태그는 underline 밑줄 태그에 대한 효과를 적용하는 것으로,  스킨편집을 통해  u태그 적용 시 기존에 작성했던 글에도 일괄 적용됩니다.

 

위 태그에서 형광펜 밑줄 효과의 선 굵기, 형광펜 색상, 글씨 색상 등을 변경하고 싶은 경우, box-shadow  조건의 px 값 색상값, color 조건의 색상 값을 조정하여 적용이 가능합니다.

 

티스토리 형광펜효과 검증

글 작성 시 티스토리 기본제공되는 밑줄 긋기를 선택하여 작성한 글에 대해 형광펜 밑줄 효과가 적용되게 됩니다.  u태그 적용 시 기본제공되던 검은색 밑줄은 더 이상 사용할 수 없으며, 형광펜 밑줄만 사용이 가능하게 됩니다.

 

형광펜 효과 적용된 화면을 볼까요? 

티스토리 형광펜

티스토리 형광펜 효과가 적용된 이미지를 보겠습니다.

저는 우선 box-shadow : inset 0-10px  조건으로 적용 후 확인을 해보았는데요. 10px 은 살짝 두꺼운 감이 있고, 색상도 변경하고 싶어서 조정을 해보겠습니다. 

 

티스토리 형광펜 굵기 조정하기 

본문조회 > F12 개발자도구 > Ctrl + Shift +C 본문영역선택 > 우측 Styles 영역 "u" style 태그 확인 

개발자 도구를 열어 작성한 글의 우측 Style 영역에 작성된 u style css 조건부에서 픽셀과 색상 등 css 조건을 직접 수정해 볼 수 있습니다. 

티스토리 형광펜 효과

. 변경전

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

. 변경 후

 box-shadow: inset 0-7px #FFEB3B;

 

폰트를 7로 조정하고 표시 색상도 더 진한 노란색으로 변경해 보았더니 가독성이 좋아지는 것을 볼 수 있습니다. 

 

개발자 도구에서 직접 수정하는 경우 일시적으로 적용되는 1회성 CSS이기 때문에, 개발자도구에서 CSS를 직접 편집하여 내가 원하는 형광펜 밑줄 굵기와 색상을 정한 뒤, 해당 코드를 복사하여 "스킨편집 > html편집> CSS" 영역에 다시 반영하여 영구적으로 적용될 수 있도록 하였습니다.