<!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>