이전 워드프레스 소제목 스타일 4가지 만들기에서 1가지를 추가하여 총 5가지의 소제목 만드는 방법을 안내해 드렸습니다. 이번에 소제목 스타일 5가지를 추가하여 만드는 방법을 새롭게 안내해 드리겠습니다. 함께 하나씩 만들어 보겠습니다.
목차
1. 워드프레스 소제목 스타일 5가지
이미 워드프레스 소제목 스타일 4가지 만들기를 보셨다면 이어서 확인해 보시고 마음에 드는 소제목 스타일을 선택하시면 됩니다.
처음 이 글을 보신다면 이전 글을 먼저 확인해 보신 후 어떻게 변경하는지 기본적인 내용을 먼저 확인하는게 도움이 됩니다. 이전 글은 아래 “워드프레스 소제목 스타일 4가지 만들기”를 클릭하시면 내용을 확인해 볼 수 있습니다.
이전 글을 먼저 확인 하셨다면 이번 글 내용을 천천히 확인해 보시고 하나씩 따라 만들어 보시면 됩니다. 색상, 크기는 본인이 원하는 스타일에 따라 변경하여 사용하시면 됩니다.
또한 이번 글에서는 소제목 스타일에 들어가는 글자 관련 코드는 모드 제거 했습니다. 본인이 원하는 폰트 및 폰트 색상을 워드프레스에 글 쓸때 지정 하시면 자동으로 소제목에 반영이 됩니다.
워드프레스 소제목 스타일 변경을 위해 추가 CSS에 들어가신 후 아래 코드를 본인의 조건에 맞춰서 붙여넣기 하시고 공개를 클릭하시면 설정이 완료됩니다.
1-1. 점선 사각 박스
제목을 점선 박스로 감싸는 형태입니다. 아래 그림과 같이 모두 직사각형 형태로 처리했습니다. 점선은 빨간색으로 내부 색상은 옅은 파란색으로 설정했습니다. 색상은 본인이 원하는 형태로 변경하시면 됩니다.
.entry-content h2 {background: #B2CCFF; padding: 15px 20px; border: 2px dashed #aaa; border-color:#FF0000; }.entry-content h2 : h2는 소제목의 h태그를 의미합니다. h태그 순서에 따라 본인이 원하는 태그를 넣어주시면 됩니다. 워드프레스 소제목은 CSS 설정에서 변경하는데 한번 변경하면 내가 작성한 모든 글에 동시 적용이 됩니다. h2태그를 점선 사각 박스로 설정하면 워드프레스의 모든 글의 h2태그는 위와 같은 소제목 스타일로 변경됩니다.
background: #B2CCFF : 점선 사각 박스의 배경 색상을 나타냅니다. #B2CCFF는 색상 코드입니다. 색상은 본인이 원하는 대로 바꾸시면 됩니다.
padding: 15px 20px : 제목과 박스의 간격을 나타내며, 앞쪽 15px는 글자 상하 간격, 뒤쪽 20px는 글자 앞쪽 간격을 나타냅니다. 본인이 원하는 간격으로 조절해서 사용하시면 됩니다.
border: 2px dashed #aaa : 2px는 점선의 두께를 나타내며, dashed #aaa 라인을 점선으로 변경하는 코드입니다. 여기서는 점선의 두께만 본인이 원하는 두께로 설정해서 사용하시면 됩니다.
border-color:#FF0000 : 점선의 색상을 나타냅니다. #FF0000는 색상코드이며 본인이 원하는 대로 바꾸시면 됩니다.
1-2. 사각 박스 앞 작은 박스
제목을 사각 박스로 감싸며 사각 박스 앞쪽에 작은 박스가 있는 형태입니다.
.entry-content h2 {border:2px solid #4374D9; border-left: 15px solid #4374D9; padding: 10px 20px;}위쪽의 설명 중 중복된 부분은 위쪽 설명을 참고 해 주시기 바라겠습니다.
border:2px solid #4374D9 : 2px는 사각 박스 라인의 두께이며, #4374D9은 라인의 색상 코드입니다.
border-left: 15px solid #4374D9 : 15px는 사각 박스 앞 작은 박스의 두께이며, #4374D9은 작은 박스의 색상 코드입니다.
1-3. 작은 박스 없는 라인
제목 아래에 라인만 있는 형태입니다.
.entry-content h2 {border-bottom: 2px solid #4374D9; padding: 5px 10px; }
border-bottom: 2px solid #4374D9 : 2px는 라인의 두께이며, #4374D9은 라인의 색상 코드입니다.
1-4. 라인 점선
제목 아래에 점선과 라인 앞쪽 작은 박스가 함께 있는 형태입니다.
.entry-content h2 {border-bottom: 2px dashed #aaa; border-color:#4374D9; border-left: 15px solid #4374D9; padding: 5px 10px; }border-bottom: 2px dashed #aaa : 2px는 점선의 두께를 나타내며, dashed #aaa 라인을 점선으로 변경하는 코드입니다. 여기서는 점선의 두께만 본인이 원하는 두께로 설정해서 사용하시면 됩니다.
border-color:#4374D9: #4374D9는 점선의 색상 코드입니다.
border-left: 15px solid #4374D9 : 15px는 앞쪽 작은 박스의 두께이며, #4374D9는 작은 박스의 색상코드입니다.
padding: 5px 10px: 글자의 5px는 상하, 10px 앞쪽 간격을 나타냅니다.
1-5. 작은 박스 없는 점선 라인
제목 아래에 점선만 있는 형태입니다.
.entry-content h2 {border-bottom: 2px dashed #aaa; border-color:#4374D9; padding: 5px 10px; }코드 내용은 위쪽을 참고하시면 될 것 같습니다.
이상 1편에 이어 추가로 워드프레스 소제목 스타일을 알려드렸습니다. 본인에게 가장 적합한 소제목 스타일을 구성하셔서 사용하시면 될 것 같습니다.
소제목 스타일은 글의 가독성을 높여주기 때문에 반드시 사용할 것을 추천드리며, 가독성이 높아지면서 여러가지 장점을 얻을 수 있습니다.
H2, H3, H4 등 각각의 H태그에 맞게 소제목 스타일을 구성해 보시기 바랍니다.
▶ 함께 읽으면 도움이 되는 글
-워드프레스 메뉴바 만드는 방법(GeneratePress)
