워드프레스 밑줄 꾸미기 U태그 : 블로그에 글을 작성하다 보면 강조하고 싶은 단어나 문장이 있습니다. 그럴 때 저는 주로 글자를 굵게 하는 <strong> , 형광펜 효과인 <mark> , 밑줄을 그어 강조하는 <u>의 스타일을 꾸며 사용해 왔는데 워드프레스 구텐베르크 편집기의 단락 블록에는 <u>를 사용하여 밑줄을 그을 수 있는 버튼이 없었습니다.
단축키 Ctrl+U를 사용하여 밑줄을 그을 수 있었지만 <span> 안에 인라인 스타일로 text-decoration: underline; 이 적용되고 글자와 겹치는 밑줄이 보기 불편하여 예쁘게 꾸며보기로 했습니다.
워드프레스 밑줄 꾸미기
워드프레스 정보꾸러미님의 밑줄 꾸미는 자바스크립트를 활용하여 꾸며봤는데 제 사이트의 자바스크립트 지연 설정 때문인지 아주 짧은 시간이지만 스타일이 바로 표시되지 않고 조금 늦게 적용되는 문제가 있어서 CSS 코드를 사용자 정의하기에 추가하여 밑줄 스타일을 변경해 보았습니다.
★ 사용자 정의하기로 CSS 코드를 적용할 경우, <head>안에 추가되기 때문에 스타일이 거의 즉시 적용됩니다.
두꺼운 밑줄 스타일
디자인 → 사용자 정의하기 → 추가 CSS에 다음 코드를 삽입하고 저장합니다.
/* 워드프레스 밑줄 꾸미기 */
span[style*="text-decoration: underline;"] {
text-decoration: none !important;
border-bottom: 3px solid #e54353;
font-weight: 600;
}
span[style*="text-decoration: underline;"]:style속성에text-decoration: underline문자열을 포함하는 모든span요소를 선택합니다. 즉, 밑줄이 있는 모든span요소를 선택하는 것입니다.style*의 별표(*)는 스타일 속성 내에서 특정 문자열을 찾는다는 의미입니다.text-decoration: none !important;: 밑줄 스타일을 제거하고, 다른 선언보다 우선하도록 합니다.infiniteborder-bottom: 3px solid #e54353;: border-bottom: 3px solid #e54353;: 아래쪽에 3픽셀 두께의#e54353색상 실선 테두리를 추가하여 두꺼운 밑줄과 같은 효과를 주었습니다.font-weight: 600;: 글꼴 굵기를 600으로 설정하여 두껍게 표시하여 선택된 텍스트가 더욱 강조되도록 하였습니다.
형광펜 스타일
밑줄 대신 형광펜처럼 꾸며볼 수도 있습니다. 아래 코드를 적용하면 연두색 형광펜 스타일이 적용됩니다.
/* 워드프레스 밑줄 꾸미기 - 형광펜 스타일 */
span[style*="text-decoration: underline;"] {
background-image: linear-gradient(90deg, #e6faca, #e6faca);
background-position: bottom -5px left 0;
background-size: 100% 15px;
background-repeat: no-repeat;
}
위 두 스타일 중 원하는 스타일로 워드프레스 블로그에 적용하여 가독성을 더욱 높여보세요!
★ 단축키 사용이 익숙하지 않다면 구텐베르크 편집기에서 클래식 단락 블록을 사용할 수 있는 고급 편집기 도구와 같은 플러그인을 설치하여 <mark> ,<u> 등 를 클릭하여 사용할 수도 있습니다.
워드프레스 테이블 가로 스크롤 만들기
워드프레스 클래식 에디터 vs 구텐베르크 고민중?