웹 개발 종합반 1주차 - HTML, CSS, Bootstrap으로 추억앨범 만들기 1

2024. 7. 3. 18:26ㆍ내배캠_Java 6기/웹개발 종합반 강의

웹 개발 종합반 1주차 TIL - 구글 폰트와 부트스트랩 잘 가져다 사용하기

웹 개발 종합반 1주차 TIL - CSS 기초웹 개발 종합반 1주차 TIL - HTML 기초웹의 뼈대인 HTML😊 html은 웹페이지에서 뼈대를 담당 ✅ HTML은 웹의 뼈대를 잡아주는 구역을 나타내는 코드 😊 ! 웹의

taejudevlog.tistory.com

☝️위의 글을 읽어보고 읽으면 이해가 됩니다!

추억앨범 페이지 상단 만들기

추억앨범 상단 배경사진
https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80

코드 👇

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>

    <title>My Album</title>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap");

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

      .mytitle {
        background-color: green;
        color: white;

        height: 250px;

        /* 내용물을 정렬 */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        background-image: linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0.2)
          ),
          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;
        border: none;
        color: white;
        font-size: 18px;
        font-weight: bold;
        border-radius: 5px;

        border: 1px solid white;
        margin-top: 20px;
      }

      .mycards {
        margin: 20px auto 20px auto;
        width: 1200px;
      }
    </style>
  </head>

  <body>
  
    <div class="mytitle">
      <h1>나만의 추억 앨범</h1>
      <button>추억 저장하기</button>
    </div>
    
  </body>
</html>

부트스트랩 카드 추가하기

Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

getbootstrap.com

1. 카드 카테고리에서 맨 마지막 카드 선택

2. 카드에 포스터 이미지 삽입하기

추억앨범 카드 배경 포스터 사진
https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80

✓ row-cols-md-3 g-4 → row-cols-md-4 g-4 로 바꾸기

=> 한 줄에 카드를 3개에서 4개로 보여주겠다는 것을 의미

✓ 카드 내용 변경해보기

앨범 제목, 앨범 내용, 앨범 날짜 등으로 내용 변경하기!

카드 포함한 전체 코드 👇

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>

    <title>My Album</title>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap");

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

      .mytitle {
        background-color: green;
        color: white;

        height: 250px;

        /* 내용물을 정렬 */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        background-image: linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0.2)
          ),
          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;
        border: none;
        color: white;
        font-size: 18px;
        font-weight: bold;
        border-radius: 5px;

        border: 1px solid white;
        margin-top: 20px;
      }

      .mycards {
        margin: 20px auto 20px auto;
        width: 1200px;
      }
    </style>
  </head>

  <body>
    <div class="mytitle">
      <h1>나만의 추억 앨범</h1>
      <button>추억 저장하기</button>
    </div>

    <div class="mycards">
      <div class="row row-cols-1 row-cols-md-4 g-4">
        <div class="col">
          <div class="card h-100">
            <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-muted">앨범 날짜</small>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <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-muted">앨범 날짜</small>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <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-muted">앨범 날짜</small>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <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-muted">앨범 날짜</small>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

다음 글에서는 HTML, CSS, Bootstrap으로 추억 앨범을 전체 완성해보자 !!

728x90

저작자표시 비영리 변경금지

'내배캠_Java 6기 > 웹개발 종합반 강의' 카테고리의 다른 글

웹 개발 종합반 2주차 - 1주차의 HTML, CSS, Bootstrap 복습 (0)	2024.07.04
웹 개발 종합반 1주차 - HTML, CSS, Bootstrap으로 추억앨범 만들기 2 (0)	2024.07.04
웹 개발 종합반 1주차 TIL - 구글 폰트와 부트스트랩 잘 가져다 사용하기 (0)	2024.07.03
웹 개발 종합반 1주차 TIL - CSS 기초 (0)	2024.07.03
웹 개발 종합반 1주차 TIL - HTML 기초 (0)	2024.07.02

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

웹 개발 종합반 1주차 - HTML, CSS, Bootstrap으로 추억앨범 만들기 1

태그클라우드 이동

최근 글 👑

웹 개발 종합반 1주차 - HTML, CSS, Bootstrap으로 추억앨범 만들기 1

2024. 7. 3. 18:26ㆍ내배캠_Java 6기/웹개발 종합반 강의

'내배캠_Java 6기 > 웹개발 종합반 강의' 카테고리의 다른 글

관련글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역