글
라벨이 html인 게시물 표시
웹 성능 최적화를 위한 Image Lazy Loading 기법
Image Lazy Loading은 페이지 안에 있는 실제 이미지들이 실제로 화면에 보여질 필요가 있을 때 로딩을 할 수 있도록 하는 테크닉입니다. 웹 페이지 내에서 바로 로딩을 하지 않고 로딩 시점을 뒤로 미루는 것이라 볼 수 있습니다. 이 방식은 웹 성능과 디바이스 내 리소스 활용도 증가, 그리고 연관된 비용을 줄이는데 도움을 줄 수 있습니다. 영어 단어 중 'lazy'는 '가능한 길게 일을 미루는 행위' 란 의미에 기반합니다. <img src="…" loading="lazy" alt="…" width="200" height="200"> <img src="…" loading="lazy" alt="…" style="height:200px; width:200px;"> loading="lazy"
iframe 대안 태그와 사용 방법
HTML에서 외부 리소스 포함하기 1. object 태그 HTML의 object 태그를 사용하여 웹 페이지에 외부 리소스를 포함할 수 있습니다. 이 태그는 iframe의 대안으로 사용될 수 있으며, 다양한 멀티미디어 요소를 포함할 수 있습니다. 실제 예제: <object data=" https://사이트이름.com/ " width="800" height="800" type="text/html"> </object> 2. embed 태그 embed 태그는 object 태그와 유사하며, 웹 페이지에 다양한 외부 리소스를 포함하는 데 사용됩니다. 이 태그는 자동 닫힘 태그입니다. 실제 예제: <embed type="text/html" src=" https://사이트이름.com/ " width="800" height="500"> 주의 object와 embed 태그는 사용할 수 있지만, 일반적으로 iframe 태그를 사용하는 것이 더 권장됩니다.