본문 바로가기
Coding/내일배움캠프

[내일배움캠프] Node.js 4기 TIL | Day 02 | 23.12.30.(토)

_Woo_ 2023. 12. 30. 18:13

index.html

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>나만의 추억앨범</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Gowun+Doun&display=swap");

      * {
        font-family: "Gowun Dodum", sans-serif;
      }

      .mytitle {
        height: 250px;
        background-color: green;
        color: white;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        background-image: url("https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80");
        background-position: center;
        background-size: cover;
      }

      .mytitle > button {
        width: 150px;
        height: 50px;
        background-color: transparent;
        color: white;
        border: 1px solid white;
        border-radius: 5px;

        margin-top: 20px;
      }

      .mycards {
        width: 1200px;

        margin: 30px auto 0px auto;
      }

      .mypostingbox {
        width: 500px;
        margin: 30px auto 0px auto;
        padding: 20px;
        box-shadow: 0px 0px 3px 0px blue;
        border-radius: 5px;
      }

      .mybtn {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }

      .mybtn > button {
        margin-right: 5px;
      }
    </style>
  </head>
  <body>
    <div class="mytitle">
      <h1>나만의 추억앨범</h1>
      <button>추억 저장하기</button>
    </div>
    <div class="mypostingbox">
      <div class="form-floating mb-3">
        <input
          type="email"
          class="form-control"
          id="floatingInput"
          placeholder="앨범 이미지"
        />
        <label for="floatingInput">앨범 이미지</label>
      </div>
      <div class="form-floating mb-3">
        <input
          type="email"
          class="form-control"
          id="floatingInput"
          placeholder="앨범 제목"
        />
        <label for="floatingInput">앨범 제목</label>
      </div>
      <div class="form-floating mb-3">
        <input
          type="email"
          class="form-control"
          id="floatingInput"
          placeholder="앨범 내용"
        />
        <label for="floatingInput">앨범 내용</label>
      </div>
      <div class="form-floating mb-3">
        <input
          type="email"
          class="form-control"
          id="floatingInput"
          placeholder="앨범 날짜"
        />
        <label for="floatingInput">앨범 날짜</label>
      </div>
      <div class="mybtn">
        <button type="button" class="btn btn-primary">기록하기</button>
        <button type="button" class="btn btn-outline-dark">닫기</button>
      </div>
    </div>
    <div class="mycards">
      <div class="row row-cols-1 row-cols-md-4 g-4">
        <div class="col">
          <div class="card">
            <img
              src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
              class="card-img-top"
              alt="..."
            />
            <div class="card-body">
              <h5 class="card-title">앨범 제목</h5>
              <p class="card-text">앨범 내용</p>
            </div>
            <div class="card-footer">
              <small class="text-body-secondary">앨범 날짜</small>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <img
              src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
              class="card-img-top"
              alt="..."
            />
            <div class="card-body">
              <h5 class="card-title">앨범 제목</h5>
              <p class="card-text">앨범 내용</p>
            </div>
            <div class="card-footer">
              <small class="text-body-secondary">앨범 날짜</small>
            </div>
            <div class="mybtn">
              <button type="button" class="btn btn-dark">기록하기</button>
              <button type="button" class="btn btn-outline-dark">닫기</button>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <img
              src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
              class="card-img-top"
              alt="..."
            />
            <div class="card-body">
              <h5 class="card-title">앨범 제목</h5>
              <p class="card-text">앨범 내용</p>
            </div>
            <div class="card-footer">
              <small class="text-body-secondary">앨범 날짜</small>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <img
              src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
              class="card-img-top"
              alt="..."
            />
            <div class="card-body">
              <h5 class="card-title">앨범 제목</h5>
              <p class="card-text">앨범 내용</p>
            </div>
            <div class="card-footer">
              <small class="text-body-secondary">앨범 날짜</small>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

 

'Coding > 내일배움캠프' 카테고리의 다른 글

[내일배움캠프] Node.js 4기 TIL | Day 05 | 24.01.02.(화)  (0) 2024.01.02
[내일배움캠프] Node.js 4기 TIL | Day 04 | 24.01.01.(월)  (1) 2024.01.01
[내일배움캠프] Node.js 4기 TIL | Day 03 | 23.12.31.(일)  (1) 2023.12.31
[내일배움캠프] Node.js 4기 TIL | Day 01 | 23.12.29.(금)  (1) 2023.12.29
Chapter 1 미니프로젝트 회고 | 내일배움캠프 Node.js 4기  (2) 2023.12.28

'Coding/내일배움캠프' Related Articles

티스토리툴바