워드프레스 제목 꾸미기
위와 같이 워드프레스 소제목 스타일을 꾸미지 않으면 사이트의 가독성이 좋지 않습니다.
보이는 정보가 이해하기 어렵다면(가독성이 좋지 않다면) 방문자는 해당 정보가 좋은 정보라고 못 느끼고 사이트를 이탈할 수 있습니다.
그렇기 때문에 글을 구조적으로 정리하는 것은 중요하며, 그러기 위해서는 위와 같이 제목을 꾸며 내용과 확실하게 구분 시켜야 합니다.
이번 포스팅에서는 제목을 꾸미는 방법에 대해 알아볼 것입니다. 참고하여 여러분에게 맞는 제목 스타일을 사용하시기 바랍니다.
1. 테마
몇 몇의 테마에서는 소제목 스타일을 변경할 수 있는 옵션이 제공됩니다.
(보통 무료 버전에서는 타이포그래피 옵션이 제공되지 않습니다.)
GeneratePress 테마의 유료 버전인 GP Premium이 설치된 경우, [사용자 정의하기 > Typography > Headings]에서 소제목 글 스타일을 지정할 수 있습니다.
(Typography 메뉴가 표시되지 않는다면 [외모 > GeneratePress]에서 Typography 모듈을 활성화하시기 바랍니다.)
지정 가능한 옵션은 제한적인데요. 다음과 같은 스타일을 설정할 수 있습니다.
– Font family (글꼴 계열)
– Font weight (글꼴 두께)
– Text transform (텍스트 변환)
– Font size (글꼴 크기)
– Line height (행간)
– Bottom margin (아래쪽 여백)
2. CSS
CSS(Cascading Style Sheets)는 웹 디자인과 레이아웃을 정의하는 언어로, 웹 페이지를 시각적으로 꾸밀 때 사용되며, 텍스트의 색상, 폰트 스타일, 요소의 배치, 크기 조정, 간격 설정 등 웹사이트의 다양한 스타일 옵션을 지정할 수 있게 해주는 기능입니다.
테마 옵션에서 헤딩 스타일을 지정할 수 있는 옵션이 제공되지 않거나 보다 정교하게 스타일을 지정하고 싶은 경우, CSS 코드를 통해 제목 스타일을 변경할 수 있습니다.
2.1 CSS 만들기
기본적인 CSS 지식만 알고 있으면 CSS 코드를 스스로 만들거나 스타일을 변경할 수 있습니다.
2.1.1. 제목 스타일을 꾸밀 때 사용되는 코드
– .single .entry-content h2: 설정하고자 하는 제목 종류 변경(h1, h2, h3, h4, h5, h6)
글자
– font-weight: 글자 두께[lighter, normal, bold(600) 및 100~700까지 숫자로 디테일 설정 가능]
– font-size: 글자 크기
– color: 글자 색상
– text-align: 글자 정렬(left, center, right) – font-family: ‘Muli’, sans-serif; / 폰트 패밀리 설정
테두리
– border: 테두리(제목 블록 영역)
– ex) border: 1px, solid #000000
→ 테두리 두께를 1px, 테두리 선 스타일은 solid(실선), 테두리 선 색은 #000000(검정)으로 적용한다는 의미.
* solid(실선)를 dotted(동그란 점), dashed #aaa(점선), dashed(네모난 점), double(두 줄)로 바꿀 수도 있습니다.
– border-width: 테두리 두께
– border-left: 테두리 왼쪽
– border-right: 테두리 오른쪽
– border-top: 테두리 위
– border-bottom: 테두리 밑
– background: 박스 색상(테두리 안쪽)
– background-color: 박스 색상
여백
– margin: 테두리 바깥쪽 여백 크기(소제목 본문 사이 여백)
– padding: 테두리 안쪽 여백
– 테두리와 마찬가지로 -left, -right, -top, -bottom를 붙일 수 있음
테두리 모서리 곡률
– border-radius: 모든 모서리 곡률(왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서)
– border-top-right-radius: 박스 우측 상단 곡률
– border-top-left-radius: 박스 좌측 상단 곡률
– border-bottom-right-radius: 박스 우측 하단 곡률
– border-bottom-left-radius: 박스 좌측 하단 곡률
※ 둥글기가 심하면 자칫 클릭 버튼처럼 보일 수 있으니 적당히 적용하시기 바랍니다.
기타
– box-shadow: 박스(테두리) 그림자 설정
– position: relative; / 포지션 설정
– line-height: 선 높이
– 여러 선을 입력할 수 있는 경우, 선 간격을 의미함
– display: inline-block; / 소제목 서식 길이 자동 조절 기능
– h3, h4 같은 더 작은 소제목에 사용하면 굉장히 유용함.
background: linear-gradient은 두 개 이상의 선을 직선에 따라 점진적으로 변화 시키는 이미지를 만들어 내는 설정입니다. 보통 그라데이션 효과를 넣을 때 사용하며, 형광펜 효과를 넣을 수도 있습니다.
– background: linear-gradient(to right, #FF4081, #F06292); / 그라데이션(오른쪽 방향, #FF4081 색상으로 시작해서 #F06292 색상으로 끝난다.)
– background: linear-gradient(180deg, #FFFFFF 70%, #FEC91B70 30%); / 형광펜(180deg 방향, 70%는 #FFFFFF 색상, 30%는 #FEC91B70 색상)
– deg는 기울기이며, 기본값은 to bottom 입니다. (to bottom : 0deg, to right : 90deg, to top : 180deg, to left : 270deg)
위 코드를 참고하여 ‘.single .entry-content h2 { }‘ 대괄호 안에 사용할 코드들을 하나씩 넣어서 코드를 만드시면 됩니다.
h2를 h3, h4, h5 등으로 수정해서 각 헤딩(소제목) 별로 디자인을 적용할 수도 있습니다.
* 각 헤딩은 서로 다른 역할을 하는데, 동일한 소제목 스타일을 사용하게 되면 우선순위를 알아보기 힘들 수 있습니다. 그러니 각 H태그에 따라서 적절한 디자인으로 변경해주는 것을 추천 드립니다.
항목 명을 기입하고 내용을 작성할 때는 :(콜론)을 사용해서 내용을 기입하고, 여러 개의 항목을 추가할 때에는 한 개의 항목 설정이 끝날 때마다 뒤에 ;(세미콜론)을 붙여주시면 됩니다.
예시) .single .entry-content h2 { background-color: #084B8A; color: #fff; padding: 10px 20px; border-top-right-radius: 20px; border-top-left-radius: 20px;}’
코드를 만드는 게 어렵다면 아래 2.3 제목 스타일 항목을 참고해 보시기 바랍니다.
2.2. css 코드 적용하기
만든 코드는 [워드프레스 관리자 메뉴 > 사용자 정의 > 추가 CSS]에 입력하시면 됩니다.
테마에 적용할 경우, 업데이트 시 입력했던 내용이 초기화되기 때문에 차일드테마에 적용하는 것을 추천 드립니다.
그리고 CSS코드를 만지다가 보면 사이트가 깨지는 현상이 간혹 발생하는 경우가 있으니, 그런 경우를 대비해서 항상 백업을 해두는 습관을 기르시는 것을 추천 드립니다.
2.3 제목 스타일
제목은 CSS 코드에 따라 다양하게 디자인할 수 있습니다.
아래 예시를 참고해보시기 바랍니다.
2.3.1. 박스형 스타일
제목이 박스로 감싸지는 형태입니다.
/* 박스형 스타일 제목 꾸미기 */
.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(제목 수준) – 워드프레스의 모든 글의 h2태그는 위와 같은 소제목 스타일로 변경됩니다.
– border-radius : 둥글게 처리
– box-shadow(그림자 처리) : (미세하게)
* 네이버 색상 팔레트를 통해 자신이 원하는 컬러를 선택하여 색상 코드를 얻을 수 있습니다.
* 네이버 CSS 색상 표 생성기를 통해 컨셉에 맞는 색상 코드를 확인할 수 있습니다.
박스형 스타일의 두 번째 예시 CSS 입니다.
.entry-content h2 {background-color: #4374D9; color: #fff; padding: 10px 20px; border-top-right-radius: 15px; border-top-left-radius: 15px; }
설명한 부분은 생략하고 새롭게 반영되는 부분만 설명 드리도록 하겠습니다.
– padding : 10px(제목 상하) 20px(제목 앞쪽 여백)
padding은 소제목과 박스의 간격을 나타냅니다.
– border-top-right-radius(박스 우측 상단 곡률) : 15px
– border-top-left-radius(박스 좌측 상단 곡률) : 15px
숫자에 따라 곡률을 변경할 수 있습니다.
* 말풍선 박스 하단에 곡률을 주고 싶으면 top 대신 bottom으로 변경하시면 됩니다.
2.3.2. 그라데이션 박스형
박스형 스타일에 좌/우 라운드로 처리하고, 배경 색상을 그라데이션으로 처리했습니다.
.entry-content h2 { background: linear-gradient(to bottom right, darkblue, skyblue); color: #fff; padding: 10px 20px; border-top-left-radius: 15px; border-bottom-right-radius: 15px; }
– background : linear-gradient(to bottom right, darkblue, skyblue) :
그라데이션 기능이 들어가기 때문에 background 속성을 사용하며, background-color를 사용하지 않습니다.
to bottom right는 우측 하단으로 그라데이션이 적용된다는 뜻이며, darkblue 색상으로 시작해서 skyblue 색상으로 마무리 된다는 것입니다. 색상 변경을 원하시면 색상 명을 darkblue와 같이 영어로 적어주시거나 #4374D9와 같은 색상 코드를 적어주시면 됩니다.
2.3.3. 점선 박스형
제목을 점선 박스로 감싸는 형태로, 점선은 빨간색 내부 색상은 옅은 파란색으로 설정되었습니다.
.entry-content h2 {background: #B2CCFF; padding: 15px 20px; border: 2px dashed #aaa; border-color:#FF0000; }
– background : #B2CCFF(점선 사각 박스의 배경 색상)
– padding(제목과 박스의 간격) : 15px(제목 상하 간격) 20px(제목 앞쪽 간격)
– border : 2px(점선 두께) dashed #aaa(라인을 점선으로 변경하는 코드)
– border-color : #FF0000(점선의 색상)
2.3.4. 색상 없는 라운드 박스형
제목을 사각 라운드 박스로 감싸는 형태입니다. 모든 모서리가 라운드로 처리되고, 배경 색상이 없습니다.
.entry-content h2 {border:2px solid #4374D9; padding: 10px 20px; border-radius: 15px }
– border : 2px(박스 테두리 두께) solid(타입) #4374D9(테두리 색상)
– border-radius(모서리 곡률) : 15px
모든 테두리를 한번에 변경할 땐 border-radius 코드를 사용하시면 됩니다.
2.3.5. 왼쪽 바 + 밑줄
제목 아래 부분을 라인으로 그은 형태입니다. 소제목 앞 부분이 작은 박스로 처리되고, 배경 색상은 없습니다.
/* 왼쪽 바 + 밑줄 스타일 제목 꾸미기 */
.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;
}
– border-left(왼쪽 바) : #2E5D4B(바 색상), 10px(바 두께), solid(타입)
– border-bottom(밑줄) : #2E5D4B(밑줄 색상), 2px (밑줄 두께), solid(타입)
왼쪽 바 + 밑줄 스타일의 두 번째 예시 CSS 입니다.
.entry-content h2 { color: #000000; border-left: 15px solid #688FF4; border-bottom: 2px solid #688FF4; padding: 5px 10px; }
– border-left(왼쪽 바) : 15px(바 두께) solid(타입) #688FF4(바 색상)
– border-bottom(밑줄) : 2px(밑줄 두께) solid(타입) #688FF4(밑줄 색상)
2.3.6. 왼쪽 바
소제목 앞 부분만 작은 박스로 처리되고, 배경 색상이 없습니다.
.entry-content h2 { color: #000000; border-left: 10px solid #0060b6; padding: 5px 10px; }
– border-left(왼쪽 바) : 10px(박스 두께) solid #0060b6(색상)
2.3.7. 위 아래 라인
위, 아래 테두리에만 줄을 표시하고 줄의 두께가 다르게 표현되는 소제목 디자인입니다.
테두리 바깥쪽 여백을 주기 위해 margin값을 줬는데요, 숫자 4개는 차례대로 위-오른쪽-아래-왼쪽 순으로 시계방향 순서입니다.
.single .entry-content h2 {
color: #08298A;
padding: 6px 10px;
margin: 50px 0 20px 0;
background-color: #fafafa;
border-top: 3px solid #434343;
border-bottom: 1.5px solid #434343;
}
2.3.8. 아래 라인
제목 아래에 라인만 있는 형태입니다.
.entry-content h2 {border-bottom: 2px solid #4374D9; padding: 5px 10px; }
– border-bottom(밑줄) : 2px(라인 두께) solid #4374D9(라인 색상)
2.3.9. 왼쪽 바 + 색상 없는 박스형
제목을 박스로 감싸며 왼쪽에 작은 박스가 있는 형태입니다.
.entry-content h2 {border:2px solid #4374D9; border-left: 15px solid #4374D9; padding: 10px 20px;}
– border : 2px(사각 박스 라인 두께) solid #4374D9(라인의 색상)
– border-left(왼쪽 바) : 15px(작은 박스 두께) solid #4374D9(작은 박스 색상)
2.3.10. 왼쪽 바 + 라인 점선
제목 아래에 점선과 라인 왼쪽 작은 박스가 함께 있는 형태입니다.
.entry-content h2 {border-bottom: 2px dashed #aaa; border-color:#4374D9; border-left: 15px solid #4374D9; padding: 5px 10px; }
– border-bottom : 2px(점선의 두께) dashed #aaa(라인을 점선으로 변경하는 코드)
– border-color : #4374D9(점선의 색상)
– border-left : 15px(작은 박스 두께) solid #4374D9(작은 박스 색상)
– padding : 5px(글자의 상하) 10px(앞쪽 간격)
2.3.11. 점선 라인
제목 아래에 점선만 있는 형태입니다.
.entry-content h2 {border-bottom: 2px dashed #aaa; border-color:#4374D9; padding: 5px 10px; }
2.3.12. 형광펜 스타일 제목
형광펜 스타일 형태 입니다.
/* 형광펜 스타일 제목 꾸미기 */
.single .entry-content h4 {
background: linear-gradient(
180deg,
#FFFFFF 70%,
#FEC91B70 30%
);
padding-top: 0.5em;
}
코드를 살펴보면, 제목 위에서 아래로(180 deg) 색깔을 적용하되, 처음 70%는 흰색, 나머지 30%만 반투명 노란색으로 설정하고 싶다는 내용입니다.
마치며
여기까지 제목 스타일을 만드는 법과 다양한 스타일에 대해 살펴보았는데요.
제목을 꼭 꾸밀 필요는 없지만, 제목을 꾸며 글에 대한 가독성을 높이면 방문자가 조금 더 신뢰를 할 수 있다고 생각합니다.
이는 곧 방문자들의 체류 시간이 늘어나게 만들고 SEO에도 긍정적인 작용을 할 것입니다.
가독성을 위해 폰트도 바꾸면 좋지만 그건 나중에 알아보도록 하겠습니다.
CSS를 만드시기 어렵고 귀찮으신 분들은 여기 ‘펭수의 워드프레스 보물창고‘라는 사이트에 있는 제목 스타일을 적용 시켜보시기 바랍니다.
(개인적으로는 다른 워드프레스 사이트와 똑같은 모습으로 자신의 사이트를 운영하는 것보다는 자신의 블로그와 어울리는 자신만의 스타일로 운영하는 것을 추천 드립니다.)
해당 사이트에서는 제목 스타일 뿐만 아니라 다양한 도구를 지원하는 것 같습니다.
읽어주셔서 감사합니다.🙂
도움이 되셨다면 밑에 공감 버튼(❤)을 눌러주시면 감사하겠습니다.🙏
공감 버튼은 저에게 큰 힘이 되고 콘텐츠의 방향성을 잡는 데에도 도움이 됩니다.👍
궁금한 점이나 원하시는 주제가 있으시다면 댓글 남겨주세요.
구글 검색 키워드(첫 페이지 순) : 워드프레스 (소)제목 [꾸미기/스타일], 워드프레스 generatepress (소)제목 꾸미기/스타일
감사합니다!
덕분에 웹사이트에 더 예쁜 디자인을 적용하게 되었네요!
css지식은 부족한 저인데, 더 발전하니 뿌듯합니다.
어쨋든 좋은 글 감사합니당!
제 글이 도움이 되었다니 다행입니다!