[초간단 CSS] 티스토리 형광펜 밑줄 효과 / 컬러펜 밑줄 효과
- 코딩 정보
- 2021. 5. 6.
티스토리 블로그 글쓸때 디폴트로 설정된 밑줄효과가 너무 투박하고 안예쁘죠. 티스토리 CSS에 간단한 코드 하나만 더해주면 아주 쉽게 예쁜 CSS 밑줄 효과를 줄 수 있습니다. 블로그에서 밑줄 효과를 준 모든 부분이 한꺼번에 바뀝니다.
기본으로 설정된 밑줄 디폴트효과를 디자인된 CSS값으로 변경해주는 방법인데요. CSS클래스를 붙여서 효과를 줄 필요없이 티스토리 에디터에서 밑줄 효과를 주고 발행을 누르는 순간 밑줄 부분에 바로 예쁜 형광펜 효과가 생깁니다.
CSS로 형광펜 밑줄 효과 간단히 넣기
See the Pen 형광펜 밑줄효과 by dahyun (@chocoleaf) on CodePen.
여기서 CSS탭에 해당하는 부분을 복사해서 티스토리 스킨편집에 들어가서 CSS창에서 아무데나 붙입니다.
* 주의사항
- 적용을 확인해보고 싶으면 밑줄 효과가 있는 포스팅을 확인하거나 글을 쓴 후 미리보기로 효과가 잘 적용됐는지 확인해보세요.
- 해당 효과를 적용하면 과거에 썼던 모든 글의 밑줄에도 같은 효과가 적용되니 자신의 글쓰는 스타일을 잘 생각해보고 적용하세요.
CSS로 컬러펜 밑줄 효과 간단히 넣기
See the Pen 컬러 밑줄 by dahyun (@chocoleaf) on CodePen.
컬러펜 밑줄효과를 넣고 싶을때도 마찬가지로 CSS부분을 복사해서 스킨편집창 CSS창 아무곳에 추가해주시면 됩니다. 색상은 #ffa530 부분을 본인 원하는 다른색으로 바꿀 수 있습니다.
초간단한 방법으로 블로그 포스트에 리프레쉬한 느낌을 주세요 :)
★티스토리 간단히 꾸미기 시리즈