image css grid로 여백없이 정사각형 비율로 넣는 법(feat : img태그를 감싼 div에 생긴 이상한 여백없애기)

해결방법
(※ 참고 : styled-component 사용)

// 이미지리스트 전체를 감싸는 컨테이너박스
const ImgListContainer = styled.ul`
    display: grid;
    grid-template-columns: repeat(4, 1fr); // 본인은 4*3으로 만들어야 해서 주었다
    grid-template-rows: repeat(3, 1fr);
    justify-items: center;
    align-content: center;
`;
// 각 이미지가 하나씩 들어가는 박스
const ImgBox = styled.div`
    position: relative; //삭제버튼만드느라 넣은 것. 없어도 됨
    aspect-ratio: 1/1; // 가로세로비율. 1대1비율로 넣어야 정사각형이 된다 
`;
// 들어갈 이미지
const Img = styled.img`
    width: 100%;
    height: 100%;
    object-fit: cover; // 원본의 가로세로비율을 최대한 유지하면서 부모컨테이너를 채운다
`;

중요

위처럼 넣고 나면 분명히 비율은 맞는데 div와 img사이에 요상한(?) 여백이 생긴다.

img태그는 inline요소인데 인라인요소를 사용하면 보이지 않는 라인박스를 생성한다고 한다.

# 인라인요소의 수직정렬방식

• 비표준모드(IE7이하, doctype선언X) ▶ 박스의 border bottom에 맞추어 정렬
• 표준모드(doctype선언) ▶ 기준선(baseline)에 맞추어 정렬

※ 기준선(baseline) : p, q, j, y 등 꼬리부분을 뺀 밑선

인라인요소인 img태그로 인해 생긴 수직정렬이 여백의 원인이므로 img태그를 block속성으로 바꾸어주면 된다.

나는 아예 프로젝트전체에 적용되도록 index.css에 추가했다.

img {
    display: block;
}

출처 : https://aboooks.tistory.com/193

출처 : https://aboooks.tistory.com/169

결과물

짠 이렇게 이쁜 정사각형으로 잘 나오는걸 볼 수 있다

---

분명히 예전에 해봤는데 기능구현보다 더 오래걸렸던 css... 이제 다시는 안까먹을듯