: 여러 이미지 소스를 지정하고, 각각의 소스를 어떤 상황에서 사용할지를 정의하는 컨테이너이면서 여기서 스타일을 지정 가능하다. : picture 태그 내에서 조건을 지정하고, 해당 조건에 맞는 이미지를 설정한다. 여기에 media-query를 통해 어떠한 조건을 기준으로 이미지를 선택할 수 있다. @media (width: 734px) 요런... : 이미지를 출력하는 태그. 브라우저가 picture 태그를 지원하지 않거나 미디어 쿼리에 해당하지 않는 경우, img 태그에 설정된 이미지가 기본값으로 로드된다.➡️ 사용 예시  예전에는 이런 이미지 조절되는 거 보고 짱 큰 이미지 하나 두고 크기 조절하는 건가? 라고 생각했는데, 이미지 최적화 유무에 성능 차이가 난다. 생..

반응형 이미지를 구현하면서 미디어 쿼리를 사용해서 뷰포트 width에 따라 변화를 주고 있었다. 그런데 자꾸 sm 사이즈, lg 사이즈만 적용되고 중간 사이즈가 적용이 안 되고 헛도는 것;;사이즈에 변화를 주거나 이것 저것 만져봐도 이유를 모르다가 해결책을 알아냈다. 먼저 문제 상황을 간략히 설명하자면 다음과 같다.➡️ 문제 상황 !@media screen and (max-width: 734px) { .section-tile-wrapper { min-height: 490px; justify-content: flex-end; }}@media screen and (max-width: 1068px) { .section-tile-wrapper { min-hei..