워드프레스에서 P 태그를 사용해 본문을 작성하다 강조하고 싶은 부분이 있을 경우 사용하는 것이 strong 태그입니다. 이 때 강조하고 싶은 문장에 옅은 색의 형광펜 효과를 추가하면 더 효과적으로 보이게 됩니다. 이 글에서는 워드프레스에서 P 태그 안에 strong 태그 사용 시 형광펜 효과를 주는 방법에 대해 알아보겠습니다.
워드프레스에서 P 태그 안에 strong 태그 사용 시 형광펜 효과를 주는 방법
워드프레스에서 본문을 작성할 때 사용하는 태그가 P태그입니다. 그리고 P태그 안에 있는 문장 중 일부를 강조하고 싶을 때 strong 태그를 사용하여 글꼴을 굵게 하여 눈에 띄게 만드는데요. 이 글에서는 CSS를 사용하여 강조 문장을 눈에 더 잘 띄게 형광펜 효과를 주는 방법에 대해 알아보겠습니다.
다만, 블로그의 모든 위치에 있는 strong 태그에 형광펜 효과를 주는 것은 외관상으로 좋지 않기 때문에, 이 글에서는 ‘본문’만을 대상으로 하며, 본문의 P태크 안에 있는 strong 태그에만 적용되도록 CSS 코드를 만들도록 하겠습니다.
1. 형광펜 색상 정하기
먼저 형광펜 색상을 정하기 위해 아래 블로그에서 색상 축출 프로그램을 다운로드 받거나, 프로그램을 설치하는 것이 내키지 않은다면 아래 color-hex 사이트에서 색상을 선택합니다.
색상 축출 프로그램 다운로드 하기
color-hex 사이트 들어가기
이 글에서는 개인적으로 자주 사용하는 색상 축출 프로그램을 기준으로 설명하도록 하겠습니다. 먼저 색상 축출 프로그램을 다운로드 받아 압축을 해제한 후, ‘OiColorPicker.exe’ 을 실행하면 아래와 같은 화면이 나옵니다.
OiColorPicker 프로그램을 실행시킨 상태에서, 원하는 색상이 있는 곳으로 아래와 같이 마우스를 이동시킨 다음, 단축키 ‘Alt + X’를 클릭하면 아래 ②번과 같이 마우스가 위치해 있는 색상의 RGB와 Hex 코드를 알 수 있으며, 여기서 우리가 사용할 코드는 RGB 코드입니다.
이와 같이 여러분이 선호하는 색상의 RBG 코드를 먼저 선택합니다. 저는 연한 녹색(144,238,144)를 사용하겠습니다.
2. 형광펜 효과 적용하기
형광펜으로 사용할 색상을 결정하였다면, 다음으로 형광펜 효과를 정하도록 하겠습니다. 아래 화면의 오른쪽에 보시면 연한 녹색의 형광펜 효과를 볼 수 있는데요. 보시는 것처럼 강조할 문장의 글자 모두를 색칠한 것이 아니라 글자 하단의 일부만 색칠이 되어 있습니다. 이렇게 글자 하단의 일부만 색을 칠하기 위해서는 아래 코드를 사용해야 합니다.
.single .entry-content p strong{
background-image: linear-gradient(transparent 65%, rgba(144, 238, 144, 0.5) 65%);
border-radius: 4px;
}.single 클래스를 가진 요소(본문) 내의 .entry-content 클래스를 가진 콘텐츠 영역에 위치한 모든 P 태그 내의 strong 태그에 스타일을 적용한다는 의미입니다.
- 두 번째 줄에 있는 ‘65%’ 가 글자 하단의 일부만 형광펜 효과를 주는 것으로 현재는 대략 1/3 만 색을 칠하게 한 것이고, 숫자를 바꾸면서 여러분이 원하는 굵기로 설정하시면 됩니다.
- rgba 안에 4개의 숫자가 있는데 앞에 3개는 위에서 결정한 rgb 코드이고, 네 번째 숫자는 투명도를 설정하는 것으로 저는 50% 투명하게 설정을 하였습니다.
- 형광펜의 양쪽 모서리는 4px 크기로 둥글게 설정하였습니다.
위의 형광펜 효과 어떠신가요? 형광펜의 색상이나 굵기를 여러분이 원하는 데로 조절하시면 본문에서 강조하고 싶은 문장을 깔끔하고 효과적으로 표시될 수 있도록 할 수 있습니다.
추가적으로,
서두에서도 말씀드렸듯이 이 글에서는 글의 본문에서 P태그 안에 strong 태그가 있을 경우에만 적용되게 하였습니다. 그러나 글의 본문 뿐만 아니라 strong 태그가 쓰인 모든 곳 형광펜 효과를 주고 싶다면 .single .entry-content p strong { 에서 strong { 만 남기고 삭제하시면 됩니다.
그리고 strong 이 아리라 밑줄(underline) 속성으로 되어 있는 부분에 형광펜 효과를 주고 싶으신 분들은 CSS 코드로만 처리할 수가 없기 때문에 아래 CSS 코드를 ‘외모’ → ‘사용자 정의하기’ → ‘추가 CSS’에 추가하시고, 자바스크립트 코드는 <head> ~ </head> 사이에 삽입하시면 됩니다.
CSS 코드
.highlight {
background-image: linear-gradient(transparent 65%, rgba(144, 238, 144, 0.5) 65%);
border-radius: 4px;
color: black;
}
자바스크립트 코드
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('span').forEach((element) => {
if (element.style.textDecoration === 'underline') {
element.classList.add('highlight');
}
});
});
</script>
오늘은 워드프레스에서 P 태그 안에 strong 태그 사용 시 형광펜 효과를 주는 방법에 대해 알아보았습니다. strong 태그 뿐만 아니라 underline 태그에 형광펜 효과를 적용하고 싶으신 분들을 위한 코드도 함께 추가하였으니, 이 글을 참고하여 강조하고 싶은 문장을 눈에 띄게 표현해 보시길 바랍니다.