다연이네

[days02] picture 태그 본문

Web/HTML

[days02] picture 태그

　다연　 2020. 12. 1. 18:05
반응형

 picture 태그 

- 웹 개발자에게 이미지의 유연성을 제공
- 가장 일반적인 용도가 반응형 웹 만들때 사용
- 뷰포트(?)에 따라 이미지를 유연하게 제공

 

내가 가진 폰에 맞춰 이미지를 바꾸겠다

(해당 html f12 눌러서 좌측 상단 폰모양 클릭, 사진 크기 조정해보기)  
폰과 노트북 같은 와이파이 갖고 체크

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Insert title here</title>
</head>
<body>

<!--http://192.168.0.8/webPro/html/days02/ex03_04.html -->

	 
	 <picture>
	 	<source media="(min-width:650px)" srcset="./images/img_pink_flowers.jpg">
	 	<source media="(min-width:450px)" srcset="./images/img_white_flower.jpg">
	 	<!-- 450보다 작으면 오렌지 450~650 흰색 650~ 핑크  -->
	 	<img src="./images/img_orange_flowers.jpg" alt="" style="width: auto">
	 </picture>
	
</body>
</html>

<화면이 작을 때>

<화면이 중간일때>

<화면이 클 때>

반응형
저작자표시 비영리

'Web > HTML' 카테고리의 다른 글

[days02] 간단한 페이지 만들기+반응형 웹  (0) 2020.12.01
[days02] HTML 목록  (0) 2020.12.01
[days02] 이미지 플로팅(Image Floating)  (0) 2020.12.01
[days02] a 태그를 사용해 네모 박스 클릭 / 이미지 올리기  (0) 2020.12.01
[days02] a 태그 역할 - 링크 외 책갈피, 경고창 띄우기, 메일 보내기  (0) 2020.12.01
'Web/HTML' Related Articles more
Comments