[이모저모] 티스토리 물결 밑줄 넣는 방법, CSS로 밑줄 스타일 바꾸기

 

안녕하세요. 수요일의 21입니다. 블로그 글을 쓰다 보면 어느 순간부터 이런 쓸데없는 데 집착하게 됩니다. 글 내용도 중요하고, 제목도 중요하고, 유입도 중요하고, 광고도 중요하고, 다 중요한데, 이상하게 문장 하나에 밑줄을 어떻게 긋느냐가 신경 쓰일 때가 있습니다. 그냥 밑줄이면 되지 않나 싶다가도, 막상 글 안에서 보면 너무 딱딱합니다. 마치 학교 프린트물에 빨간 펜으로 정답 체크해 놓은 것 같기도 하고, 괜히 블로그 글맛이 죽는 느낌도 납니다. 특히 티스토리에서 글을 쓰다 보면 기본 에디터에서 밑줄을 넣는 건 어렵지 않습니다. 그냥 원하는 문장을 선택하고 밑줄을 누르면 됩니다. HTML로 보면 대체로 이런 식입니다.

<u>안 나온다고 징징대는</u>

이건 아주 단순합니다. <u> 태그로 감싼 부분에 밑줄을 넣겠다는 겁니다. 문제는 이 상태에서는 기본적으로 직선 밑줄이 들어간다는 겁니다. 물론 직선 밑줄도 나쁘지는 않습니다. 문장에 힘을 주고 싶을 때, 특정 표현을 강조하고 싶을 때, 가장 무난한 방식입니다. 그런데 가끔은 이 무난함이 너무 무난해서 재미가 없습니다.

/* 물결 밑줄 처리 */

u,
ins {
  text-decoration-line: underline !important;
  text-decoration-style: wavy !important;
  text-decoration-color: #e06b6b !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

블로그까지 와서 또 회사 보고서 같은 밑줄을 보고 있으면, 뭔가 인생이 조금 손해 보는 기분이 들기도 합니다. 그래서 밑줄을 조금 다르게 처리할 수 있습니다. 대표적인 방법이 물결 밑줄입니다. CSS에서 text-decoration-style: wavy;를 넣으면 직선 밑줄이 아니라 물결 모양의 밑줄이 들어갑니다. 예를 들면 기존 밑줄 스타일을 아예 물결 밑줄로 바꾸고 싶다면 이렇게 처리할 수 있습니다. 이 코드를 넣으면 글 안에서 <u> 태그를 쓴 부분은 전부 물결 밑줄로 바뀝니다.

각 속성을 풀어보면 이렇습니다. text-decoration-line: underline;은 밑줄을 넣겠다는 겁니다. text-decoration-style: wavy;는 그 밑줄을 물결 모양으로 만들겠다는 겁니다. text-decoration-color: #e06b6b;는 밑줄 색을 연한 붉은색으로 지정합니다. text-decoration-thickness: 2px;는 밑줄 두께를 정하고, text-underline-offset: 3px;는 글자와 밑줄 사이의 간격을 조절합니다.

text-decoration: underline;

= 글자에 밑줄 긋기

이건 글자 자체에 밑줄을 긋는 방식입니다. 밑줄 태그도 기본적으로 이쪽 계열입니다. 그런데 어떤 티스토리 스킨이나 블로그 CSS는 밑줄처럼 보이게 하려고 이런 식으로 처리해 두는 경우가 있습니다.

border-bottom: 1px solid red;

= 글자 아래 박스에 선 긋기

이건 진짜 밑줄이라기보다, 글자 아래쪽에 테두리 선을 하나 깔아 두는 방식입니다. 겉보기에는 밑줄처럼 보이지만 원리는 다릅니다. 글자에 밑줄을 긋는 게 아니라, 글자를 담고 있는 박스 아래에 선을 긋는 겁니다.

안 나온다고 징징대는
~~~~~~~ 물결 밑줄
_______ 직선 테두리선

문제는 둘이 동시에 걸리면 밑줄이 두 개처럼 보이거나, 선 위치가 이상해질 수 있다는 겁니다. 내가 CSS로 물결 밑줄을 넣었는데, 기존 스킨에서 border-bottom으로 직선 밑줄을 또 넣고 있으면 화면에서는 이런 느낌이 됩니다.

border-bottom: none !important;
padding-bottom: 0 !important;

여기서 border-bottom: none;과 padding-bottom: 0;도 같이 넣어둔 이유가 있습니다. 티스토리 스킨이나 에디터 환경에 따라 밑줄이 text-decoration이 아니라 border-bottom처럼 처리되는 경우가 있습니다. 그러면 내가 의도한 밑줄과 스킨에서 건드린 밑줄이 겹치거나 이상하게 보일 수 있습니다. 그래서 그런 여지를 미리 막아두는 겁니다. 약간 과한 방어 같지만, 티스토리에서는 이런 방어가 생각보다 자주 필요합니다. 스킨은 가끔 내 편인 척하면서 뒤통수를 칩니다.

이게 남아 있으면 내가 넣은 물결 밑줄과 스킨의 직선 밑줄이 겹쳐 보일 수 있습니다.
그래서 미리 꺼두는 겁니다. 쉽게 말해, 내가 넣은 물결 밑줄만 남기기 위한 정리 작업입니다.

border-bottom: none;은 “혹시 스킨이 글자 아래에 테두리선을 넣고 있으면 그거 없애라”는 겁니다.
padding-bottom: 0;은 “혹시 그 테두리선 때문에 글자 아래쪽에 여백을 일부러 벌려놨으면 그 여백도 없애라”는 겁니다.

다만 위 방식에는 단점이 있습니다. <u> 태그를 쓰는 모든 밑줄이 전부 물결 밑줄로 바뀐다는 겁니다. 글 안에서 어떤 부분은 평범한 직선 밑줄로 쓰고 싶고, 어떤 부분은 물결 밑줄로 쓰고 싶다면 이 방식은 조금 불편합니다. 전부 물결이 되어버리니까요. 세상 모든 강조가 물결거리면 그것도 나름 피곤합니다. 강조가 아니라 멀미가 됩니다.

/* 기존 밑줄: 글씨 색을 따라가는 직선 밑줄 */
u,
ins {
  text-decoration-line: underline !important;
  text-decoration-style: solid !important;
  text-decoration-color: currentColor !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}

/* 물결 밑줄: 붉은색으로 고정되는 물결 밑줄 */
.wave-underline {
  text-decoration-line: underline !important;
  text-decoration-style: wavy !important;
  text-decoration-color: #e06b6b !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}

text-decoration-color: currentColor !important; /* 글씨 색을 따라감 */

text-decoration-color: #e06b6b !important; /* 글씨 색과 상관없이 붉은색으로 고정 */

<u>일반 밑줄</u>
<span class="wave-underline">안 나온다고 징징대는</span>

그래서 더 깔끔한 방법은 일반 밑줄과 물결 밑줄을 따로 나누는 것입니다. <u> 태그는 기존처럼 일반 밑줄로 남겨두고, 물결 밑줄을 쓰고 싶은 부분에만 별도 클래스를 붙이는 방식입니다.

이 방식의 장점은 분명합니다. 글 안에서 강조의 종류를 나눌 수 있습니다. 단순한 강조는 일반 밑줄로 처리하고, 조금 더 감정이 들어간 표현이나 비꼬는 표현, 블로그 문장 안에서 눈에 걸리게 만들고 싶은 표현은 물결 밑줄로 처리할 수 있습니다. 저는 물결 밑줄만 적용했습니다.

/* 취소선 버튼을 눌렀을 때: 취소선 대신 아래 물결 밑줄 */
s,
strike,
del {
  text-decoration-line: underline !important;
  text-decoration-style: wavy !important;
  text-decoration-color: #e06b6b !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}

뭐 이러한 방법도 있습니다. 물론 이 방법은 약간 변칙입니다. 원래 취소선은 글자 가운데에 선을 긋는 기능입니다. 그런데 CSS에서 s, strike, del 태그의 표시 방식을 바꿔버리면, 취소선 버튼을 눌러도 실제 화면에서는 가운데 선이 아니라 아래쪽 물결 밑줄처럼 보이게 만들 수 있습니다.

쉽게 말하면 취소선 버튼을 물결 밑줄 버튼처럼 쓰는 겁니다. 티스토리 에디터에서 매번 HTML 모드로 들어가 class="wave-underline"을 붙이는 게 귀찮다면, 이런 식으로 버튼 하나를 빌려 쓰는 방법도 있습니다. 밑줄 버튼은 일반 밑줄, 취소선 버튼은 물결 밑줄. 이렇게 역할을 나눠버리면 글을 쓸 때 훨씬 편해집니다.

다만 이 방식에는 분명한 단점도 있습니다. 이렇게 설정하면 그 글 안에서는 진짜 취소선을 쓰기 어렵습니다. 취소선을 눌러도 취소선이 아니라 물결 밑줄로 나오기 때문입니다. 그래서 평소에 취소선을 거의 쓰지 않는 사람에게는 괜찮은 방법이고, 취소선도 자주 쓰는 사람이라면 별도 클래스를 쓰는 쪽이 더 안전합니다.

회사 보고서 같은 직선 밑줄보다, 살짝 흔들리는 물결 밑줄이 블로그 글에는 더 어울릴 때가 있습니다. 글 내용이 달라지는 건 아니지만, 이런 사소한 게 글을 조금 덜 건조하게 만듭니다. 티스토리에서 CSS를 만지는 재미도 대체로 이런 데서 옵니다.