[Ez to Play / Error Note] 이미지 태그로 감쌌을 때 생기는 공백 문제

Ez to Play 프로젝트 당시 세로로 움직이는 캐러셀도 만들었었다. 

 

직면한 문제

캐러셀이 이쁘게 보이려면 배너가 다닥다닥 붙어있어야 하는데, 배너를 누르면 해당 페이지로 이동하도록 링크를 주기 위해서 태그로 감쌌더니 아래와 같이 간격이 생겨버린다. 

 

원인

훌륭한 블로그 글을 발견하여 금방 해결했는데, 이 블로그에 따르면 img 태그의 display는 기본적으로 inline이고, inline은 문자의 정렬을 맞추기 위해 가상의 기준선이 존재하며, g 또는 y와 같이 기준선 아래로 내려가는 문자를 위해 아래 공간이 어느정도 비어있게 된다고 한다. 하지만 이미지는 대문자처럼 취급되어 베이스라인(기준선)에 붙어 있으니 내 상황처럼 이미지 여러개를 세로로 붙이려 하면 간격이 생기게 되는 것이다.

 

해결

여러 해결법이 존재하는데, 나는 vertical-align 속성에 bottom을 주어서 해결했다. 

bottom 또는 top을 주게되면 이미지의 정렬 기준이 베이스라인이 되지 않고 상,하단에 붙게 되어 이미지 사이의 간격이 생기지 않게 된다.  

 



참고한 블로그에는 다른 방법도 제시되어 있는데, img display를 block으로 바꾸거나 img를 감싸고 있는 태그에 line-heigth를 0으로 주는 방법이다. 다만 display를 block으로 바꾸면 block은 한 줄을 차지하기 때문에 이미지를 좌우로는 연결할 수 없게 된다.

 

 


 

참고자료

 

https://www.daleseo.com/css-img-extra-space/