TIL/practices/Web/assignment/220906/02_index.html at master · code-sum/TIL · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>2022-09-06 실습</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!-- navbar -->
    <nav class="navbar fixed-top bg-primary">
      <a class="navbar-brand text-white mx-3" href="02_index.html">Navbar</a>
      <ul class="navbar-nav flex-row mx-3">
        <li class="nav-item mx-2">
            <a class="nav-link text-white" href="02_index.html">Home</a>
        </li>
        <li class="nav-item mx-2">
          <a class="nav-link text-white-50" href="">제품</a>
        </li>
        <li class="nav-item mx-2">
          <a class="nav-link text-white-50" href="">광고</a>
        </li>
        <li class="nav-item mx-2">
            <a class="nav-link text-white-50" href="01_signin.html">회원가입</a>
        </li>
        </ul>
    </nav>

    <!-- carousel -->
    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="images/1.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="images/2.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="images/3.jpg" class="d-block w-100" alt="...">
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
    <div class="container d-flex flex-column">
      <h2 class="text-center fw-bold my-5">Lorem ipsum</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et quasi quisquam doloremque, aperiam accusamus dolore illum accusantium aspernatur optio animi dignissimos quaerat alias asperiores cumque ipsum sapiente dolores ullam qui repudiandae adipisci debitis, eligendi rerum? Voluptate in alias delectus dolor magnam harum vitae voluptatum modi repudiandae quam. Ipsam, est voluptate, consequatur, quis sit porro mollitia ducimus exercitationem commodi itaque reprehenderit esse dignissimos alias assumenda iure quaerat id! Odit nulla neque amet omnis explicabo, itaque deleniti. Corporis, perspiciatis quos dolore earum hic eveniet quod tempora praesentium harum consequuntur odio debitis adipisci? Fugiat voluptates dolorem rem voluptatibus, culpa ut quisquam explicabo sunt odio iure, exercitationem expedita cum inventore. Molestias mollitia hic nesciunt placeat nulla rerum cupiditate obcaecati tempore dolorum dolore incidunt corporis voluptas animi tempora, et quasi praesentium exercitationem nemo vero eaque voluptatum itaque aliquam! Tenetur perspiciatis quod delectus, sint numquam nesciunt inventore sequi voluptate rem et cumque eaque odio debitis aliquam ut magni ipsam quam assumenda in esse reiciendis, consequuntur aliquid. Eos eius, neque modi autem voluptatem illum expedita similique unde tenetur soluta? Error voluptates delectus fugit, aperiam hic officia alias ab in porro, ipsa ullam consectetur repudiandae rem. Ipsum architecto quia voluptate cupiditate, quae provident sunt corporis, iusto saepe odit obcaecati aliquam atque fuga nulla, id repellat cum eum? Accusantium consequuntur voluptas molestiae ea facilis, inventore earum tempora dicta corporis pariatur dolore velit nemo, exercitationem fugiat vitae. Deleniti a possimus tempore dolorem enim odit! At ipsa pariatur quidem nemo animi, vero ea cum repellat maiores harum eaque, quasi libero suscipit beatae asperiores quas veritatis dicta earum? Nostrum optio consectetur corrupti est odio, porro, corporis a possimus maiores quas molestias quidem laborum voluptatibus consequatur earum commodi, eius suscipit id dicta eaque et? Repellendus id recusandae ex et. Iste commodi reprehenderit unde ipsum laboriosam soluta, in id tempore iure sit amet nisi?</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  </body>
</html>