워드프레스 텍스트 CSS 적용 – 블로그 디자인 개선을 위한 소소한 가이드

이번 포스트에서는 여러분과 워드프레스 본문 텍스트 CSS 적용하는 방법에 대해 이야기를 나눠보려고 합니다. 현재 이삭님이 운영하시는 워플 커뮤니티에서 활동하고 있는데, 그곳에서 워드프레스 꾸미기 첫걸음! 제목 꾸미기 완벽 가이드 (24년 최신) 포스트를 통해서 본문 내 h2~4 태그를 꾸미는 것을 알게 되었습니다.

그런데 블로깅을 하다보니 다른 분들이 제목이 아닌 일반 본문 텍스트에 형광펜 형태로 꾸미는 것을 보고 한참을 궁금만(?) 했었습니다. 그래서 주말에 시간이 난 김에 한번 포스트에 적용도 해보고 포스팅도 해보자고 해서 이렇게 글을 작성해 봅니다.

텍스트 CSS 적용 개요

아시다시피 블로그 운영에 있어 디자인은 매우 중요합니다. 저와 같은 일반인이 넘사벽의 디자이너처럼 블로그를 꾸미기는 쉽지 않습니다. 하지만, 그냥 따라하기만 하면 되는 것이 있기 때문에 그걸 적용해보시면 아마도 만족도가 급상승하실 겁니다.

과하지 않게만 적용한다면 블로그 방문자들에게 좋은 인상을 주고 더 잦은 트래픽을 일으켜서 결국 구글과 같은 검색엔진에서도 더 잘 노출됩니다.(요즘은 워낙 다들 적용하다보니 안하고 있으면 이상할 정도인거 같습니다.)

이번 포스트에서는 워드프레스로 작성한 포스트의 본문 텍스트에 CSS를 적용하여 조금이라도 블로그 디자인을 개선하는 방법을 알아보겠습니다. CSS를 적용하는 방법은 위에 링크를 해둔 이삭님 포스트를 참조하시기 바랍니다.

이번 포스트를 쓰기 전에 궁금했던 것이 있습니다. h2~h4 태그 같은 경우, 태그별로 지정을 해서 CSS 코드를 짜기 때문에 포스트 본문에서 비쥬얼하게 해당 제목을 h2~h4 중에 선택만 하면 자동으로 원하는 꾸미기가 됩니다. 그런데, 별도의 태그를 지정하지 않고 텍스팅 하는 본문 내용의 텍스트는 소스코드와 본문 텍스트를 어떻게 매칭시키느냐 하는게 저의 궁금했던 포인트였습니다. 이 CSS를 적용하고 싶은 분도 아마 저처럼 그게 제일 궁금하지 않을까 생각합니다. 그 궁금점을 아래 글을 읽어보시면 해결해 보시죠.

본문 텍스트 3가지 효과

1. 형광펜 효과 텍스트

/* 형광펜 스타일 본문텍스트 꾸미기*/
u1 {text-decoration-line:none; padding: 2px 5px; background: linear-gradient(to top, #c9e1f1 30%, transparent 40%);}

위 소스코드를 사용자 정의 > 추가 CSS 에 가서 추가로 붙혀 넣습니다. 그 다음은 어떻게 하면 될까요? 바로 우리가 잘 사용하지 않는 코드 편집기 모드로 가는 겁니다.(참고로 단축키는 Ctrl + Shift + Alt + M 입니다.)

이 모드에서 우리는 외계어를 만나게 되십니다. 그걸 모르는 척 하고 내가 적용하고 싶은 텍스트의 앞뒤에 <u1>과 </u1>을 입력해주시면 그걸로 끝입니다. 말로는 어려우니 아래 그림을 보시면 바로 이해가 되실 겁니다.

포스트를 작성하고 있는 중에 워플 커뮤니티에서 전달된 댓글을 통해 또 다른 방법을 알게 되었습니다. 위와 같이 직접 소스코드를 만지는 위험천만한(?) 일을 하지 않고 텍스트에 볼드체(Bold)를 지정하면 그 부분에 형광펜 효과를 주는 식입니다. 그 내용은 여기로 가서 확인해보시기 바랍니다.

2. 물결 모양 밑줄

/* 물결 밑줄 본문텍스트 꾸미기*/
u {text-decoration-style: wavy; text-decoration-color:#c9e1f1; text-decoration-thickness:0.08em; }

이 코드는 <u> … </u> 태그 내부의 텍스트에 물결 모양의 파란색 밑줄을 적용합니다. 적용하는 방식은 위와 동일합니다. 적용해보시면 아래와 같은 효과가 발생합니다.

3. 텍스트 선택 시 강조 효과

::-moz-selection {
  color: #000;
  background-color: #ccffff;
}

::selection {
  color: #000;
  background-color: #ccffff;  
}

이 코드는 본문의 텍스트를 드래그하여 선택하면, 배경색을 연한 형광 연두색으로 바꾸고 텍스트 색상은 검정색으로 바꿉니다. 아래의 그림과 같이 표시가 됩니다.

정리하기

위와 같이 CSS를 사용하면 워드프레스 블로그의 텍스트에 다양한 시각적 효과를 줄 수 있습니다. 형광펜, 물결 모양 밑줄, 텍스트 선택 시 강조 등 이런 효과를 통해 블로그의 디자인을 개선하고 방문자들에게 좋은 인상을 줄 수 있습니다. 위 코드들을 활용하여 조금 더 예쁜 포스팅 해보시기 바랍니다.

참고로, 디자인하면 색상과 따로 떼어놓고 이야기 할 수 없는데, 관련하여 작은 지식을 얻고 싶으신 분은 ‘원하는 색상 찾기’의 기술-이미지에서 색상 추출부터 조화로운 컬러 매칭까지 포스트를 확인해 보시기 바랍니다.

오늘은 워드프레스 & CSS 지식 레벨 +1 되신 여러분께 축하의 박수를 보내드립니다.

‘secondlife.lol’의 모든 콘텐츠는 저작권법의 보호를 받습니다. 무단 전재와 복사, 배포 등을 금합니다.