스크린 리더가 읽어야 하는 문구 대체문구 "> 스크린 리더가 읽어야 하는 문구 대체문구 "> 스크린 리더가 읽어야 하는 문구 대체문구 "> 
<!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>