워드프레스 본문 이미지와 텍스트 사이 간격 늘리기 - 워드프레스 정보꾸러미
베스트셀링 인기 워드프레스 테마 Top 30 자세한 정보

워드프레스 본문 이미지와 텍스트 사이 간격 늘리기

Last Updated: 2022년 11월 19일 | 댓글 남기기
  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

워드프레스가 업데이트되면서 블록 에디터로 작성된 글에 삽입된 이미지와 텍스트 간격이 너무 좁은 현상이 나타나는 버그가 보고되어 있습니다. 본문 이미지와 텍스트 간 간격은 간단한 CSS로 조정이 가능합니다.

워드프레스 본문 이미지와 텍스트 사이 간격 늘리기

워드프레스 본문에서 이미지 아래 간격이 너무 좁아서 이미지 아래의 문단이나 제목 등의 요소와 너무 가까운 경우가 있습니다. 이 경우 다음과 같은 CSS 코드를 사용하여 이미지 아래 여백을 추가할 수 있습니다.

/* 본문 이미지와 텍스트 사이 간격 */
/* Margin between images and text in WordPress single posts */

.single .wp-block-image {
    margin-bottom: 25px;
}

위의 코드를 워드프레스 관리자 페이지 » 외모 » 사용자 정의하기 » 추가 CSS에 추가할 수 있습니다. (숫자를 적절히 조정하여 적절한 여백을 적용하도록 합니다.)

상기 CSS 코드를 복사하여 붙여넣기 해도 이미지 아래 간격이 늘어나지 않으면, 복붙하는 대신 위의 코드를 직접 타이핑하여 입력하여 문제가 해결되는 살펴보시기 바랍니다.

워드프레스 본문 이미지와 텍스트 사이 간격 조정하기

이 문제가 인기 뉴스, 매거진 테마인 뉴스페이퍼(Newspaper)에서 나타나고 있습니다. 다른 테마에서도 이와 같은 현상이 나타날 수도 있습니다. 이 블로그에 설치된 GeneratePress 테마의 경우 대부분 사이트에서 이 현상이 나타나지 않았지만 일부 글에서 이런 현상이 목격되기도 하네요.

이미지 블록 아래에 간격이 너무 좁으면 위의 코드로 테스트해보시고, 잘 작동하지 않을 경우 아래 댓글을 통해 사용 중인 테마와 해당 사이트 URL을 남겨 주시면 정확한 코드를 확인해드리겠습니다.

참고로 기본적인 CSS는 그리 어렵지 않고 배우는 데 시간도 그리 많이 소요되지 않습니다. CSS에 대해 잘 모르는 경우 다음 글을 참고하여 CSS를 배워보시기 바랍니다. 생활코딩 같은 무료 동영상 강의를 이용하고 CSS 관련 서적을 구입하여 레퍼런스로 활용할 수 있습니다.

본문 이미지 가운데 정렬하기

참고로 블록 에디터(구텐베르크)로 작성된 글에서 모든 본문 이미지를 가운데 정렬(중앙 정렬)하고 싶은 경우 다음과 같은 CSS 코드를 사용할 수 있습니다.

/* 모든 본문 이미지 가운데 정렬하기 */
/* Center align all images in WordPress */

.single .wp-block-image img {
display: block;
margin: 0 auto;
}

-또는-

.single .wp-block-image {
text-align: center;
}

마찬가지로 사용자 정의하기 아래의 추가 CSS 섹션에 위의 코드를 입력하시기 바랍니다.

이미지에 음영 적용하기

이 블로그와 같이 본문 이미지에 음영 효과(그림자 효과)를 적용하고 싶은 경우 다음과 같은 코드를 적절히 응용할 수 있습니다.

/* 워드프레스 본문 이미지에 음영 효과 적용하기 */
/* Apply box shadow effect on images in WordPress single posts */

.single .entry-content img {
    box-shadow: 0px 0px 20px #000;
    -webkit-box-shadow: 0px 0px 20px #000;
    -moz-box-shadow: 0px 0px 20px #000;
}

참고



댓글 남기기

Leave a Comment

카페에서 워드프레스 정보를 공유하실 수 있습니다.

Thanks!