10. CSS_background-image/index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <style>
      .container {
        background: url(./images/color-tile.png) repeat-x left top,
          url(./images/color-tile.png) repeat-x left bottom / white;
      }
      header {
        background: url(./images/flower.png) no-repeat center right;
      }
      .birds {
        background: url(./images/bird.jpg) no-repeat center center / cover;
      }
      .sidebar{
        background-image: linear-gradient(to bottom, #e5e9dc, #FFF);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header>
        <h1>Website Title</h1>
        <p>Website slogan included here.</p>

        <nav class="site-nav">
          <ul class="group">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </nav>
      </header>

      <div class="content-area group">
        <div class="main-area">
          <h2>Main Column Heading</h2>

          <p>
            This is the main area (or column). Consectetur adipisicing elit, sed
            do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
            enim ad minim veniam, quis nostrud exercitation ullamco laboris
          </p>

          <div class="birds">
            <p>Birds are great!</p>
          </div>
          <!-- /birds -->

          <p>
            nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum.
          </p>

          <ul>
            <li>Example list item</li>
            <li>Example list item</li>
            <li>Example list item</li>
            <li>Example list item</li>
            <li>Example list item</li>
            <li>Example list item</li>
          </ul>

          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum.
          </p>

          <p>
            In reprehenderit in voluptate velit esse cillum dolore eu fugiat
            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
            in culpa qui officia deserunt mollit anim id est laborum. Lorem
            ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
            veniam, quis nostrud.
          </p>
        </div>

        <aside class="sidebar">
          <p>
            This is the sidebar. Lorem ipsum dolor sit amet, consectetur
            adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit
            esse cillum dolore eu.
          </p>
        </aside>
      </div>

      <footer>
        <p>&copy; 2021 - This is the footer.</p>
      </footer>
    </div>
  </body>
</html>