부트스트랩을 활용한 유저 UI

헤더

헤더는 부트스트랩의 navbar를 활용하여 구성하였습니다.

 <nav class="navbar sticky-top navbar-light bg-light">
    <div class="container-fluid">
     .....
    </div>
 </nav>

sticky-top을 통해 스크롤을 움직이더라도 헤더가 화면의 상단에 붙어있을 수 있도록 만듭니다.

그리고 헤더 안에 들어갈 요소는 부트스트랩의 row, col을 활용하여 구역을 나눠주었습니다.

row, col

<div class="row">
        <div class="col-3 px-3 p-2">
          <a href="/" class="d-flex navbar-brand">
            <h3 class="m-0">
              SAVER
            </h3>
          </a>
        </div>
        <div class="col-7">
          <form class="d-flex p-2">
            <input class="form-control input-sm" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">
              <i class="fa fa-search" aria-hidden="true"></i>
            </button>
          </form>
        </div>
        <div class="d-flex col-2 p-2">
          <button class="btn float-end" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" role="button">
            <i class="fa fa-gear fs-1"></i>
          </button>
        </div>
</div>

그리고 마지막 설정 아이콘에는 메뉴가 나타나는 기능을 추가하였습니다.

이 기능 역시 부트스트랩의 offcanvas 기능을 활용하여 구현하였습니다.

설정 메뉴

 <div class="offcanvas offcanvas-end w-50" tabindex="-1" id="offcanvas" data-bs-keyboard="false"
        data-bs-backdrop="false">
        <div class="offcanvas-header">
          <h2 class="offcanvas-title d-lg-block" id="offcanvas">Menu</h2>
          <button type="button" class="btn-close text-reset fs-3" data-bs-dismiss="offcanvas"
            aria-label="Close"></button>
        </div>
        <div class="offcanvas-body px-0">
          <ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-start" id="menu">
            <li class="nav-item">
              <a href="#" class="nav-link text-truncate">
                <i class="bi-house"></i><span class="ms-1 d-md-inline">알림</span>
              </a>
            </li>
            <li class="nav-item">
              <a href="#submenu1" data-bs-toggle="collapse" class="nav-link text-truncate">
                <i class="bi-speedometer2"></i><span class="ms-1 d-sm-inline">고객센터</span> </a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link text-truncate">
                <i class="bi-table"></i><span class="ms-1 d-sm-inline">이용안내</span></a>
            </li>
            <li class="dropdown" class="nav-item">
              <a href="#" class="nav-link dropdown-toggle  text-truncate" id="dropdown" data-bs-toggle="dropdown"
                aria-expanded="false">
                <i class="bi-bootstrap"></i><span class="ms-1 d-sm-inline">기타 메뉴...</span>
              </a>
              <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdown">
                <li><a class="dropdown-item" href="#">New project...</a></li>
                <li><a class="dropdown-item" href="#">Settings</a></li>
                <li><a class="dropdown-item" href="#">Profile</a></li>
                <li>
                  <hr class="dropdown-divider">
                </li>
                <li><a class="dropdown-item" href="#">Sign out</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>

메인

메인부분은 부트스트랩의 card를 활용하여 만들었습니다.

card부분

<a href=<%=`/articles/${todayArticle.id}` %> >
      <div class="card text-dark bg-light mb-1" style="height: 5rem;">
        <div class="card-header p-2">오늘의 뉴스</div>
        <div class="card-body p-2">
          <h5 class="card-title text-truncate">
            <%= todayArticle.headline %>
          </h5>
        </div>
      </div>
    </a>