[HTML] 과제: HTML 이미지

치즈랑 2024. 10. 13. 18:22

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/Test_your_skills:_HTML_images

Test your skills: HTML images - Learn web development | MDN

The aim of this skill test is to assess whether you understand images and how to embed them in HTML.

developer.mozilla.org

Task 1

폴더 구조

index.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>HTML images: Task 1</title>
    <style>
      body {
        background-color: #fff;
        color: #333;
        font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
        padding: 1em;
        margin: 0;
      }

      * {
        box-sizing: border-box;
      }

      img {
        border: 1px solid black;
      }
    </style>
  </head>

  <body>
    <h1>Basic image embed</h1>
    <img
      src="images/blueberries.jpg"
      alt="blueberries"
      width="615"
      height="419"
    />
  </body>
</html>

Task 2

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>HTML images: Task 2</title>
    <style>
      body {
        background-color: #fff;
        color: #333;
        font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
        padding: 1em;
        margin: 0;
      }

      * {
        box-sizing: border-box;
      }

      img {
        border: 1px solid black;
        max-width: 100%;
      }
    </style>
  </head>

  <body>
    <h1>Basic image title</h1>

    <img
      src="larch.jpg"
      alt="Several tall evergreen trees called larches"
      title="This is a image of forest"
    />
  </body>
</html>

Task 3

index.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>HTML images: Task 3</title>
    <style>
      body {
        background-color: #fff;
        color: #333;
        font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
        padding: 1em;
        margin: 0;
      }

      * {
        box-sizing: border-box;
      }
    </style>
  </head>

  <body>
    <h1>Image and caption</h1>
    <figure>
      <img
        src="firefox.png"
        alt="An abstract flaming fox wrapping around a blue sphere"
        width="446"
        height="460"
      />
      <figcaption>The Firefox logo, newly abstracted for 2019!</figcaption>
    </figure>
  </body>
</html>

오류있으면 댓글 남겨주세요. 감사합니다!

728x90