img tag
-
[HTML] img 태그의 loading="lazy" 이해 :: 마이구미HTML, CSS 2024. 1. 14. 16:31
이 글은 img 태그의 loading 속성에 대해 알아본다. 속성을 보면, 이미지를 lazy 로딩할 수 있게 도와주는 속성으로 쉽게 이해할 수 있을 것이라 생각한다. 이 글에서의 핵심은 왜 사용하는지? 어떻게 사용하는지? 보다는 주의사항을 한번 알아본다. img loading attribute - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading img 태그의 loading 속성은 꽤나 유용하게 사용할 수 있다. 큰 작업없이 loading="lazy" 선언만으로 우리가 원하는 동작을 이끌어낼 수 있다. (더 많은 것들을 원한다면, 해당 속성만을 통해 제어하는 것이 힘들 수 있음) 브라우저 지원도 현재로써는 큰 이슈 없을만큼 대부분..
-
<img> vs background-image :: 마이구미HTML, CSS 2020. 3. 16. 00:35
이 글은 HTML 에서 제공해주는 img 태그와 CSS 속성 중 background-image 의 차이를 다룬다. 본인은 img 태그만을 사용해왔고, background-image 는 지양해야한다고 생각해왔다. 지금도 비슷한 생각이지만, 스스로 잘못된 오해를 가진 것들도 있어서 글로 남기게 되었다. 참고 링크 https://blog.px-lab.com/html-img-tag-vs-css-background-image/ https://nystudio107.com/blog/the-css-background-image-property-as-an-anti-pattern 이미지 컨텐츠를 표현하는 방법에는 크게 두가지가 있다. HTML 의 태그를 활용하는 방법. CSS 의 background-image 를 사용하는..