"블로그스팟 형광펜 밑줄 효과 업그레이드: 4가지 컬러 CSS 커스텀 가이드"

단조로웠던 밑줄 강조에서 벗어나 보자. 이제 글의 성격에 따라 4가지 컬러를 골라 쓰는 업그레이드된 형광펜 효과로 블로그의 전문성과 가독성을 한 번에 높일 수 있다.

※ 형광펜 색상 예시: 딥 로즈 핑크 / 골드 옐로우 / 프레쉬 민트 / 소프트 퍼플


CSS 형광펜 밑줄 효과 입히기

1. 블로그스팟 관리 [테마] > [맞춤설정] > [고급] > [CSS 추가]를 누르고, 아래의 코드를 복사해서 삽입한다.

CSS 

/* 4. 형광펜 효과 (색상별 클래스) */

/* (기본) 딥 로즈 핑크 - 현재 사용 중인 색상 */
u, .hl-pink {
  text-decoration: none;
  display: inline;
  box-shadow: inset 0 -8px 0 rgba(255, 133, 162, 0.9);
}

/* 1. 선명한 골드 옐로우 - 핑크와 가장 잘 어울리는 기본 강조색 */
u.hl-yellow {
  text-decoration: none;
  display: inline;
  box-shadow: inset 0 -8px 0 rgba(255, 212, 59, 0.9);
}

/* 2. 프레쉬 민트 - 미드나잇 블루 본문 제목과 톤온톤으로 어울리는 색 */
u.hl-mint {
  text-decoration: none;
  display: inline;
  box-shadow: inset 0 -8px 0 rgba(46, 232, 187, 0.8);
}

/* 3. 소프트 퍼플 - 차분하게 강조하고 싶을 때 쓰는 보라색 */
u.hl-purple {
  text-decoration: none;
  display: inline;
  box-shadow: inset 0 -8px 0 rgba(191, 155, 255, 0.8);
}


2. 글 작성 시, 아래의 코드로 강조하고 싶은 부분을 감싸주면 끝!

'딥 로즈 핑크'를 기본으로 정해놨으므로, 글쓰기 에디터에서 '밑줄'을 누르면 코드 입력 없이 바로 적용된다.

HTML 

<u class="hl-yellow">노란색 형광펜</u>
<u class="hl-mint">민트색 형광펜</u>
<u class="hl-purple">보라색 형광펜</u>
<u>그냥 핑크색 형광펜</u>


글쓰기 에디터 활용 팁

글쓰기 에디터에서 색상을 입히는 과정을 최소화하려면 이렇게 해보자.

  1. 글쓰기 모드에서 강조할 글자들을 일단 모두 밑줄(U) 처리한다. 그럼 전부 핑크색이 되겠지?
  2. HTML 보기로 들어간다.
  3. 만약 민트색으로 바꾼다면, 바꿀 부분만 <u>를 <u class="hl-mint">로 수정해 준다.

블로그스팟 HTML 모드 코드 적용 예시 화면
블로그스팟 HTML 모드 코드 적용 예시 화면


오늘의 한마디

나만의 컬러를 만들고 싶다면? 코드를 적용한 뒤 rgba(숫자) 부분의 값을 조절하면 원하는 커스텀 색상을 마음대로 픽할 수 있다.


Related Posts

댓글

댓글 쓰기