[Web] Web-project . 영화 사이트 만들기 -1 ( Navbar + Footer )

🚀 부트스트랩을 이용하여 내비게이션 바 만들기

📌 반응형 + 이미지 삽입

코드

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="02_home.html">
          <img src="./images/logo.png" alt="Bootstrap" width="110" height="45">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="02_home.html">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="03_community.html">Community</a>
            </li>

            <li class="nav-item">
              <a class="nav-link"data-bs-toggle="modal" data-bs-target="#exampleModal">Login</a>
            </li>

반응형 비헤이비어

.navbar-toggler, .navbar-collapse, 및 .navbar-expand{-sm|-md|-lg|-xl|-xxl} 클래스를 사용하여 콘텐츠가 버튼 뒤쪽에서 접히는 시점을 결정합니다. 다른 유틸리티와 결합하여 특정 요소를 언제 표시하고 감출지 손쉽게 선택할 수 있습니다.
접히지 않는 내비게이션 바의 경우, .navbar-expand 클래스를 내비게이션 바에 추가합니다. 항상 접히는 내비게이션 바의 경우 .navbar-expand 클래스를 추가하지 마십시오.

토글

내비게이션 바의 토글은 기본적으로 왼쪽 정렬이지만 .navbar-brand와 같은 형제 요소와 연결되는 경우는 자동으로 오른쪽 정렬이 됩니다. 마크업을 거꾸로 하면 토글의 배치도 반대로 바뀝니다.

📌 로그인 모달 만들기 + 폼 사용하기

코드

<li class="nav-item">
   <a class="nav-link"data-bs-toggle="modal" data-bs-target="#exampleModal">Login</a>
</li>
<!-- Modal -->
<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">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- Login -->
        <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>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </div>
</div>

플로팅 라벨

// Floating labels
입력 필드 위로 떠오르는 예쁘고 간단한 폼 라벨을 작성할 수 있습니다.
input class="form-control" 과 label 요소를 함께 .form-floating으로 감싸면, Bootstrap의 텍스트 형식의 폼 필드에서 플로팅 라벨 사용이 가능합니다. CSS만으로 플로팅 라벨을 실현하는 방법은 :placeholder-shown 가상 요소를 사용하기 때문에 각 input 에는 placeholder가 필요합니다. 또한 형제 셀렉터(예를 들어, ~)를 사용하기 때문에 input이 처음에 와야 하는 순서에 주의해 주세요.

Readonly plaintext

Floating labels also support .form-control-plaintext, which can be helpful for toggling from an editable input to a plaintext value without affecting the page layout.

🚀 footer 만들기

📌 하단에 고정 + 가운데 정렬

코드

 <footer class=" position-fixed fixed-bottom bg-white">
   <div class="px-auto mb-1 text-center">
     Web-bootstrap PJT
   </div>
 </footer>