[CSS] 부트스트랩(bootstrap)으로 추억앨범 웹사이트 만들기 - html

조민경·2024년 12월 3일

CSS 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z

CSS

목록 보기

2/9

✔️ 지금까지 배운 내용과 부트스트랩을 활용하여 첫 프로젝트를 만들어 봅시다!

📚 완성 예시

📝 추억앨범 프로젝트

😃 남이 미리 작성한 CSS를 불러와 내 HTML 파일에 사용하기 위해서는 설정을 해야 합니다! 이러한 설정을 통해 Bootstrap 라이브러리의 CSS의 기능을 사용할 수 있게 됩니다.

✔️ 부트스트랩 CDN

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

💻 해당 코드를 head 안에 넣기!

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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"
        />
</head>

✔️ 상단 만들기

📁 새폴더 만들기

spart-album에서 index.html 새파일 만들기

C:\Users\us.v\Desktop\spart\album\index.html
html:5 포멧 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

# 배경 사진 링크

https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80

📦 상단 div 만들기

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .mytitle{
            background-color: green;
        }
    </style>
</head>
<div class="mytitle">
	<h1>나만의 추억앨범</h1>
    <button>추억 저장하기</button>
</div>

🔠 폰트 적용

폰트 적용하는 방법

<style>
    @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
    * {
        font-family: 'Gowun Dodum', sans-serif;
    }
    .mytitle {
        background-color: green;
    }
</style>

📏 상단 div CSS

높이: 250px
폰트 색: white
가운데 정렬

이미지 링크

https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80

<style>
    @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
    * {
        font-family: 'Gowun Dodum', sans-serif;
    }
    .mytitle {
        height: 250px;
        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;
    }
</style>

🔥

flex-direction: column; 에서 column -> row면
옆으로 정렬돼서 '추억 저장하기' 버튼이 옆으로 감

🖱️ 버튼 CSS

폰트 색: white
배경 색: 투명
모서리 둥글게


<style>
.mytitle > button {
    width: 150px;
    height: 50px;
    background-color: transparent;
    color: white;
    border: 1px solid white;
    border-radius: 5px;
    margin-top: 20px;
}
</style>

✔️ 카드 추가하기

📥 부트스트랩(bootstrap)에서 카드 가져오기

부트스트랩 카드 링크


<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-body-secondary">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-body-secondary">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-body-secondary">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

🔧 부트스트랩 코드 수정하기

앨범 수 3개 -> 4개
앨범 title/text/날짜 수정

<<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-body-secondary">앨범 날짜</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-body-secondary">앨범 날짜</small>
                </div>
            </div>
        </div>
    </div>
</div>

row-cols-md-3 -> row-cols-md-4로 수정
col 클래스 하나만 수정해서 복사한 뒤 3개 더 붙여넣기

💳 mycard CSS

너비 조정
가운데 정렬

<style>
.mycards {
width: 1200px;
margin: 30px auto 0px auto
}
</style>

✔️ 포스팅 박스 만들기

📥 부트스트랩(bootstrap)에서 코드 가져오기

부트스트랩 floating labels 링크

이메일 부분만 사용

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Email address</label>
</div>

부트스트랩 button 링크

<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

🔧 부트스트랩 코드 수정하기

placeholder, label 내용 바꾸기
총 4가지 항목

<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>
</body>

버튼 추가

<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-dark">기록하기</button>
        <button type="button" class="btn btn-outline-dark">닫기</button>
    </div>
</div>

📫 mypostingbox CSS

그림자 추가

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

🖱️ 버튼 CSS

<style>
.mybtn {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
            }
            .mybtn > button {
                margin-right: 5px;
            }
</style>

💻 완성 코드

<!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+Dodum&display=swap');
            * {
                font-family: 'Gowun Dodum', sans-serif;
            }
            .mytitle {
                height: 250px;
                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-dark">기록하기</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 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-body-secondary">앨범 날짜</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-body-secondary">앨범 날짜</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-body-secondary">앨범 날짜</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-body-secondary">앨범 날짜</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

조민경

이전 포스트

[CSS] 구글폰트 적용법

다음 포스트

[CSS] 부트스트랩(bootstrap)으로 추억앨범 웹사이트 만들기 - html

CSS

📚 완성 예시

📝 추억앨범 프로젝트

✔️ 부트스트랩 CDN

💻 해당 코드를 head 안에 넣기!

✔️ 상단 만들기

📁 새폴더 만들기

📦 상단 div 만들기

🔠 폰트 적용

📏 상단 div CSS

🖱️ 버튼 CSS

✔️ 카드 추가하기

📥 부트스트랩(bootstrap)에서 카드 가져오기

🔧 부트스트랩 코드 수정하기

💳 mycard CSS

✔️ 포스팅 박스 만들기

📥 부트스트랩(bootstrap)에서 코드 가져오기

🔧 부트스트랩 코드 수정하기

📫 mypostingbox CSS

🖱️ 버튼 CSS

💻 완성 코드

[CSS] 구글폰트 적용법

[CSS] 부트스트랩(bootstrap)으로 넷플릭스 따라만들어보기 - html

0개의 댓글