LayoutShift
-
[CSS] 이미지 Layout Shift 방지CSS 2022. 10. 26. 19:15
이미지에 사이즈를 명시해주지 않으면 페이지 레이아웃이 변동(Layout Shift)되는 모습을 종종 볼 수 있다. (이미지 뿐만 아니라 동적으로 삽입되는 컨텐츠, 광고들도 마찬가지) 이는 사용자 경험에 좋지 않다. 따라서 해결방법으로 이미지 사이즈를 명시해주면 된다. 하지만 요즘은 반응형으로 많이 제작하는 터라 직접적인 사이즈를 명시하기보다는 width:100%과 같은 스타일로 작성된 코드들을 많이 볼 수 있다. 이때 aspect-ratio를 사용하면 된다. img { width: 100%; height: auto; aspect-ratio: width / height; } aspect-ratio 속성에 관한 글은 예전글로 대신 대체한다 [CSS] aspect-ratio : 요소의 비율 유지하기 목적 반응..