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 태그는 가장 마지막 지정