워드프레스에서 블로그 포스팅을 작성할 때, 주요내용을 쉽게 파악할 수 있도록 밑줄 태그를 사용하는 경우가 많은데요. 하지만 단순한 밑줄보다 형광펜 효과를 주면 더 눈에 잘 띄게 할 수 있습니다. 이 글에서는 워드프레스에서 CSS로 밑줄에 형광펜 효과 적용하는 방법에 대해 알아보겠습니다.
워드프레스에서 CSS로 밑줄에 형광펜 효과 적용하는 방법
1. 형광펜 색상 결정하기
워드프레스에서 CSS를 사용하여 밑줄에 형광펜 효과를 주려면, 먼저 형광펜의 색상을 rgba 형식으로 설정해야 합니다. rgba는 Red, Green, Blue, Alpha를 나타내며, CSS에서 색상을 정의하는 방법 중 하나입니다. 각 요소는 다음과 같이 정의됩니다.
- R (Red): 빨간색 값 (0-255)
- G (Green): 초록색 값 (0-255)
- B (Blue): 파란색 값 (0-255)
- A (Alpha): 불투명도 (0-1)
예를 들어, 밑줄을 노란색 형광펜으로 표시하고 싶다면, rgba(255, 255, 0, 0.9)와 같이 표현할 수 있습니다. 여기서 0.9는 색상의 불투명도를 나타냅니다.
rgb를 처음 접하시는 분들이라면 어떻게 해야 할지 막막하실 텐데, 아래 사이트에서 손쉽게 원하는 색상의 rgba값을 확인할 수 있습니다.
2. 워드프레스에 CSS 코드 반영하기
색상 선택을 마쳤다면, 이제 밑줄에 형광펜 효과를 주는 CSS를 작성해 보겠습니다. 형광펜 효과는 문자의 전체를 색칠하는 대신, 글자 하단 일부만 원하는 색상으로 표시하여 가독성을 향상시켜 보겠습니다.
CSS 코드는 아래와 같습니다.
[style*="text-decoration: underline"],
[style*="text-decoration:underline"],
u {
background: linear-gradient(to bottom, transparent 40%, rgba(255, 255, 0, 0.9) 90%);
text-decoration: none !important;
display: inline;
position: relative;
}[style*="text-decoration: underline"],[style*="text-decoration:underline"],u은 선택자로 인라인 스타일에 text-decoration: underline 속성을 포함하는 모든 요소와 <u> 태그를 선택하는 것을 의미합니다. 이는 밑줄 스타일이 적용된 요소나 <u> 태그가 있는 모든 HTML 코드에 직접 적용됩니다. 따라서 원하지 않는 곳에도 이 스타일이 적용될 수 있어, 의도하지 않은 효과를 발생시킬 수 있습니다.
background: linear-gradient(to bottom, transparent 40%, rgba(255,255,0,0.9) 90%);는 선형 그라디언트 배경을 설정합니다. 이 설정은 상단에서부터 40% 지점까지 투명하게 유지되다가, 그 이후로 점점 노란색으로 변화하며, 90% 지점에서는rgba(255, 255, 0, 0.9)로 설정된 노란색을 90% 불투명도로 표현합니다.text-decoration: none !important;기본 밑줄을 제거하도록 설정합니다.
다음으로 준비된 CSS 코드를 워드프레스에 추가하도록 하겠습니다.
워드프레스 관리자 화면에서 ‘디자인’ → ‘사용자 정의하기’를 선택한 후, 이동한 화면에서 ‘추가 CSS’를 클릭합니다. 스크롤을 맨 아래로 내린 후, 앞서 작성한 CSS 코드를 복사하여 붙여넣고 ‘공개’ 버튼을 클릭하여 적용합니다.
이제 밑줄을 사용하면 형광펜 효과로 표시됩니다.
아래는 위의 코드를 적용한 결과 화면으로, 밑줄 속성이 적용된 부분이 노란색 형광펜 효과로 표시되는 것을 확인할 수 있습니다.
오늘은 워드프레스에서 CSS로 밑줄에 형광펜 효과 적용하는 방법에 대해 자세히 알아보았습니다. 기존의 단조로운 밑줄 효과가 식상하다면, 이 글을 참고하여 형광펜 효과를 적용해 보시기 바랍니다.