네비게이션바 구현
- 부트스르트립을 이용하여 네비게이션바를 구현하고자 한다.
- 예시를 진행하면서 점점 완성하는 식으로 정리하고자 한다.
1. 네비게이션바
기본 틀을 잡음
예제 안의 정리한 메모처럼 모바일로 전환하기위한 navbar-header,
pc와 모바일부분이 같게 나오게 설정하는 부분,
검색폼 등을 구현한다.
<div class="container">
<!--
.navbar {
display: none;
}
.navbar-default{
background-color: #f8f8f8; /*navbar의 색상과 테두리색 설정 */
border-color: #e7e7e7;
}
.navbar-header{
float:left; /*왼쪽을 기준으로 배치*/
}
-->
<!-- 상단메뉴 및 서브메뉴 포함된 bar생성 -->
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<!-- pc화면과 모바일 화면의 전환효과
1.navbar-toggle=>네비게이션의 화면출력유무(모바일화면으로 전환할때 우측상단 메뉴클릭)
2.data-toggle="collapse" => 모바일상태에서 클릭하면 메뉴가 나오게 설정
3.data-target="찾아가는 클래스선택자(navbar-ex1-collapse)"
(모바일 상태의 메뉴동작과 연동부분)
-->
<button type="button" class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-ex1-collapse"><!-- pc버전에선 안보이고 모바일버전으론 보임 -->
<span class="sr-only">navigation title</span>
<span class="icon-bar"></span><!-- 영역설정 -->
</button>
<a href="index.jsp"><!-- 원하는 아이콘을 쓸때는 span태그에 glyphicon을 줘야한다 -->
<span class="glyphicon glyphicon-home"></span>
</a>
</div>
<!-- pc와 모바일부분이 같게 나오게 설정하는 부분
모바일 상태에서 나오게 설정하는 부분(메뉴)
nav->display:block;
1. navbar-nav ->네비게이션바의 메뉴설정할때 사용
.navbar-nav{
margin:7.5px -15px;
}
2.collapse->맨 처음에는 메뉴가 안나오게 설정
3.navbar-ex1-collapse ->모바일 상태에서 찾아가게 해주는 선택자
4.navbar-collapse->네비게이션바의 주메뉴의 출력부분 설정할때
-->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="#">공지사항</a></li>
<li><a href="#">자유게시판</a></li>
<li><a href="#">Q&A</a></li>
</ul>
<!-- 검색폼(role="search")과 버튼 추가
1.navbar-form=>네비게이션바에 추가된 폼
2.네비게이션의 항복->navbar-right(선택자)=>오른쪽에 배치
.navbar-form {
padding: 10px 15px;
margin-top: 8px;
margin-right: -15px;
margin-bottom: 8px;
margin-left: -15px;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
}
-->
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="검색어입력">
</div>
<button type="button" class="btn btn-default">Submit</button>
</form>
</div>
</nav>2. 네비게이션바
아이콘, 아이콘 정렬, 드랍다운 추가
아이콘을 추가하며 적렬을 하고 드랍다운을 추가한다.
<div class="container">
<!-- 상단메뉴 및 서브메뉴 포함된 bar생성 -->
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<!-- pc화면과 모바일 화면의 전환효과
1.navbar-toggle=>네비게이션의 화면출력유무(모바일화면으로 전환할때 우측상단 메뉴클릭)
2.data-toggle="collapse" => 모바일상태에서 클릭하면 메뉴가 나오게 설정
3.data-target="찾아가는 클래스선택자(navbar-ex1-collapse)"
(모바일 상태의 메뉴동작과 연동부분)
-->
<button type="button" class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-ex1-collapse"><!-- pc버전에선 안보이고 모바일버전으론 보임 -->
<span class="sr-only">navigation title</span>
<span class="icon-bar"></span><!-- 영역설정 -->
</button>
<!--
.navbar-brand{ /*로고를 기준으로 해서 왼쪽 정렬*/
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
-->
<!-- 아이콘, 적렬 적용함 -->
<a class="navbar-brand glyphicon" href="index.jsp"><!-- 원하는 아이콘을 쓸때는 span태그에 glyphicon을 줘야한다 -->
<span class="glyphicon glyphicon-home"></span>
</a>
</div>
<!-- pc와 모바일부분이 같게 나오게 설정하는 부분
모바일 상태에서 나오게 설정하는 부분(메뉴)
nav->display:block;
1. navbar-nav ->네비게이션바의 메뉴설정할때 사용
.navbar-nav{
margin:7.5px -15px;
}
2.collapse->맨 처음에는 메뉴가 안나오게 설정
3.navbar-ex1-collapse ->모바일 상태에서 찾아가게 해주는 선택자
4.navbar-collapse->네비게이션바의 주메뉴의 출력부분 설정할때
-->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="#">공지사항</a></li>
<li><a href="#">자유게시판</a></li>
<!-- <li><a href="#">Q&A</a></li> -->
<!-- 드롭다운 적용-->
<li class="dropdown">
<a data-toggle="dropdown" href="#">사용자
<span class="caret"></span></a><!-- 이벤트대상 -->
<ul class="dropdown-menu">
<li><a href="#">회원로그인</a></li>
<li><a href="#">자유게시판</a></li>
<li><a href="#">설문조사</a></li>
<li class="divider"></li> <!-- 분리선 -->
<li><a href="#">관리자</a></li>
</ul>
</li>
<!-- 드롭다운 부분을 추가2 -->
<li class="dropdown">
<a data-toggle="dropdown" href="#">관리자
<span class="caret"></span></a><!-- 이벤트대상 -->
<ul class="dropdown-menu">
<li><a href="#">관리자 로그인</a></li>
<li><a href="#">공지사항</a></li>
<li><a href="#">통계처리</a></li>
</ul>
</li>
<!-- 드롭다운 부분을 추가3 -->
<li class="dropdown">
<a data-toggle="dropdown" href="#">Q&A
<span class="caret"></span></a><!-- 이벤트대상 -->
<ul class="dropdown-menu">
<li><a href="#">자료실</a></li>
<li><a href="#">자유게시판2</a></li>
<li><a href="#">설문조사2</a></li>
<li class="divider"></li> <!-- 분리선 -->
<li><a href="#">관리자</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="검색어입력">
</div>
<button type="button" class="btn btn-default">Submit</button>
</form>
</div>
</nav>3. 네비게이션바
네비게이션 반전효과, 상단메뉴 고정,상단메뉴중에 사용자메뉴 아이콘으로 대체, 네비게이션 전용 버튼 추가, 문자열, 링크문자열 넣기
- 네비게이션 색깔 반전효과를 적용
- 상단메뉴 고정 (위아래로 움직여도 상단에 고정되서 따라 내려온다)
- 상단메뉴중에 사용자메뉴 아이콘으로 대체
- 네비게이션 전용 버튼 추가 및 문자열,링크문자열 넣기
<h3 class="text-success text-center">네비게이션바 구현</h3>
<div class="container">
<!-- 상단메뉴 및 서브메뉴 포함된 bar생성 -->
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-ex1-collapse"><!-- pc버전에선 안보이고 모바일버전으론 보임 -->
<span class="sr-only">navigation title</span>
<span class="icon-bar"></span><!-- 영역설정 -->
</button>
<!--
-->
<!-- 아이콘, 적렬 적용함 -->
<a class="navbar-brand glyphicon" href="index.jsp"><!-- 원하는 아이콘을 쓸때는 span태그에 glyphicon을 줘야한다 -->
<span class="glyphicon glyphicon-home"></span>
</a>
</div>
<!--
-->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="#">공지사항</a></li>
<li><a href="#">자유게시판</a></li>
<!-- <li><a href="#">Q&A</a></li> -->
<!-- 드롭다운 적용-->
<li class="dropdown">
<!-- <a data-toggle="dropdown" href="#">사용자
사용자를 지우고 링크부분에 class="glyphicon glyphicon-user"
-->
<a class="glyphicon glyphicon-user" data-toggle="dropdown" href="#">
<span class="caret"></span></a><!-- 이벤트대상 -->
<ul class="dropdown-menu">
<li><a href="#">회원로그인</a></li>
<li><a href="#">자유게시판</a></li>
<li><a href="#">설문조사</a></li>
<li class="divider"></li> <!-- 분리선 -->
<li><a href="#">관리자</a></li>
</ul>
</li>
<!-- 드롭다운 부분을 추가2 -->
<li class="dropdown">
<a data-toggle="dropdown" href="#">관리자
<span class="caret"></span></a><!-- 이벤트대상 -->
<ul class="dropdown-menu">
<li><a href="#">관리자 로그인</a></li>
<li><a href="#">공지사항</a></li>
<li><a href="#">통계처리</a></li>
</ul>
</li>
<!-- 드롭다운 부분을 추가3 -->
<li class="dropdown">
<a data-toggle="dropdown" href="#">Q&A
<span class="caret"></span></a><!-- 이벤트대상 -->
<ul class="dropdown-menu">
<li><a href="#">자료실</a></li>
<li><a href="#">자유게시판2</a></li>
<li><a href="#">설문조사2</a></li>
<li class="divider"></li> <!-- 분리선 -->
<li><a href="#">관리자</a></li>
</ul>
</li>
</ul>
<!-- 검색폼(role="search")과 버튼 추가
1.navbar-form=>네비게이션바에 추가된 폼
2.네비게이션의 항목->navbar-right(선택자)=>오른쪽에 배치
-->
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="검색어입력">
</div>
<button type="button" class="btn btn-default">Submit</button>
</form>
<!--
1.네비게이션바에 버튼추가->navbar-btn 클래스 이용
2.네비게이션바에 들어가는 문자열->nacbar-text 사용
3.네비게이션바에 들어가는 링크문자열
->navbar-link(pull-right)오른쪽에 베치
-->
<button type="button" class="btn btn-default navbar-btn">단순버튼</button><!-- 네비게이션 전용 버튼 -->
<p class="navbar-text">로그인</p>
<p class="navbar-text pull-right"> <!-- 링크문자열 -->
<a href="register.jsp" class="navbar-link">회원가입</a>
</p>
</div>
</nav>
2022-08-10
