블로그 가독성 200% 상승! 중요한 문장에 '형광펜 하이라이트' 넣는 HTML 비법

 

블로그 가독성 필살기: 중요한 문장에 '형광펜 하이라이트' 넣는 법

독자는 글을 처음부터 끝까지 정독하기보다 필요한 정보를 찾아 '스캔'하듯 읽습니다. 이때 형광펜 효과는 독자의 시선을 멈추게 하는 강력한 도구가 됩니다. 수익형 블로그의 체류 시간을 늘려주는 하이라이트 적용법을 소개합니다.

1. 특정 문장에만 형광펜 칠하기 (인라인 스타일)

글을 쓰는 도중 강조하고 싶은 단어나 문장에 바로 적용할 수 있는 가장 간단한 방법입니다.

[노란색 형광펜 코드]

<span style="background: linear-gradient(to top, #ffe500 50%, transparent 50%);">
  여기에 강조할 내용을 입력하세요.
</span>
    

• linear-gradient: 글자의 아래쪽 절반만 색이 칠해지는 세련된 반투명 효과를 줍니다.
• #ffe500: 형광 노란색 코드입니다. 원하는 색상으로 변경 가능합니다.

(실제 구현 모습)

2. 다양한 색상의 형광펜 스타일

블로그의 분위기나 강조의 성격에 따라 색상을 다르게 사용해 보세요.

색상	효과 예시	색상 코드 (HEX)
연분홍	사랑스러운 강조	#ffc0cb
연하늘	시원한 신뢰감	#d1f3ff
연두색	안정적인 팁	#d4edda

3. CSS로 등록하여 '글 양식'에 활용하기

매번 긴 코드를 넣기 힘들다면, 짧은 클래스 명으로 사용할 수 있도록 테마에 등록해두세요.

1. [테마] -> [맞춤설정] -> [고급] -> [CSS 추가]에 아래 코드를 넣습니다.

/* 형광펜 클래스 정의 */
.highlight {
  background: linear-gradient(to top, #ffe500 40%, transparent 40%);
  font-weight: bold;
}

이제 글쓰기 [HTML 보기] 모드에서 <span class="highlight">강조할 내용</span>이라고만 적으면 자동으로 형광펜이 칠해집니다.

💡 하이라이트 사용 시 주의사항

• 과유불급: 한 페이지에 형광펜이 너무 많으면 어디가 진짜 중요한지 알 수 없게 됩니다. 한 문단에 한 번 정도가 적당합니다.
• 가독성 확인: 배경색이 너무 진하면 글자가 묻힐 수 있습니다. 파스텔 톤의 연한 색상을 권장합니다.
• 색상 통일: 블로그 전체에서 강조 색상을 1~2개로 통일해야 디자인이 깔끔해 보입니다.

이제 밋밋한 텍스트에 생동감을 불어넣으세요. 형광펜 효과 하나로 여러분의 메시지가 독자에게 더 명확하게 전달될 것입니다!