picture태그 & source 태그 기분 문법

2023. 12. 30. 14:46·Mark Up & StyleSheet/HTML
<picture>
	<source 
		media="[미디어쿼리]" 
		sizes="[너비값], [미디어쿼리]"
		type="[파일 유형]"
		srcset="파일위치, [픽셀 밀도], [너비값], {[파일위치], [픽셀 밀도], [너비값]}">
</picture>

 

srcset 속성

<picture>
	<source srcset="images/test.jpg, images/test2.jpg">
</picture>
  • 파일위치, 픽셀 밀도, 너비값 지정 가능
  • 콤마를 이용해 다중 지정 가능
  • 해당 속성은 생략 불가능 (파일 위치 필수, 픽셀 밀도와 너빗값은 생략 가능)

파일위치 : 이미지 파일 위치

픽셀 밀도 : 해상도의 배수

너빗값: sizes 속성과 뷰포트 크기와 연계되어있음

 

media 속성 (생략가능)

미디어 쿼리를 뜻함 (모든 미디어 쿼리의 조건문을 사용할 수 있는 것은 아님, 너비값에 대해서만 지원)

<picture>
	<source media="(min-width: 768px)" srcset="">
</picture>

 

sizes 속성 (생략가능)

이미지가 표현될 영역의 크기 설정, 너빗값과 미디어 쿼리 지정 가능

<!-- 너비값 지정 -->
<picture>
	<source sizes="100px">
</picture>

<!-- 미디어쿼리 지정 -->
<picture>
	<source sizes="(max-width: 1000px)">
</picture>

 

type 속성 

불러올 파일의 유형 지정 가능

 

img 태그

<picture>
	<source srcset="images/test.jpg, images/test2.jpg">
    
    <!-- img태그도 넣을 수 있음 -->
    <img src="" />
</picture>

src 속성에 기본으로 출력될 이미지 경로 입력

picture, source 태그 지원하지 않는 브라우저를 위한 용도 (크로스 브라우징)

마지막에 img 태그를 넣어줌, 그럼 지원하지 않는 브라우저에서도 이미지가 정상적으로 보이게됨

 

예시>>

<picture>
	<source 
		sizes="100vw"
		srcset="source/venice-portrait-414.jpg 414w,
			source/venice-portrait-768.jpg 768w,
			source/venice-landscape-1920.jpg 1920w">
                
	<img src="source/venice-landscape-1920.jpg">
</picture>

 

반응형
저작자표시 (새창열림)

'Mark Up & StyleSheet > HTML' 카테고리의 다른 글

이미지에 링크 거는 방법 (이미지맵 사용하기)  (1) 2024.09.05
헷갈리는 HTML 태그들  (1) 2023.12.22
개발자도구의 $0이 무엇일까?  (0) 2023.12.22
<form>태그와 그 외 관련 태그들 정리  (2) 2023.11.17
웹페이지 구현, 웹사이트 구축과 관련된 용어 알아보기  (3) 2023.11.04
'Mark Up & StyleSheet/HTML' 카테고리의 다른 글
  • 이미지에 링크 거는 방법 (이미지맵 사용하기)
  • 헷갈리는 HTML 태그들
  • 개발자도구의 $0이 무엇일까?
  • <form>태그와 그 외 관련 태그들 정리
전예방
전예방
  • 전예방
    예방이의 개발일기
    전예방
  • 전체
    오늘
    어제
    • All (125)
      • Info & Tip (2)
      • 유용한 사이트들 (5)
      • Mark Up & StyleSheet (23)
        • HTML (6)
        • CSS & SCSS (10)
        • 반응형 (6)
      • Frontend (66)
        • 전체 (10)
        • JavaScript & Jquery (18)
        • TypeScript (0)
        • React (26)
        • Next.js (3)
        • 성능최적화 (2)
        • 웹접근성 (2)
      • Backend (13)
        • Python (1)
        • JAVA (2)
        • node.js (0)
        • PHP (7)
        • 패키지매니저 (3)
      • Markdown (0)
      • SCM (1)
        • Git&Github (1)
        • SVN (0)
      • IDE (4)
        • VSCode (2)
        • IntelliJ (1)
        • Ecplise (1)
      • 취미생활 (3)
      • 정보처리기사 (2)
      • 코딩자율학습단 (5)
        • 12기 (파이썬) (5)
  • 블로그 메뉴

    • 홈
    • 태그
  • 링크

    • velog
    • github
  • 공지사항

  • 인기 글

  • 태그

    NPM
    React Swiper
    코딩자율학습
    CSS
    코딩자율학습단
    Admin
    react
    회원가입
    반응형
    swiper.js
    frontend
    리액트
    TypeScript
    관리자 페이지
    파이썬
    나도코딩
    Python
    yarn berry
    php
    Chart.js
  • 최근 댓글

  • 최근 글

  • 반응형
  • hELLO· Designed By정상우.v4.10.3
전예방
picture태그 & source 태그 기분 문법
상단으로

티스토리툴바