<!DOCTYPE html>
<html>
<head>
<title>media</title>
</head>
<body>
<!-- μ΄λ―Έμ§ alt-->
<img src="img/a.jpg" alt="μ΄λ―Έμ§ μμ">
<img src="img/a.jpg" alt="">
<img src="img/a.jpg" alt="μ€ν¬λ¦° 리λκ° μ½μ΄μΌ νλ 문ꡬ">
<!-- srcset μμ±μ μ¬μ©νλ©΄ μ¬λ¬ ν΄μλ λμ κ°λ₯ -->
<img src="a.jpg" srcset="a.jpg, a.jpg 2x" alt="λ체문ꡬ">
<!--
pictureλ sourceμ ν¨κ» μ¬μ©νλ κ²μ κΆμ₯
-->
<iframe width="1280" height="720" src="https://www.youtube.com/embed/-iuX3r8PSzU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
<!--
audio : μμ
νλ μ΄
video : μμ νλ μ΄
-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
margin: 0;
padding: 0;
}
h1 {
background: #4267b2;
color: white;
padding: 10px;
margin: 0;
}
article {
width: 500px;
border: 1px solid blue;
margin-top: 30px;
margin-left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<header>
<h1>Facebook</h1>
</header>
<section>
<article>
<img width="100%" src="src/a.jpg" alt="" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam,
debitis nulla minima quas temporibus soluta iste harum adipisci.
Repellendus eius libero autem deserunt numquam ducimus dolorem ab
corporis atque debitis?Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Explicabo aliquam voluptatum esse laborum nihil
perferendis hic voluptates corrupti commodi? Accusantium distinctio
dolores beatae nostrum! Similique cupiditate doloribus itaque fuga
laboriosam.
</p>
</article>
<article>
<img width="100%" src="src/a.jpg" alt="" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam,
debitis nulla minima quas temporibus soluta iste harum adipisci.
Repellendus eius libero autem deserunt numquam ducimus dolorem ab
corporis atque debitis?Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Explicabo aliquam voluptatum esse laborum nihil
perferendis hic voluptates corrupti commodi? Accusantium distinctio
dolores beatae nostrum! Similique cupiditate doloribus itaque fuga
laboriosam.
</p>
</article>
<article>
<img width="100%" src="src/a.jpg" alt="" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam,
debitis nulla minima quas temporibus soluta iste harum adipisci.
Repellendus eius libero autem deserunt numquam ducimus dolorem ab
corporis atque debitis?Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Explicabo aliquam voluptatum esse laborum nihil
perferendis hic voluptates corrupti commodi? Accusantium distinctio
dolores beatae nostrum! Similique cupiditate doloribus itaque fuga
laboriosam.
</p>
</article>
</section>
</body>
</html>