본문 바로가기
개발/Spring 블로그 만들기

Spring 블로그 만들기 - 15. 상단 메뉴바 만들기(부트스트랩)

by 똘똘이박사 2019. 3. 29.



이 포스팅의 샘플 게시판 개발 환경은 MAC OS, STS, OpenJDK11 입니다.


레이아웃 설정에 대한 포스팅은 아래와 같은 순서로 진행합니다.

  1. 부트스트랩 Navbars

  2. 메뉴바 소스 복사하기

  3. 수정 및 적용 하기


블로그 만들기 - 15. 상단 메뉴바 만들기(부트스트랩)



부트스트랩 Navbars

이제 게시판에 카테고리를 적용하여 여러 개의 게시판을 사용 할 수 있도록 해보려고 합니다. 여러 개의 게시판에 접근 할 수 있도록 메뉴를 만들어야 합니다. 이 게시판의 전체적인 디자인은 부트스트랩을 사용하고 있으므로 메뉴바 역시 부트스트랩을 이용해 만들 계획입니다. 예전에 게시판 디자인을 참고 했던 부트스트랩의 공식 페이지에서 Examples에 접속해 봅니다. (포스팅의 부트스트랩 버전은 4.2.1 입니다.) 

스크롤을 조금만 아래로 내려보면 그림과 같이 Navbars가 보입니다. 

여러 가지 샘플들 중에서 'Navbars' 를 선택해 보면 아래 그림과 같이 여러 종류의 상단 메뉴바를 볼 수 있습니다.

너비 1200px 이상 (xl : Extra large devices)


모두 똑같아 보이지만 모두 다른 메뉴바 입니다. 이 메뉴바의 특징은 부트스트랩의 장점인 반응형을 기본적으로 지원한다는 것입니다. 브라우저의 크기에 따라 메뉴가 어떻게 보여지는지 상황에 따른 메뉴를 구별해 놓았기 때문에 현재 처럼 풀 스크린 상태에서는 모든 메뉴바가 비슷한 모양 처럼 보입니다. 브라우저 크기를 아래 그림과 조절해 보면 서로 어떤 차이점이 있는지 확인해 볼 수 있습니다.

너비 1200px 이하 (lg : Large devices)


너비 992px 이하 (md : Medium devices)


너비 768px 이하 (sm : Small devices)


너비 576px 이하 



부트스트랩에서 정의한 화면 크기를 그림으로 표현하면 아래와 같습니다.



단위는 px 이며, 576 이하는 특별히 명칭이 존재하지는 않습니다. 다만 Extra small 이라고 부릅니다.



메뉴바 소스 복사 하기

이제 부트스트랩 메뉴바를 이제 우리 게시판에 적용시켜 보도록 하겠습니다.

부트스트랩의 샘플 페이지에서 해당 샘플 소스를 별도로 제공하고 있지 않기 때문에 따로 알아 봐야 합니다. 브라우저 에서 'F12' 키를 눌러 개발자 모드로 들어가 확인해 봅니다. 아래 그림과 같이 하단에 개발자 모드 창이 열리면 메뉴중 가장 왼쪽에 있는 아이콘을 클릭 합니다. 아이콘이 파란색으로 활성화 되면 우리가 적용하고자 하는 sm 사이즈의 메뉴바를 클릭합니다.

그럼 아래 그림과 같이 Elements 탭에 우리가 클릭한 부분의 소스가 선택되어 집니다.



이 라인의 가장 왼쪽에 보면 '···' 이 보입니다. 이것을 클릭하면 팝업 메뉴가 열리는데 [copy > copy element] 를 클릭 합니다.



이렇게 하면 우리가 화면에서 선택한 부분의 소스가 클립보드에 복사가 됩니다.

이제 이클립스로 이동해 이 소스를 복사 합니다. 상단의 메뉴바 이므로 이전에 만들어 두었던 header.jsp 에 추가 합니다.


header.jsp 수정(메뉴바 관련 소스 추가)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!-- jQuery -->

<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

 -->

 <%-- <script src="${pageContext.request.contextPath}/resources/common/js/jquery-3.3.1.min.js" ></script> --%>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Bootstrap CSS -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">


<!-- Bootstrap theme -->

<%-- <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/bootstrap/css/bootstrap-theme.min.css"> --%>


<!-- common CSS -->

<link rel="stylesheet" href="<c:url value='/resources/common/css/common.css'/>" >


<!--메뉴바 추가 부분-->

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">

  <a class="navbar-brand" href="#">Expand at sm</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>


  <div class="collapse navbar-collapse" id="navbarsExample03">

    <ul class="navbar-nav mr-auto">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Link</a>

      </li>

      <li class="nav-item">

        <a class="nav-link disabled" href="#">Disabled</a>

      </li>

      <li class="nav-item dropdown">

        <a class="nav-link dropdown-toggle" href="#" id="dropdown03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>

        <div class="dropdown-menu" aria-labelledby="dropdown03">

          <a class="dropdown-item" href="#">Action</a>

          <a class="dropdown-item" href="#">Another action</a>

          <a class="dropdown-item" href="#">Something else here</a>

        </div>

      </li>

    </ul>

    <form class="form-inline my-2 my-md-0">

      <input class="form-control" type="text" placeholder="Search">

    </form>

  </div>

</nav>


한 군데 더 수정해야 할 곳이 있습니다.

메뉴바를 추가하기 이전에 화면을 좀더 보기 좋게 하기 위해 body 상단에 주었던 padding-top 값을 0로 변경해야 합니다. 이 스타일 값은 common.css에서 관리하고 있습니다.


common.css 수정 (padding-top 값을 70 -> 0 으로 수정)

body {

padding-top: 0px;

padding-bottom: 30px;

}

이하 생략


이제 게시판을 다시 확인해 봅니다.



수정 및 적용 하기

메뉴바의 타이틀과 메뉴명이 아직 그대로 입니다. 이 부분을 우리 게시판에 맞게 수정해 주겠습니다. 메뉴는 일반게시판(board)와 질문 게시판(Q&A)만 만들도록 소스를 수정하겠습니다.


header.jsp 수정

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>


<!-- jQuery -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<!-- Bootstrap CSS -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">


<!-- common CSS -->

<link rel="stylesheet" href="<c:url value='/resources/common/css/common.css'/>" >


<!-- 상단 메뉴바{s} -->

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">

  <a class="navbar-brand" href="#">FREEHOON.COM</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>


  <div class="collapse navbar-collapse" id="navbarsExample03">

    <ul class="navbar-nav mr-auto">

      <li class="nav-item">

        <a class="nav-link" href="#">Board <span class="sr-only">(current)</span></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Q&A</a>

      </li>

    </ul>

    <form class="form-inline my-2 my-md-0">

      <input class="form-control" type="text" placeholder="Search">

    </form>

  </div>

</nav>

<!-- 상단 메뉴바{e} -->


화면을 갱신하여 결과를 확인해 봅니다.

화면도 줄여서 확인해 봅니다.


다음 포스팅에서는 메뉴의 카테고리를 관리하는 방법과 실제로 메뉴를 클릭하였을 경우 메뉴가 이동하는 방법에 대해서 알아 보도록 하겠습니다.


블로그 만들기 포스팅 리스트

  1. Spring 블로그 만들기 - 1. 프로젝트 생성 및 character encoding setting
  2. Spring 블로그 만들기 - 2. DB 셋팅 및 접속 테스트 Part.1
  3. Spring 블로그 만들기 - 2. DB 셋팅 및 접속 테스트 Part.2
  4. Spring 블로그 만들기 - 3. 게시판 리스트 화면 만들기
  5. Spring 블로그 만들기 - 4. 글쓰기 화면 만들기
  6. Spring 블로그 만들기 - 5. 상세조회 화면 만들기
  7. Spring 블로그 만들기 - 6. 수정 및 삭제
  8. Spring 블로그 만들기 - 7. 예외 처리
  9. Spring 블로그 만들기 - 8. 트랜젝션 처리
  10. Spring 블로그 만들기 - 9. 페이징(pagination)
  11. Spring 블로그 만들기 - 10. 게시물 검색(search)
  12. Spring 블로그 만들기 - 11. Properties 사용하기
  13. Spring 블로그 만들기 - 12. 댓글 리스트
  14. Spring 블로그 만들기 - 13. 댓글 쓰기/수정/삭제
  15. Spring 블로그 만들기 - 14. 위지윅 에디터 사용하기(CKEditor5)
  16. Spring 블로그 만들기 - 15. 상단 메뉴바 만들기(부트스트랩)
  17. Spring 블로그 만들기 - 16. 게시판 메뉴 관리
  18. Spring 블로그 만들기 - 17. 로그인 화면 만들기 및 레이아웃 나누기
  19. Spring 블로그 만들기 - 18. 회원가입 및 관리

 





※ 포스팅에 오타나 잘못된 부분, 추가적으로 더 알고 싶은 부분이 있으면 댓글 주세요~


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

'개발 > Spring 블로그 만들기' 카테고리의 다른 글

Spring 블로그 만들기 - 17. 로그인 화면 만들기 및 레이아웃 나누기  (1) 2019.04.09
Spring 블로그 만들기 - 16. 게시판 메뉴 관리  (3) 2019.04.04
Spring 블로그 만들기 - 14. 위지윅 에디터 사용하기(CKEditor5)  (10) 2019.03.18
Spring 블로그 만들기 - 13. 댓글 쓰기/수정/삭제  (24) 2019.03.14
Spring 블로그 만들기 - 12. 댓글 리스트  (22) 2019.03.13

관련글

티스토리툴바