HTML 요소 안에 여러 를 사용하는 주된 이유는?

다양한 화면 크기, 해상도, 이미지 포맷에 맞는 최적의 이미지를 브라우저가 선택하도록 하기 위함이다 요소는 반응형 이미지를 위한 컨테이너입니다. 태그에 media 쿼리와 type 속성을 지정하여 브라우저가 화면 크기, 해상도, 지원 포맷(WebP, AVIF 등)에 따라 가장 적합한 이미지를 선택하도록 합니다.

HTML <picture> 요소 안에 여러 <source>를 사용하는 주된 이유는?

보통 MDN Web Docs

보기 및 정답

A 다양한 화면 크기, 해상도, 이미지 포맷에 맞는 최적의 이미지를 브라우저가 선택하도록 하기 위함이다

B 여러 이미지를 슬라이드쇼처럼 자동으로 전환하여 캐러셀 갤러리 효과를 제공하기 위함이다

C 이미지에 여러 CSS 필터 효과를 동시에 적용하여 시각적 변환을 수행하기 위함이다

D 이미지의 로딩 속도를 높이기 위해 여러 소스를 동시에 병렬 다운로드하여 브라우저의 성능을 최적화하는 것이다

해설

<picture> 요소는 반응형 이미지를 위한 컨테이너입니다. <source> 태그에 media 쿼리와 type 속성을 지정하여 브라우저가 화면 크기, 해상도, 지원 포맷(WebP, AVIF 등)에 따라 가장 적합한 이미지를 선택하도록 합니다.

코딩, 제대로 배우고 싶다면?

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

정규반 살펴보기

로그인

추가 정보 입력

회원가입

비밀번호 찾기

HTML <picture> 요소 안에 여러 <source>를 사용하는 주된 이유는?

해설

코딩, 제대로 배우고 싶다면?

관련 문제

모두를 위한 진짜 쎈 바이브코딩