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

워드프레스 버튼, 이미지 밑에 고정 여백 넣는 방법 (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 클래스 중 자주 사용되는 클래스 목록입니다.

블록 클래스명설명
.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-pullquotepullquote 스타일의 인용문 블록
.wp-block-rssRSS 피드 블록
.wp-block-verse시 또는 구절 스타일 텍스트 블록

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


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

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

워드프레스 관련 포스팅

✅워드프레스 Rank Math SEO 플러그인 – 랭크매쓰 점수 100점 받는 방법
✅워드프레스 특성 이미지(Featured image)란 무엇인가? 최적의 크기는? 1200 x 630?

Leave a Comment