티스토리 글을 쓰다 보면 강조하고 싶은 문장이 생기는 대요. 밑줄 효과만으로는 아쉬워 형광펜 효과를 적용해 보았는데 생각보다 눈에 잘 띄고 가독성을 높여주는 것 같아 잘 사용하고 있습니다. 지금부터 티스토리 본문글 밑줄에 형광펜 효과 주는 방법에 대해 소개해드리겠습니다.
밑줄 글 형광펜 효과 적용 전
티스토리 글자 꾸미기 효과는 굵게, 기울임꼴, 밑줄, 취소선 외에 글자 색 변경하기가 있습니다. 타 블로그들에 비해 굉장히 단순하고 투박하며 이는 블로거들이 갖고 있는 불만 중 하나입니다. 위의 사진은 밑줄 아이콘을 클릭했을 때 나타나는 효과입니다. 흔히 볼 수 있는 밑줄 형태죠. 그래서 저는 이 밑줄 효과를 글자에 형광펜을 그은 것 같은 효과로 바꿔줘보려고 합니다.
밑줄 글 형광펜 효과 주는 방법
방법은 간단한 편입니다. 먼저 티스토리 꾸미기에서 스킨편집에 들어가 주세요. 그 후 CSS 탭으로 들어가 글 하단에 위의 양식을 붙여 넣어주면 됩니다. 정말 간단하죠? 이렇게만 해주면 티스토리 밑줄글에 형광펜 효과를 줄 수 있습니다.
}
.tt_article_useless_p_margin > p > u {
text-decoration:none;
border-radius: 20px;
font-weight: normal;
color: #000;
background: linear-gradient(to top, #ffffb3 60%, transparent 50%);
}
.tt_article_useless_p_margin > p > span > u {
text-decoration:none;
border-radius: 20px;
font-weight: normal;
color: #000;
background: linear-gradient(to top, #ffffb3 60%, transparent 50%);
}
이 코드에 대해 자세히 설명드리자면 >u가 밑줄 효과를 뜻합니다. 그래서 이 부분을 수정해 주는 것인대요. 여기서 border-radius 는 형광펜 효과의 네 모서리 부분의 둥글기 정도입니다. 0px는 흔히 아시는 직사각형이라고 생각하시면 되고 숫자를 높이면 글 모서리가 조금씩 동글해지는 것을 볼 수 있습니다. 이는 기호차이가 있으니 숫자를 높여가며 본인의 기호에 맞춰 적용하시기 바랍니다. 그리고 background에서 #ffffb3 은 형광펜의 색상입니다. 색상표 사이트에 접속하셔서 내가 원하는 색상의 컬러코드를 찾아와 입력하시면 형광펜 색상을 변경하실 수 있습니다. 그 옆의 %는 투명도이므로 이또한 조절하실 수 있습니다.
css에서 위의 코드를 입력하고 적용을 눌러준 후 새로고침을 하면 위의 사진처럼 밑줄글이 형광펜 효과로 바뀌어있는 것을 확인하실 수 있을겁니다.
티스토리 밑줄글 형광펜 효과 전/후
티스토리 밑줄글 형광펜 효과 전과 후의 비교 사진이에요. 밑줄글은 뭔가 좀 지저분해보이고 눈에 확 띄지 않았다면 형광펜 효과를 준 글은 조금 더 깔끔해 보이고 눈에 확 띄어 문장이 강조되어 보이고 가독성 또한 높여주는 것을 확인하실 수 있습니다.
이상으로 티스토리 본문 밑줄글 형광펜 효과 주는 방법에 대한 글을 마치도록 하겠습니다.
티스토리 리스트, 본문 글자 크기 변경 방법
티스토리에 글을 쓰다 보면 너무 작은 글씨에 글자 크기를 변경하는 방법은 없을까? 고민하게 되는대요. html-css를 이용하면 본문 글자와 리스트 글자 크기를 자유롭게 변경할 수 있답니다. 리스
ooisoireview.tistory.com
'티스토리에 관한 모든 것' 카테고리의 다른 글
| 티스토리 리스트, 본문 글자 크기 변경 방법 (0) | 2023.02.18 |
|---|---|
| 네이버 서치 어드바이저 - 소유 확인 만료 되었을 땐? (0) | 2023.01.14 |
댓글