2025/11/28 2

picture 태그, 반응형 이미지를 구현하는 두 가지 방법

반응형 웹을 구현할 때, 이미지를 다양한 기기 환경에 맞춰~자유롭게 조절할 수 있는 태그는 크게 두 가지 방식으로 사용할 수 있다. [ 방식 01 - 'sizes + w 단위(srcset)' 방식 ] 폭(Width) 기반 반응형 이미지 방식 sizes="50vw" >> 이 이미지는 뷰포트의 절반 크기로 보일 예정!브라우저는 실제 렌더링 크기(50vw 계산값)를 보고! 420w 또는 656w 중 적절한 해상도를 선택함. 브라우저가 선택 기준으로 삼는 것?? >> 화면에서 이미지가 어느 정도 폭(width)으로 보일지! 언제 사용??로고처럼 화면 크기에 따라 보이는 크기가 달라지는 이미지반응형 레이아웃에서 width가 유동적인 이미지 [ 방식 02 - '픽셀 밀도(1x, 2x, 3x..

DEV INFO 2025.11.28

picture 태그, 반응형 이미지를 만들 수 있는 태그 사용 방법

태그란?하나의 이미지 자리에 여러 버전의 이미지를 준비해 두고,브라우저의 화면 크기, 지원 포맷에 맞춰 가장 적절할 이미지를 선택해서 보여주는 태그! 즉! 화면의 크기나 기기의 환경에 따라~알맞은 이미지를 자동으로 골라 보여주는 태그 이다!! [예시] 브라우저가 화면의 크기를 확인하면서 500px 이하의 핸드폰 화면 → small-550.jpg 사용768px 이하의 태블릿 화면 → medium-1024.jpg 사용1280px 이하의 작은 노트북 화면 → large-1600.jpg 사용그보다 크면 기본 의 이미지(normal-1920.jpg) 사용즉, 각 디바이스에 딱 맞는 이미지를 자동으로 선택해주는 구조 태그는 상황별 이미지 스위치라고 생각하면 됨! 태그는 "조건/규칙"만 알려..

DEV INFO 2025.11.28