화면에 맞는 이미지 사이즈

안녕하세요 dongwoo kim님,

반응형 이미지와 관련하여 질문을 주셨는데요,

이번 강의에서 반응형에 대한 이미지 사이즈 조절 내용은 다루지 않았지만,
만약 이미지를 조금 더 효율적으로 불러오기 위해 작은 화면에서는 작은 이미지를 로드하고,
큰 화면에서는 큰 이미지를 로드하는식으로 반응형을 적용하고 싶다면,
언급하신 img 태그의 srcset과 sizes 속성을 사용하여 반응형을 구현할 수 있습니다.

다른 방법으로는 picture 태그(+source 태그)에서 srcset과 media 속성을 사용하여 구현할 수 있습니다.

자세한 내용은 아래 문서를 참고하시면 도움이 되실 것 같습니다.
(https://developer.mozilla.org/ko/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#%EC%95%84%ED%8A%B8_%EB%94%94%EB%A0%89%EC%85%98)

반응형 이미지에 대한 최적화 내용도 실습 코드와 함께 자세한 설명으로 다음 강의에 포함할 수 있도록 해보겠습니다.

답변이 도움되었기를 바라며, 강의에 관심을 가져주셔서 감사합니다. :)

인프런 커뮤니티 질문&답변