워드프레스 이미지 하단 문단 여백 조절 방법에 대해서 알아보자. 워드프레스의 국민 테마인 Generate Press(제네레이트 프레스)가 6.1버전으로 업데이트 되었는데 테마의 안전성이 높아진 반면 본문에 이미지를 삽입했을 경우 이전과 다르게 이미지 하단 글자가 사진에 딱 달라붙어 가독성이 떨어지는 현상이 발생했다.
css설정등에 아려운 유저들은 대부분 이미지 하단에 문단을 삽입한다거나 엔터를 활용해 줄을 만들어 이미지와 문단사이의 여백을 만들고 있을 것이다. 그런데 이런 수작업이 사진이 1장만 들어가면 괜찮은데 여러장 들어갈 경우 정말 시간낭비 체력낭비다.
이제 일일이 이런 번거로운 작업 필요없이 CSS 추가를 통해 자동으로 이미지와 글자사이에 여백이 생기도록 만들어보자.
워드프레스 이미지 하단 여백 설정방법
- 워드프레스 관리자 외모탭
- 사용자 정의하기
- 추가 CSS 선택
- “.single .wp-block-image {margin-bottom: 15px;}” 삽입
- 공개 선택
워드프레스 메인화면에서 왼쪽 메뉴에서 ‘외모’에 마우스를 가져다대면 추가 메뉴가 생성된다. 여기에서 ‘사용자 정의하기’를 선택한다.
사용자정의하기 메뉴 아래에 ‘추가 CSS’가 보인다. 선택하자.
/이미지하단여백조절/
.single .wp-block-image {margin-bottom: 15px;}
위 코드를 그대로 복사해서 추가 CSS에 붙여넣기한다. 복사 붙여넣기 대신 직접 타이핑해도 무관하며 위쪽 파란색 ‘공개’를 눌러 저장한다.
위 사진처럼 이미지와 글이 딱 붙지 않고 여백이 자동으로 생기게 된다. 이제 포스팅에 더 집중하면 되는 것. 위 코드에서 15px는 임의의 숫자이므로 자신의 홈페이지 환경에 맞추어서 알맞게 수정해주면된다.
이미지와 글 사이의 간격 확인을 위해서는 포스팅을 개시하지 않고 미리보기 기능을 활용하면 확인하기가 편하다.
