네이버 카페 대문 이미지 스페이스바(공백) 생기는 문제 해결 방법

스페이스바(공백) 생기는 문제

네이버 카페 대문 이미지를 파일첨부로 추가하거나 게시글을 복사해서 추가하게되는 경우

이미지 사이에 간격이 생기는 문제가 있는데 수정 방법을 찾아보니 이렇게 해결할 수 있었다.

 

연속되는 이미지를 사용할 때 이렇게 간격이 생기면 안되기 때문에 수정이 필요했다.

 

 

 

원인 파악 하기

이미지 사이에 여백이 생기는 이유
기본적으로 HTML의 img 요소는 인라인 요소로 간주되기 때문에
브라우저는 이미지 사이에 작은 간격을 만들 수 있다고 한다.

 

 

 

수정 방법

방법 1: display: block 사용

방법 2: float 사용

방법 3: font-size를 0으로 설정

 

gpt한테 원인과 방법을 물어보고 3번의 방법을 사용하였다.

 

카페 대문 에디터에서 html을 선택하고 <div style="font-size: 0;">  </div>를 추가해주었다.

이미 추가되어 있을 경우 값만 0으로 수정해주면 된다.

<div style="font-size: 0;">
    <img src="image1.png" style="width: 155px; height: 437px; border:0; vertical-align:top;">
    <img src="image2.png" style="width: 509px; height: 437px; border:0; vertical-align:top;">
    <img src="image3.png" style="width: 156px; height: 437px; border:0; vertical-align:top;">
</div>

 

그럼 이렇게 이미지가 붙어서 깔끔하게 수정된다!