화면에 맞는 이미지 사이즈
479
87 asked
화면 사이즈에 비례해서 이미지 크기가 줄었다가 늘었다가 하는 경우에는 어떻게 사이즈 측정을 해서 받아오면 좋을까요?
예를 들어 작은 사이즈를 받아왔다가 화면을 늘렸을 경우 사진이 깨질것 같은데 이런 경우에는 srcset과 같은 속성을 사용하면 괜찮을까요?
Answer 2
2
안녕하세요 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)
반응형 이미지에 대한 최적화 내용도 실습 코드와 함께 자세한 설명으로 다음 강의에 포함할 수 있도록 해보겠습니다.
답변이 도움되었기를 바라며, 강의에 관심을 가져주셔서 감사합니다. :)
bundle analyzer 에 대한 질문이 있습니다.
0
108
2
Cannot find module serve 에러
1
104
1
성능 탭에서 소요시간이 안보입니다
0
204
2
이미지 CDN 만드는 방법
0
459
1
Performance FPS 탭이 안보여요.
1
797
1
CPU throttling이 뭔가요?
0
1119
1
default export가 아닌 named export일 때 lazy사용법
1
1070
1
lazy적용하였는데 네트워크탭에 분리하여 보이지 않습니다
1
582
1
network 캐싱에 대해서 질문 있습니다!
1
426
1
vue project에서 chrome performance tab 확인하기
1
457
1
node version으로 인한 오류
4
1231
1
강의 자막
1
955
2
번들파일과 병목현상 질문
2
396
1
webpack-bundle-analyzer 질문
1
786
1
이미지 프리로딩 질문
1
385
1
이미지 최적화 활용
1
581
1
강력 새로고침
1
323
1
Suspense 관련해서 질문드립니다
2
360
1
config-overrides cant resolve path
1
362
1
이미지 preload 컴포넌트 preload 차이 질문드립니다.
1
611
1
custom react 환경에서 node_modules chunk 분리
1
380
1
removeSpeical 함수를 줄여야겠다고 하는 이유!
1
282
1
Factory pattern에 대해서 궁금한 점이 있습니다
2
365
2
텍스트 압축 방식에 대해 질문이 있습니다
2
951
1