워드프레스 버튼, 이미지 밑에 고정 여백 넣는 방법 (CSS 코드 활용)

워드프레스 본문에 삽입된 버튼, 이미지와 이어지는 텍스트가 너무 붙어서 보이는 경우를 경험해 보셨을 겁니다.

여백 도구 기능을 활용해서 여백을 추가하는 방법을 고려해 볼 수 있지만, 버튼/이미지와 같이 자주 사용되는 요소에 매번 수동으로 여백을 추가하는 것은 번거로운 작업입니다.

이번 포스팅에서는 CSS 코드를 적용해서, 포스팅 본문에 있는 모든 버튼과 이미지에 여백을 추가하는 방법을 안내하겠습니다.

CSS 코드 예시

CSS 코드는 워드프레스 관리자 페이지 접속 후 외모 → 사용자 정의하기 → 추가 CSS 메뉴에서 입력할 수 있습니다.

현재 보고 계시는 블로그 포스팅에 적용된 모든 버튼 밑에 4em의 여백을 주는 CSS 코드입니다.

.wp-block-button {     
    margin-bottom: 4em  /* 하단 여백 4em 추가 */
			!important;   /* 다른 스타일보다 우선 적용 */
}

버튼을 삽입해 보겠습니다.

버튼 삽입 후 별도의 작업을 하지 않아도 보이는 것과 같이 버튼 밑에 여백이 적용된 것을 확인할 수 있습니다.

본문에 추가한 이미지를 가운데 정렬 시키고, 밑에 100px의 여백을 주는 CSS 코드입니다.

.wp-block-image {
    text-align: center;      /* 이미지 가운데 정렬 */
    margin-bottom: 100px;    /* 하단 여백 100px 추가 */
}

코드 적용 시 보이는 이미지의 모습입니다.

이미지가 가운데 정렬됐고, 이미지 밑에 충분한 여백이 적용되었습니다.

margin-bottom을 margin-top으로 변경해서 이미지 위에 여백을 줄 수도, margin-left, margin-right를 적용해서 좌우에 여백을 줄 수도 있습니다.

CSS 코드를 사용하면 여백뿐만 아니라 가운데 정렬과 같은 다양한 레이아웃 변경이 가능합니다.

아래는 워드프레스 블록 에디터에서 사용되는 기본 블록에 대한 CSS 클래스 중 자주 사용되는 클래스 목록입니다.

CSS 코드로 워드프레스 버튼과 이미지를 포함한 다양한 요소의 레이아웃을 변경할 수 있습니다.

지금까지 워드프레스 버튼과 이미지에 여백을 넣는 방법에 대해 알아보았습니다.

독자분들께서도 여백을 적절히 활용해서 본문 가독성을 높이고, 중요한 정보나 이미지를 부각시켜 포스팅 퀄리티를 높여 보시길 바랍니다.