Jam's story

[HTML] days06- picture 태그 본문

WEB/HTML

[HTML] days06- picture 태그

애플쩀 2022. 5. 16. 14:27 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<style>
</style>
</head>
<body>
<picture>
<source media="(min-width:650px)" srcset="../images/img_pink_flowers.jpg">
<source media="(min-width:450px)" srcset="../images/img_white_flower.jpg">
<img src="../images/img_orange_flowers.jpg">
</picture>

</body>
</html>

 

1.picture 태그에  source여러개 설정해서 다양한 장치마다 가장 맞는 
다른 이미지를 선택할 수 있게 하는 태그 
2.웹 개발자에게 이미지의 유연성을 제공 
3. 반응형 웹 만들때 사용 
4. picture 태그 안에 img 태그는 가장 마지막 지정 

저작자표시 (새창열림)

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

[HTML] p - 높이지정, padding, margin, 배경이미지  (0) 2022.05.16
[HTML] 파비콘  (0) 2022.05.16
[HTML] days06 - 이미지플로팅  (0) 2022.05.16
[HTML]days03-img  (0) 2022.05.16
[HTML] days02-태그  (0) 2022.05.12
'WEB/HTML' Related Articles more
Comments