CSS로 텍스트의 절반 높이만 형광펜으로 표시하는 방법

요즘 블로그를 구경하다 보면 텍스트에 형광펜 효과를 주는 경우를 종종 봅니다. 보통은 텍스트의 전체 높이에 형광펜 효과를 주는 배경색을 이용하거나, 밑줄 형태로 형광펜 효과를 주는 경우가 사용될 것입니다. 또 다른 방법으로 텍스트의 절반 높이에만 형광펜 효과를 주는 것도 가능합니다.

전체 높이에 형광펜 효과를 주는 것은 일반적인 백그라운드 컬러를 적용하면 되므로 여기에서는 밑줄 형태로 형광펜 효과를 주는 방법과 텍스트의 절반 높이에만 형광펜 효과를 주는 방법에 대해 간단히 설명하겠습니다.

목차

CSS로 형광펜 효과를 주는 방법

밑줄 형태로 형광펜 효과를 주는 방법

밑줄 형태로 형광펜 효과를 주는 방법은 하루일기님의 티스토리 본문 링크 부분 형광펜 밑줄 효과 글을 참고할 수 있습니다. 다음과 비슷한 CSS 코드를 추가합니다.

.bottom-line { 
border-bottom: 1px solid #b0e0e6; 
  box-shadow: inset 0 -2px 0 #b0e0e6;
  }

그리고 글쓰기에서 HTML 모드로 전환한 후에 다음과 같이 HTML 태그를 추가하면 됩니다.

<p>텍스트 밑줄 형광펜 <span class="bottom-line">텍스트 밑줄 형광펜 효과</span></p>

데모를 jsfiddle에서 확인해볼 수 있습니다.

• 데모

텍스트의 절반 높이만 형광펜으로 표시하는 방법

텍스트의 절반 높이에만 형광펜 효과를 적용하고 싶은 경우 다음과 비슷한 CSS 코드를 사용합니다.

.half_background {
  background: linear-gradient(to top, yellow 50%, transparent 50%);
}

색상은 원하는 대로 바꾸도록 합니다.

 

그리고 글쓰기에서  HTML 모드로 전환하고 다음과 같이 HTML 태그를 추가하도록 합니다.

<p><span class="half_background">텍스트의 절반 높이만 형광펜으로 표시</span>.</p>

jsfiddle 페이지에서 데모를 확인해볼 수 있습니다.

• 데모

마치며

텍스트의 일부를 돋보이게 하고 싶은 경우 위에서 설명한 내용을 참고하여 형광펜 효과를 줄 수 있을 것입니다. 티스토리에서는 꾸미기 > 스킨편집 > html편집 > CSS 탭을 클릭하여 맨 아래에 추가할 수 있습니다.

워드프레스의 경우 다음 글에서 소개하는 코드에 위의 코드를 적절히 추가하여 숏코드로 구현이 가능합니다.

텍스트 하이라이터(형광펜) 플러그인 - 워드프레스 중급

참고:

티스토리 글쓰기에서 컬러 텍스트 상자를 삽입하는 방법

워드프레스에서 컬러 텍스트 상자 만들기 [CSS]