워드프레스 소제목 h2 h3 태그 CSS 스타일 꾸미는 방법

이번 시간에는 워드프레스 소제목 h2 h3 태그 스타일을 꾸미는 방법에 대해서 알아보겠습니다. 한번만 적용하면 모든 글에 적용되므로 소제목에 변화를 주고 싶은 분들은 끝까지 읽어보시기 바랍니다.

백문이 불여일견, 먼저 소제목 변경 전과 변경 후를 비교해겠습니다.

변경 전 소제목 스타일은 제너레이트프레스 테마에서 기본적으로 제공하는 스타일입니다. h2 태그 소제목은 눈에 띄게 잘 보이지만 h3 태그 소제목은 본문 글과 별 차이가 없어 보입니다.

변경 후에는 h2 태그와 h3 태그 소제목이 한눈에 더 잘보이게 되었습니다. 글자색과 배경색, 테두리 선을 활용하여 소제목과 본문의 경계가 더 잘 구분되는 것을 볼 수 있습니다.

그럼 지금부터 워드프레스 소제목 h2, h3 태그 스타일을 바꾸는 방법에 대해 알아보겠습니다.

워드프레스 소제목 꾸미는 방법

1) 메뉴에서 외모 > 추가 CSS를 선택합니다.

2) 아래 CSS 코드를 복사 붙여넣기 하고 공개 버튼을 누릅니다.

/* 소제목 꾸미기 */
.single .entry-content h2 {

margin: 2em 0 0.6em 0;
font-weight: bold;
position: relative;
font-size: 25px;
line-height: 40px;
background: #fcc500;
border: 0px solid #fcc500;
padding: 7px 15px;
color: white;
border-radius: 5px 5px;
box-shadow: inset 0 0 1px rgba(53,86,129, 0.5);
font-family: 'Muli', sans-serif;

}

.single .entry-content h3 {
	
COLOR: #fcc500;
PADDING-BOTTOM: 10px;
TEXT-ALIGN: left;
BORDER-LEFT: #fcc500 5px solid;
padding: 2px 10px;
margin: 2em 0 0.5em 0;
BACKGROUND-COLOR: #FFF;
BORDER-BOTTOM: 0.1em solid #fcc500;
font-size: 21px;
font-weight: bold;
	
}

위 코드를 복사 붙여넣기만 하면 처음에 봤던 변경 후 모습과 동일하게 바뀐 것을 확인하셨을 겁니다. 여기서 각 CSS 코드의 속성 값을 수정하면 원하는 스타일로 수정할 수 있습니다.

h2 태그 소제목 CSS 수정하기

먼저 h2 태그에 적용한 CSS 스타일에 대해서 간단히 살펴보겠습니다.

  • margin: 상하 좌우 여백
  • font-weight: 글씨 두께
  • position: 요소 위치 (상대적)
  • font-size: 글씨 크기
  • line-height: 텍스트 줄 간격
  • background: 배경색
  • border: 경계
  • padding: 안쪽 여백
  • color: 글자색
  • border-radius: 테두리 모서리 라운드
  • box-shadow: 테두리 그림자
  • font-family: 글꼴

여기서 주로 사용하는 CSS는 [su_highlight]margin, font-size, background, color, border-radius[/su_highlight] 정도가 있습니다. 안에 속성 값을 조금씩 수정해보시기 바랍니다.

이전에 작성한 글에서 이미지 테두리와 그림자를 적용할 때 사용한 border와 box-shadow CSS도 보입니다. 아래 글을 참고하시면 CSS 속성 값이 어떻게 작용하는지 이해하는데 도움이 될 것입니다.

또는 이미지 테두리에 그림자 효과 적용하는 방법이 궁금하신 분은 아래 글을 읽어보시기 바랍니다.

✅ 워드프레스 이미지 테두리에 그림자 효과 적용하는 방법

h3 태그 소제목 CSS 수정하기

다음은 h3 태그 소제목에 적용된 CSS 스타일 입니다.

  • COLOR: 글자색
  • PADDING-BOTTOM: 아래 여백
  • TEXT-ALIGN: 글자 정렬 (왼쪽)
  • BORDER-LEFT: 테두리 왼쪽 라인
  • padding: 안쪽 여백
  • margin: 상하 좌우 여백
  • BACKGROUND-COLOR: 배경색
  • BORDER-BOTTOM: 테두리 아래쪽 라인
  • font-size: 글자 크기
  • font-weight: 글자 두께

h3 태그에서 자주 사용하는 CSS는 [su_highlight]COLOR, BORDER-LEFT, BORDER-BOTTOM, margin, font-size[/su_highlight] 정도입니다.

CSS 스타일을 조금씩 변경해보면서 본인이 원하는 스타일을 찾아보시기 바랍니다. 아직 CSS가 익숙하지 않은 분들은 글자색과 크기, 배경색만이라도 조절해보시기 바랍니다.

참고로 색상 코드는 이전 글에서 알려드린 HTML Color Codes 사이트에서 쉽게 확인 가능합니다.

글 마치며…

오늘은 CSS를 이용하여 워드프레스 소제목 h2, h3 태그를 꾸미는 방법에 대해서 알아봤습니다. 소제목은 구글 SEO 점수를 높이기 위해서 자주 사용하는 요소이니 이번 기회에 본인 스타일로 꾸며보시길 바랍니다.

답글 남기기