워드프레스 기본 편집기인 블록 에디터를 이용하게 되면 블록과 블록 사이에 삽입된 여백이 실제 글을 발행 했을 때는 제거되는 것을 볼 수 있습니다. 문단과 이미지 사이에 여백을 입력하더라도 실제 발행된 글에서는 보이지 않습니다. 글과 이미지, 이미지와 이미지 사이에 여백을 삽입하기 위해서는 여백 도구를 이용하거나, shift+enter를 이용하여 여백을 삽입하게 됩니다. 이번 글에서는 글과 이미지, 이미지와 이미지 사이에 자동으로 여백을 삽입하는 방법에 대해 알아 보겠습니다.
1. 글과 이미지 사이 고정 여백 자동 삽입 (CSS 추가)
워드프레스 기본 편집기는 블록 단위로 내용이 입력이 됩니다. 편집기 화면에서 Enter를 치게 되면 편집기 화면 상에는 줄 바꿈이 되어 여백이 추가가 된 것처럼 보이지만 실제 발행한 글에서는 해당 내용이 삭제가 됩니다. 아래 그림처럼 문단과 이미지 사이에 여백이 블록 편집기 상에서는 존재하지만, 실제 발행된 글에서는 여백들이 사라지는 것을 볼 수 있습니다. 이전에 작성한 워드프레스 문단 간격 조정 방법 글 참고하세요.
블록 편집기 화면
실제 발행된 글
CSS 코드를 추가하기 위해서 워드프레스 관리페이지에서 [외모] – [사용자 정의하기] – [추가 CSS] 메뉴로 들어갑니다. 이미지를 가운데로 정렬하고 이미지 위쪽과 아래쪽에 50px의 여백을 삽입하는 코드는 아래와 같습니다. 해당 코드를 추가 한 [공개] 버튼을 클릭합니다.
.wp-block-image {
text-align: center; /* 이미지 가운데 정렬 */
margin-top: 50px; /* 상단 여백 50px 추가 */
margin-bottom: 50px; /* 하단 여백 50px 추가 */
}
아래는 실제 CSS 코드를 추가한 이미지입니다. 기존 한글 폰트를 설정한 코드 아래에 추가하였습니다.
아래는 실제 여백이 자동 삽입된 결과물입니다. 이번 예시에서 적용한 것처럼 이지지 전후에 margin-top, margin-bottom 을 통해 여백을 삽입한 것 뿐만 아니라, margin-left, margin-right 파라미터를 이용하여 이미지 좌/우에도 여백을 삽입할 수 있습니다.
2. 워드프레스 블록 CSS 항목들
전 단락에서 이미지에 적용한 것과 동일하게 워드프레스에서 사용하는 다른 블록에도 동일한 방법으로 여백들 설정할 수 있습니다. 아래는 블록 에디터에서 사용되는 블록들의 클래스 목록입니다. 필요한 항목에 대해 수정해서 사용하시기 바랍니다.
| 블록 클래스명 | 설명 |
| .wp-block-image | 이미지 블록 |
| .wp-block-button | 버튼 블록 |
| .wp-block-heading | 제목 블록 (예: <h2>, <h3> 등) |
| .wp-block-table | 표 블록 |
| .wp-block-audio | 오디오 블록 |
| .wp-block-cover | 커버 이미지 블록 |
| .wp-block-embed | 다양한 임베드 요소 (예: YouTube, Twitter) |
| .wp-block-file | 파일 다운로드 링크 블록 |
| .wp-block-gallery | 갤러리 블록 |
| .wp-block-group | 그룹 블록 |
| .wp-block-list | 목록 블록 |
| .wp-block-media-text | 미디어와 텍스트를 함께 표시하는 블록 |
| .wp-block-paragraph | 단락 블록 |
| .wp-block-quote | 인용문 블록 |
| .wp-block-separator | 구분선 블록 |
| .wp-block-shortcode | 쇼트코드 블록 |
| .wp-block-video | 비디오 블록 |
| .wp-block-columns | 다중 열 레이아웃에 사용되는 블록 |
| .wp-block-code | 코드 블록 |
| .wp-block-preformatted | 서식이 지정된 텍스트 블록 |
| .wp-block-pullquote | pullquote 스타일의 인용문 블록 |
| .wp-block-rss | RSS 피드 블록 |
| .wp-block-verse | 시 또는 구절 스타일 텍스트 블록 |
이번 글에서는 블록 편집기에 사용되는 블록에 여백을 삽입하는 방법에 대해 알아 보았습니다.