CSS 코드 한 줄로 끝내는 블로그 형광펜 밑줄 효과 (Blogger/TISTORY 공통)

블로그스팟에도 간단한 CSS 코드를 추가해 밋밋한 밑줄에 형광펜 효과를 입혀보자. TISTORY, Blogger 모두 적용 가능하다. 코드 추가하는 방법과 형광펜 효과가 적용된 예시 화면 첨부.

CSS 코드 적용하는 방법

❛티스토리 TISTORY❜

1) 티스토리 관리 → 스킨 편집 → HTML 편집 → CSS로 이동.

2) 아래의 코드를 CSS 가장 밑줄에 넣어준다.

CSS


/* 형광펜 효과 */
u {
  text-decoration: none;
  display: inline;
  box-shadow: inset 0 -10px 0 hsla(210, 72%, 56%, 0.568);
}

티스토리 CSS 편집 화면

괄호 안의 숫자들(44, 70%, 52%, 0.568)은 색상을 나타내는데, 원하는 색상으로 바꾸면 된다.

- 예: 노란색 hsla(50, 100%, 50%, 0.5) / 분홍색 hsla(340, 100%, 80%, 0.5)

또한 box-shadow: inset 0 -10px 0 부분에서 -10px 숫자를 조절하면 형광펜의 두께(높이)가 변한다.

❛블로그스팟 Blogger❜

1) 테마 → 맞춤 설정 → 고급 → CSS 추가.

2) CSS 추가에 코드를 입력하고, 우측 하단의 저장을 누르면 끝.

블로그스팟 CSS 코드 추가 화면

- 예시로 든 숫자의 색상은 파란색 계열. 색상은 개인의 취향에 맞게 숫자로 조정하면 됨.

블로그스팟 밑줄 형광펜 효과 적용 예시 화면

하나씩 바꿔보는 재미가 있는 Blogger와 TISTORY.