ChatGPT 웹개발 진행노트 - 2일차

2024. 1. 20. 15:56스파르타_부트캠프/웹개발

14. 멜로디쉐어 만들기

Nav 만들기

 

music.html을 추가하였고 기본 코드를 붙여넣었다.

<!Doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  </head>
  <body>
  	<h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>

 

다음과 같이 기본 Hello, world가 출력되었다.

 

다음 부트스트랩 페이지로 이동 후 Color schemes, content를 추가하였다.

https://getbootstrap.com/docs/5.3/components/navbar/

 

navbar의 내용을 추가 및 안의 텍스트를 Music, Album, Movie로 바꾸었으로 d-flex justify-content-center 옵션을 추가하여 가운데 정렬하였다.

<nav class="navbar bg-dark border-bottom border-body d-flex justify-content-center" data-bs-theme="dark">
    <!-- Navbar content -->
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container-fluid">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Music</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Album</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Movie</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</nav>

 

전체 배경을 검은색으로 만들기 위한 data-bs-theme="dark" 옵션을 주었으먀, 각 링크에 글자색 text-white 옵션을 추가해 흰색으로 만든다.

<nav class="navbar bg-dark border-bottom border-body d-flex justify-content-center" data-bs-theme="dark">
    <!-- Navbar content -->
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="#">Music</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="#">Album</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="#">Movie</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</nav>

 

Main 만들기

다음 링크주소에서 개발자 도구를 연 후 다음 태그 값을 복사한다.

https://getbootstrap.com/docs/5.3/examples/heroes/

</nav> 태그 밑에 해당 코드를 붙여넣는다.

<div class="px-4 py-5 my-5 text-center">
    <img class="d-block mx-auto mb-4" src="/docs/5.3/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
    <h1 class="display-5 fw-bold text-body-emphasis">Centered hero</h1>
    <div class="col-lg-6 mx-auto">
        <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s
            most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system,
            extensive prebuilt components, and powerful JavaScript plugins.</p>
        <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
            <button type="button" class="btn btn-primary btn-lg px-4 gap-3">Primary button</button>
            <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button>
        </div>
    </div>
</div>

 

다음과 같은 화면이 나온다.

 

 

다음 절차를 진행한다.

* img 태그 삭제

* btn-primary -> btn-danger

* button secondary 삭제

<div class="px-4 py-5 my-5 text-center">
    <h1 class="display-5 fw-bold text-body-emphasis">Centered hero</h1>
    <div class="col-lg-6 mx-auto">
        <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s
            most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system,
            extensive prebuilt components, and powerful JavaScript plugins.</p>
        <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
            <button type="button" class="btn btn-danger btn-lg px-4 gap-3">Primary button</button>
        </div>
    </div>
</div>

다음과 같은 화면이 나온다.

 

다음 페이지에서 Modal->live demo의 해당 부분만 복사한다.

https://getbootstrap.com/docs/5.3/components/modal/

기존 버튼을 제거하고 해당 버튼을 추가하며, 버튼의 이름은 '음악 추가'로 수정한다.

 

<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
    <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#exampleModal">
        음악 추가 
    </button>
</div>

 

 

버튼 아래에 다음 코드를 추가한다.

<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#exampleModal">
    음악 추가
</button>

<!-- 버튼 아래에 해당 코드 추가 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

 

버튼 클릭 시 다음과 같이 모달 상자가 화면에 출력된다.

 

모달 상자를 완성 시키기 위해 아래 링크에서 작업을 진행한다.

https://getbootstrap.com/docs/5.3/forms/overview/

 

해당 코드를 복사하여 <div class="modal-body">...</div>에 붙여 넣는다.

<div class="modal-body">
<!-- 해당 위치에 코드를 추가 -->
    <form>
        <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1"
                aria-describedby="emailHelp">
            <div id="emailHelp" class="form-text">We'll never share your email with anyone
                else.</div>
        </div>
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1">
        </div>
        <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>

다음과 같이 모달 박스에 로그인 페이지가 생성 된다. 

 

modal-body 안의 내용을 다음과 같이 수정하여 입력 폼을 생성한다.

<div class="modal-body">
    <form>
        <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">유저</label>
            <input type="text" class="form-control" id="exampleInputEmail1"
                aria-describedby="emailHelp">
            <div id="emailHelp" class="form-text">등록하시는 사용자 이름을 넣어주세요.</div>
        </div>
        <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">노래 제목</label>
            <input type="text" class="form-control" id="exampleInputEmail1"
                aria-describedby="emailHelp">
            <div id="emailHelp" class="form-text">좋아하는 노래 제목을 넣어주세요.</div>
        </div>
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">가수</label>
            <input type="text" class="form-control" id="exampleInputPassword1">
        </div>
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">앨범 커버URL</label>
            <input type="text" class="form-control" id="exampleInputPassword1">
        </div>
        <button type="submit" class="btn btn-danger">Submit</button>
    </form>
</div>

다음과 같이 입력 모달 박스에 입력폼이 생성됨을 확인할 수 있다.

 

다음 링크에 들어간 후 Card Layout의 코드를 복사하여 Modal 코드 밑에 붙여 넣는다.

https://getbootstrap.com/docs/5.3/components/card/

 

 

row-cols-md-3 -> rows-cols-md-4 : 카드의 개수를 3개->4개로 변경

mx-auto w-75 : 전체 카드 영역의 크기 조절 및 가운데 정렬을 해준다.

pb-5 추가 : 레이아웃 아래에 여백을 준다. 

 

여기에 앨범 포스트 이미지를 추가한다. 이미지 링크는 다음과 같으며

https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/ive.jpg

 

 

코드에 다음과 같이 추가한다.

<div class="card h-100">
    <img src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/ive.jpg"
        class="card-img-top" alt="...">
	...
</div>

 

추가된 전체 코드는 다음과 같다.

<div class="row row-cols-1 row-cols-md-4 g-4 mx-auto w-75 pb-5">
    <div class="col">
        <div class="card h-100">
            <img src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/ive.jpg"
                class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
                    additional content. This content is a little bit longer.</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card h-100">
            <img src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/ive.jpg"
                class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">This is a short card.</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card h-100">
            <img src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/ive.jpg"
                class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
                    additional content.</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card h-100">
            <img src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/ive.jpg"
                class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
                    additional content. This content is a little bit longer.</p>
            </div>
        </div>
    </div>
</div>

 

화면은 다음과 같이 출력된다.

 

진행 사항 정리

부트스트랩을 사용히여 UI/UX 생성 과정을 실습을 통해 익힐 수 있었다. 꽤 괜찮은 모양의 웹 페이지가 생생되었는데, 이번에 배운 기능을 사용하여 앞으로 진행할 프로젝트의 화면을 어느 정도 구성할 수 있을 것 같다. 필요한 UI가 있을 때 부트스트랩 페이지를 적극적으로 참조하여 반영할 수 있도록 익숙해져야겠다.

백엔드 개발자로 진로를 정했다고 하더라도 기본적인 프론트엔드의 기능은 알아두는 것이 필요하므로 충분히 익숙해질 수 있도록 연습해두도록 한다.