-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
화면에 맞는 이미지 사이즈
21.09.28 11:07 작성 조회수 248
1
화면 사이즈에 비례해서 이미지 크기가 줄었다가 늘었다가 하는 경우에는 어떻게 사이즈 측정을 해서 받아오면 좋을까요?
예를 들어 작은 사이즈를 받아왔다가 화면을 늘렸을 경우 사진이 깨질것 같은데 이런 경우에는 srcset과 같은 속성을 사용하면 괜찮을까요?
답변을 작성해보세요.
2
유동균
지식공유자2021.09.28
안녕하세요 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)
반응형 이미지에 대한 최적화 내용도 실습 코드와 함께 자세한 설명으로 다음 강의에 포함할 수 있도록 해보겠습니다.
답변이 도움되었기를 바라며, 강의에 관심을 가져주셔서 감사합니다. :)
1
답변 2