1ncode 님의 블로그

  • 홈
  • 태그
  • 방명록

html 1

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

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

DEV INFO 2025.11.28
이전
1
다음
더보기
프로필사진

1ncode 님의 블로그

1ncode 님의 블로그 입니다.

  • 분류 전체보기 (20)
    • DEV INFO (8)
    • HTML · CSS (4)
    • vue.js (1)
    • React.js (5)
    • setting (0)
    • 개발 환경 (1)
    • 확장프로그램 (0)
    • company (0)

Tag

비트, 반응형태그, vite 빌드, react.js 세팅, react 설정파일, 리액트, Vite, react config, react.js, React, seo, 개발자도구 style, devetools, 이미지태그, react 세팅, css모듈, devetools style, vite환경구성, picture태그, extesnion,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2026/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30

방문자수Total

  • Today :
  • Yesterday :

Copyright © AXZ Corp. All rights reserved.

티스토리툴바