예전에는 웹에서 너비와 높이가 제한된 상황에서 이미지를 효과적으로 보여주는 것이 쉽지가 않았는데요. 그래서 이미지의 왜곡을 피하기 위해서 어쩔 수 없이 대신 배경 이미지를 사용해서 처리해야 하는 경우가 많았습니다. 하지만 다행히도 최근 몇 년 동안 CSS에서 이미지 요소를 다루는 방식이 상당히 개선되었습니다. 이번 포스팅에서는 이미지를 보여주는 방식을 결정하는 CSS의 object-fit 속성에 대해서 다양한 예제를 통해 최대한 쉽게 설명드리겠습니다. 이미지 본래 크기 HTML에서 <img> 요소를 사용할 때 너비나 높이를 지정해주
웹에서 이미지 아래나 옆에 의도치 않게 공백이 생겨서 애를 먹는 경우가 있는데요. 이번 포스팅에서는 언제 이렇게 이미지 주변에 불필요한 공백이 생길 수 있으며, 이러한 성가신 공백을 효과적으로 제거하는 다양한 요령을 알려드리겠습니다. 이미지 아래에 생기는 공백 <div>나 <figure>와 같은 HTML 요소 안에 이미지를 담고 있는 <img> 요소를 넣어보겠습니다. 이미지 아래에 살짝 공백이 생긴 것이 보이시나요? 🤨 이미지 아래에 이러한 공백이 생기는 이유는 <img> 요소의 display 속성이 기본적으로 inline이기 때
웹 페이지에서 이미지를 다룰 때 한 가지 파일로 모든 상황을 커버하기란 쉽지 않습니다. 모바일에서는 세로로 길쭉한 이미지가 잘 어울리는데 데스크톱에서는 가로로 넓은 이미지가 필요할 수 있고, 최신 브라우저에서는 AVIF로 용량을 줄이고 싶지만 구형 브라우저에서는 JPEG로 보여줘야 하죠. <img> 태그 하나로는 이런 분기를 처리할 수가 없습니다. HTML의 <picture> 요소는 바로 이런 문제를 해결하기 위해 등장했는데요. 화면 크기, 이미지 포맷 지원 여부, 해상도 등 여러 조건에 따라 브라우저가 최적의 이미지를 골라서 보여