워드프레스 꾸미기 첫걸음! 제목 꾸미기 완벽 가이드 (25년 최신)
워플 커뮤니티에서 워드프레스 관련 질문 리스트를 받아서 하나씩 답해가는 글을 작성하고 있는데, 많은 분들이 워드프레스 꾸미기 방법을 궁금해하십니다. 자신의 개성이 들어간 워드프레스 블로그 꾸미기는 누구나 원하는 것이니까요!ㅋㅋ 바로 시작합니다.
워드프레스 꾸미기 시작 전 알아 둘 것!
여러분! 정말 워드프레스 예쁘게 꾸미고 싶으시죠? 막 아기자기 한거 넣고싶고, 겨울오면 블로그 눈도 내리게 하고 싶고…(2000년대 갬성) 그렇지만, 워드프레스 꾸미기를 시작하기 앞서 여러분이 꼭 염두해두셔야 하는 것은 워드프레스 성능과 꾸미기는 상충관계에 있다는 점입니다.
꾸미기 = 코드 증가
조금 후 우리는 CSS 코드를 사용해서 워드프레스 제목 꾸미기를 할 예정입니다. 기본적인 텍스트에 색깔, 굵기를 조정하는 것을 코드로 작성해서 브라우저가 우리가 끈 제목을 표현할 때 알맞게 표현하도록 지시해주는 것이죠.
워드프레스 꾸미기를 많이하면, 자신의 블로그는 점점 무거워져 갑니다.
문제는 이러한 꾸미기 코드가 많아지만 많아질수록 코드가 길어지게 되고, 그 말인 즉, 브라우저가 블로그 내용을 보여주기까지의 시간이 늘어난다는 의미입니다. 따라서, 너무 과한 꾸미기는 자제해야 함을 명심해주세요! 🙂
가독성을 위한 꾸미기
제 생각에 블로그에 도움이 되는 꾸미기 중 하나가 블로그 가독성을 높이기 위한 꾸미기입니다. 지금 당장 생각나는 것은 다음과 같은 것들이 있습니다.
- 제목, 소제목 꾸미기
- 내용과 제목 구분이 잘되어 독자에게 쉬어가는 타이밍 제공
- 굵기 조절, 형광펜 효과 주기
- 내가 원하는 부분을 강조하므로서 독자에게 내용 전달 용이
- 코드 삽입 시 문법 하이라이팅
- 밋밋할 수 있는 코드를 색깔을 넣어주므로서 가독성 업!
- verse 블록 꾸미기
- 블로그 폰트 교체
여담이지만, 마지막 가독성을 높이기 위한 꾸미기 중 폰트 교체는 블로그를 처음 만드셨다면 함부로 시도하시지 마시기 바랍니다. 한글 폰트는 용량이 상당히 많이 나가서 자칫 잘못 설정하면 블로그 성능이 엄청 나빠지는 위험성이 있습니다.
그럼 첫 타자인 워드프레스 제목 꾸미기, 시작합니다! 🙂
워드프레스 제목 꾸미기 방법 3단계
워플 커뮤니티에 kooltip.com을 운영하시는 의성님께서 공유해주신 글을 바탕으로 제 입맛대로 바꾸는 방법을 변형해보겠습니다.
1. 블로그 테마 색깔 결정하기
일단 제목을 무슨색으로 꾸밀 것인가?를 결정해야 합니다. 자신의 블로그의 테마 색깔이 있으면 좋죠! 워플의 경우 초록색과 노란색을 사용하고 있습니다.
심지어 옷 깔맞춤 보이시나요?ㅋㅋ 편안함을 주는 색인 녹색을 메인으로, 엑센트는 잘 어울리는 노란색으로 주자! 이렇게 정했답니다. 워플의 테마색 두 개의 헥스코드는 다음과 같습니다.
- 녹색: #2E5D4B
- 노란색: #FEC91B
헥스코드란?
컬러코드 혹은 헥스코드(HEX CODE)는 웹에서 색상을 정의하는 방법입니다. 6자리의 숫자와 문자(A-F) 조합으로 구성되며, RGB(빨강, 초록, 파랑) 색상 모델을 기반으로 합니다. 각 두 자리씩 빨강, 초록, 파랑 색상의 강도를 각각 16진법으로 표현합니다.
예를 들어, #FFFFFF”는 모든 색상 채널이 최대값인 흰색을, “#000000″은 모든 채널이 최소값인 검정색을 나타냅니다.
원하는 색 헥사코드 알아내기
내가 원하는 색깔의 헥스코드를 알아내는 방법이 여러개가 있지만, 제 생각에 가장 편한 방법 중 하나는 Canva 사용하는 방법입니다. 어자피 썸네일 작업하면서 매일 사용하는데, 색상 코드 분석기능이 있었더군요?
- Canva의 편한 점은 원하는 사진을 드래그 앤 드랍하거나 업로드를 한 후, 색상(color) 버튼을 누르면 자동으로 해당 슬라이드에 들어있는 사진의 색깔을 분석해줍니다.
2. 워드프레스 제목 꾸미기 관련 CSS 코드 선택
블로그 테마 색깔이 정해졌다면, 대표적인 제목 꾸미기 스타일 CSS 코드를 알아봅시다.
CSS(Cascading Style Sheets)란?
CSS(Cascading Style Sheets)는 웹 디자인과 레이아웃을 정의하는 언어로, 웹 페이지를 시각적으로 꾸밀 때 사용됩니다. CSS를 통해 텍스트의 색상, 폰트 스타일, 요소의 배치, 크기 조정, 간격 설정 등 다양한 스타일 옵션을 지정 할 수 있게 해줍니다.
크게 박스형, 왼쪽 바 넣는 형식, 밑줄 넣는 형식 이렇게 세가지 형태를 보겠습니다.
박스형 스타일 제목 꾸미기
박스형 제목 꾸미기는 아래와 같이 생긴 제목이 생성됩니다. 느낌오시죠?
위 서식에 해당하는 CSS는 다음과 같습니다.
/* 박스형 스타일 제목 꾸미기 */
.single .entry-content h2 {
background: #2E5D4B;
padding: 5px 15px;
color: #FFFFFF;
border-radius: 0 10px 0 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
여기서 바꿀수 있는 것은 자기 입맛대로 바꾸시면 되겠습니다.
- background: 배경색 – 앞에서 정한 블로그 테마 색깔
- color: 글자색 – 엑센트 색깔
- h2: 제목 수준 – 자신이 바꾸고 싶은 제목 수준
- border-radius: 둥글게 처리
- box-shadow: 그림자 처리 (미세하게)
왼쪽 바 + 밑줄 스타일
왼쪽에 바를 만들고 밑줄이 들어간 스타일 제목은 다음과 같습니다.
위 서식에 해당하는 CSS 코드는 다음과 같습니다.
/* 왼쪽 바 + 밑줄 스타일 제목 꾸미기 */
.single .entry-content h3 {
padding-bottom: 15px;
border-left: #2E5D4B 10px solid;
padding: 3px 9px;
margin: 30px 0 20px 0;
border-bottom: #2E5D4B 2px solid;
}
코드에서 바꿀 수 있는 것들은 다음과 같습니다.
- h3: 적용할 제목 수준
- border-left: 바 색상, 두께, 타입
- border-bottom: 밑줄 색상, 두께, 타입
- border-bottom을 없애면, 밑줄이 없어지겠죠?
형광펜 스타일 제목
이 방법 역시 워플 커뮤니티에서 timesavehack 블로그를 운영중이신 리하킴님의 코드를 변형한 방법입니다. 다들 어디서 이렇게 코드들을 가져오시는지 신기할 따름입니다.ㅎㅎ
위 제목 스타일에 해당하는 CSS 코드는 다음과 같습니다.
/* 형광펜 스타일 제목 꾸미기 */
.single .entry-content h4 {
background: linear-gradient(
180deg,
#FFFFFF 70%,
#FEC91B70 30%
);
padding-top: 0.5em;
}
코드를 살펴보면, 내가 적용하고 싶은 제목에 위에서 아래로 (180 deg) 색깔을 적용하되, 처음 70%는 흰색, 나머지 30%만 반투명 노란색으로 설정하고 싶다는 내용입니다. (이해 할 필요없음)
- h4: 적용하고 싶은 문단 수준
- #FEC91B70: 부분을 고쳐줄 수 있습니다.
- 마지막 70은 70% 투명도를 나타냄
- 나머지 #FEC91B 부분을 원하는 색으로 교체
3. CSS 코드 워드프레스 블로그에 적용하기
원하는 CSS 코드를 만들었다면, 적용을 해야겠죠? 적용하는 방법은 상대적으로 간단합니다. 워드프레스 사용자 정의 섹션 > Additional CSS 섹션에 붙여넣어주시면 됩니다.

마치며
상당히 긴 글이 되었네요. 여러분의 꾸미고 싶은 욕구?가 조금은 해소 되셨길 바랍니다. 워드프레스에 대한 질문들, 특히 카덴스 테마에 대한 질문들은 워플 커뮤니티 질문쓰레드를 통해서 질문해주세요! 계속해서 업데이트 해보도록 하겠습니다.
여러분의 블로깅 생활이 워플을 통해 좀 더 슬기로워졌으면 좋겠군요! 모두 해피 블로깅 하시길 바랍니다. 🙂

온라인 수익화를 연구하는 워플과 데이터 분석을 연구하는 슬기로운통계생활의 창업자이며, 2021년 부터 온라인 사업을 운영해오고 있습니다. 500개가 넘는 영상을 제작했으며, 여러 회사들과 협업을 통해 강의를 판매하고 있습니다. 워플을 통해 워드프레스 웹사이트를 사용하여, 수익으로 이뤄지는 퍼널 만들기, SEO 및 커뮤니티 수익화를 연구하고 있습니다. 오래 지속가능한, 건전한 온라인 수익화를 추구합니다.