워드프레스에서 블로그 글을 작성하다 보면 특정 글자를 강조할 필요가 있습니다. 특정 글 전체를 형광펜으로 효과를 주거나, 일부 밑줄을 긋는 방법으로 효과를 주어 강조하는 방법이 있습니다. 이런 방법들을 어떻게 하는지 함께 살펴보겠습니다.

목차
1. 특정 글 전체 형광펜 효과
특정 글 전체 형광펜 효과를 내기 위한 방법은 2가지가 있습니다.
제 글 중에 “워드프레스 특정 글자색 가장 쉬운 변경 방법”에 보시면 mark 코드를 사용하여 특정 글자에 강조 색을 씌우는 방법을 알려드렸습니다. 다시 한번 코드를 살펴보겠습니다.

먼저 내가 강조하고자 하는 특정 글이 있는 블록을 선택한 후 1번 점3개를 클릭합니다. 그리고 2번 HTML로 편집을 클릭하면 html로 편집할 수 있는 블록으로 아래와 같이 변경이 됩니다.

내가 강조하고자 하는 특정 글 앞 뒤로 1번과 같이 <mark> 강조하고자 하는 글 </mark> 로 편집한 후 2번 비주얼로 편집을 클릭해 줍니다.
그러면 위의 형광칠해진 “포스팅하면” 이라는 결과물을 볼 수 있게 됩니다. mark 코드는 색상은 변경이 불가하다는 단점이 있습니다.
mark코드를 사용하는 방법과 함께 특정 글 배경색을 변경하는 방법이 있습니다. 이는 아래 제 글을 참고하시기 바랍니다.
2. 특정 글 절반 높이 형광펜 효과
특정 글 절반 높이 및 본인이 원하는 설정 높이 만큼 형광펜 효과를 내는 방법이 있습니다. 이는 CSS코드를 활용하여 효과를 나타내게 됩니다. 2가지 과정이 필요합니다.
2-1. CSS코드 추가하기
아래 CSS코드를 설정하는 방법을 알려드리겠습니다.
.half_background {
background: linear-gradient(to top, yellow 50%, transparent 50%);
}
이 코드를 설정하기 위해서는 먼저 워드프레스 메인 화면에서 외모 – 사용자 정의하기를 클릭해 줍니다. 그리고 가장 아래 추가 CSS를 클릭해 줍니다.
추가 CSS화면에서 위 코드를 복사해서 붙여넣기 하면 됩니다. 코드에 대해 설명해 드리겠습니다.
이 코드는 .half_background 클래스에 대한 스타일을 정의합니다.
background: linear-gradient 속성은 선형 그라데이션을 사용하여 배경을 설정합니다.
to top 키워드는 그라데이션의 방향을 지정하며, 이 경우에는 하단에서 상단으로 이동합니다.
Yellow (노랑색): 요소의 하단부터 시작하여 높이의 50%를 차지합니다. 이는 요소의 아래쪽 50%가 노랑색으로 칠해진다는 의미입니다. 색상 변경을 원하시면 yellow에 다른 색상 명을 적거나 코드를 넣으시면 됩니다. 예를 들어 빨간색을 원하시면 “red” 또는 “FF0000″이라고 적어주시면 됩니다.
Transparent (투명): 나머지 상단 50%는 투명하게 설정됩니다. 이 부분은 요소 뒤에 있는 내용이나 색상을 나타나게 합니다.
이 스타일을 사용하면 해당 클래스가 적용된 HTML 요소는 아래쪽 50%가 노랑색이고, 위쪽 50%가 투명한 배경을 갖게 됩니다.
여기서 선의 두께를 절반보다 얇게 표현하고 싶으시다면, yellow 50%, transparent 50% 이 부분을 yellow 30%, transparent 30% 으로 변경해 주시면 됩니다. 즉, yellow 와 transparent 의 값을 동일하게 맞춰 주시면 됩니다.
2-2. 적용 방법
CSS를 추가 하셨다면 이제 편집기에서 어떻게 적용하는지 알려드리겠습니다.

내가 강조하고자 하는 글의 HTML로 편집을 클릭해 html 편집을 할 수 있도록 변경 한 후 1번과 같이 내가 강조하고자 하는 글 앞뒤로 아래와 같이 html코드를 입력해 주시면 됩니다.
<span class="half_background">내가 강조하고자 하는 특정 글</span>
50% 두께와 30% 두께에 대한 결과 값은 아래와 같습니다.
▶ 50% 두께 설정 결과

▶ 30% 두께 설정 결과

이렇게 본인이 원하는 색상 및 두께를 설정해서 사용할 수 있습니다. 그런데 본인이 색상 및 두께를 yellow 50%로 설정하시면 이 설정값은 본인의 블로그 모든 글에 동일하게 적용됩니다. 만약 색상 및 두께를 변경하시면 모든 글이 동일 값으로 모두 변경되니 이점 주의하시기 바랍니다.
3. 특정 글 밑줄 긋기
특정 글 밑줄을 긋는 방법도 CSS코드를 추가하여 할 수 있습니다. 코드는 아래와 같습니다.
.bottom-line {
border-bottom: 2px solid #ff6347;
}
2px는 밑줄의 두께이며, #ff6347 밑줄의 색상입니다. 본인이 원하는 두께 및 색상으로 변경이 가능합니다.
추가로 밑줄을 점선으로 표현하는 코드도 알려드리겠습니다.
.lower-border {
border-bottom: 2px dashed #ff6347;
}
이 두 코드를 추가한 후 사용하는 방법과 결과물 입니다.

먼저, 내가 강조하고자 하는 글의 HTML로 편집을 클릭해 html 편집을 할 수 있도록 변경 한 후 내가 강조하고자 하는 글 앞뒤로 아래와 같이 html코드를 입력해 주시면 됩니다.
밑줄 : <span class="bottom-line">내가 강조하고자 하는 글</span>
점선 밑줄 : <span class="lower-border">내가 강조하고자 하는 글</span>
위 그림과 같이 코드를 넣어 작성한 후 비주얼로 편집을 누르시면 아래와 같은 결과물을 확인할 수 있습니다.

이런 다양한 효과를 넣으면 글의 키워드를 강조할 수 있어, 글의 가독성을 높일 수 있습니다. 그러나 지나친 사용은 오히려 글의 가독성을 떨어뜨리는 효과를 가져올 수 있으므로, 적절히 사용하시기 바랍니다.
▶ 워드프레스 블로그 글을 구글 빠르게 색인 시키기 위해 항상 구글서치콘솔 색인을 직접 수동으로 하고 있지 않나요? 이제 이 글을 통해 자동으로 구글에 색인 등록하는 방법을 알려드리겠습니다. 쉽게 따라만 하시면 됩니다.