Vue CLI 부트스크랩 5 내비게이션 바 1

Vue.js 3 & NodeJS/Vue 3

Vue CLI 부트스크랩 5 내비게이션 바 1 - Vue CLI Bootstrap 5 Navbar

carrotweb 2022. 2. 14. 00:21

728x90

Bootstrap(부트스크랩)을 사용하여 웹 페이지에 내비게이션 바(메뉴 바)를 생성하겠습니다.

1. C:\workspaces\nodeserver\testvue\src\App.vue 파일을 오픈합니다.

먼저 Semantic(시맨틱) HTML의 문서 구조가 되도록 기존 소스에 <header>, <main>, <footer> 태그를 추가하겠습니다. 기존 소스는 <main> 태그 안에 넣습니다. 이전 Bootstrap(부트스크랩)이 적용되었는지 확인하기 위해 추가한 버튼은 삭제하였습니다.

<template>
	<header>
	</header>
	<main>
		<div class="header">
			<div class="topline">
				<div class="headmenu">
					<div v-if="isLogin">
						{{this.$store.state.loginStore.memberId}}님, 안녕하세요.
						<span @click="Logout()">로그아웃</span>
					</div>
					<div v-else>
						<router-link :to="{ name: 'Login', query: { returnUrl: '/' }}" v-show="isLogin == false">로그인</router-link>
					</div>
				</div>
			</div>
			<div id="nav">
				<router-link to="/">Home</router-link> |
				<router-link to="/about">About</router-link> |
				<router-link :to="{name: 'BoardList'}">Board</router-link> |
				<router-link :to="{name: 'Score'}">Score</router-link>
			</div>
		</div>
		<router-view/>
	</main>
	<footer>
	</footer>
</template>

2. <header> 태그 안에 내비게이션 바를 생성하기 위해 <nav> 태그를 추가합니다.

<header>
	<nav class="navbar navbar-expand-sm navbar-light bg-light">
	</nav>
</header>

내비게이션 바를 생성하기 위해서는 <nav> 태그의 class에 .navbar과 .navbar-expand{-sm|-md|-lg|-xl|-xxl}가 추가되어야 합니다.

.navbar-expand{-sm|-md|-lg|-xl|-xxl}는 웹 브라우저의 가로 화면 크기를 설정합니다. 그래서 현재 웹 브라우저의 가로 화면 크기가 설정된 크기보다 작으면 내비게이션 아이템이 가로 정렬에서 세로 정렬로 변경됩니다. 즉 화면의 가로 크기로 PC 인지 모바일 인지 구분하게 됩니다.

.navbar-expand-sm : 화면 가로 크기가 576px보다 작으면 세로 정렬로 변경 (min-width: 576px)

.navbar-expand-md : 화면 가로 크기가 768px보다 작으면 세로 정렬로 변경 (min-width: 768px)

.navbar-expand-lg : 화면 가로 크기가 992px보다 작으면 세로 정렬로 변경 (min-width: 992px)

.navbar-expand-xl : 화면 가로 크기가 1200px보다 작으면 세로 정렬로 변경 (min-width: 1200px)

.navbar-expand-xxl : 화면 가로 크기가 1400px보다 작으면 세로 정렬로 변경 (min-width:1400px)

.bg-light는 내비게이션 바의 배경색을 회색(--bs-light-rgb: 248,249,250;)으로 처리해 줍니다.

3. 콘솔을 실행하고 Vue 프로젝트가 있는 C:\workspaces\nodeserver\testvue 폴더로 이동합니다. 그리고 콘솔에서 npm run 명령어를 실행합니다.

npm run serve

상단에 회색으로 내비게이션 바가 생성됩니다.

4. <nav> 태그 안에 <div> 태그의 class에 .container{-sm|-md|-lg|-xl|-xxl|fluid}를 추가합니다.

<header>
	<nav class="navbar navbar-expand-sm navbar-light bg-light">
		<div class="container-fluid">
		</div>
	</nav>
</header>

container(컨테이너)를 적용하여 내비게이션 바의 가로폭을 제한할 수 있습니다.

.container{-sm|-md|-lg|-xl|-xxl|fluid}는 <div>의 최대 크기를 웹 브라우저의 가로 화면 크기를 기준으로 설정합니다.

.container-sm : 화면 가로 크기가 576px보다 크거나 같으면 가로 크기를 540px으로 설정 (min-width: 576px)

.container-md : 화면 가로 크기가 768px보다 크거나 같으면 가로 크기를 720px으로 설정 (min-width: 768px)

.container-lg : 화면 가로 크기가 992px보다 크거나 같으면 가로 크기를 960px으로 설정 (min-width: 992px)

.container-xl : 화면 가로 크기가 1200px보다 크거나 같으면 가로 크기를 1140px으로 설정 (min-width: 1200px)

.container-xxl : 화면 가로 크기가 1400px보다 크거나 같으면 가로 크기를 1320px으로 설정 (min-width:1400px)

.container-fluid : 화면 가로 크기와 동일하게 설정

5. 기존 소스에 있는 <router-link>를 사용하여 내비게이션 바에 내비게이션 링크(메뉴 링크)로 추가합니다.

<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link :to="{name: 'BoardList'}">Board</router-link> |
<router-link :to="{name: 'Score'}">Score</router-link>

<ul> 태그와 <li> 태그를 사용하여 <router-link>을 목록으로 만듭니다.

그리고 <ul> 태그의 class에 .navbar-nav를 <li> 태그의 class에 .nav-item를 <router-link>의 class에 .nav-link를 추가합니다.

.nav-link는 내비게이션 링크를 네모난 박스 형태(메뉴)로 만들어 줍니다.

<header>
	<nav class="navbar navbar-expand-sm navbar-light bg-light">
		<div class="container-fluid">
			<ul class="navbar-nav">
				<li class="nav-item">
					<router-link to="/" class="nav-link">Home</router-link>
				</li>
				<li class="nav-item">
					<router-link to="/about" class="nav-link">About</router-link>
				</li>
				<li class="nav-item">
					<router-link :to="{name: 'BoardList'}" class="nav-link">Board</router-link>
				</li>
				<li class="nav-item">
					<router-link :to="{name: 'Score'}" class="nav-link">Score</router-link>
				</li>
			</ul>
		</div>
	</nav>
</header>

내비게이션 바안에 내비게이션 링크(메뉴)가 수평으로 정렬되어 나타납니다.

6. 내비게이션 링크(메뉴)에서 링크가 활성된 상태를 표시하기 위해 CSS를 추가합니다.

<router-link>에서는 링크가 활성화되면. router-link-active와. router-link-exact-active가 적용됩니다.

.router-link-active는 경로가 포함되면 class에 적용됩니다.

.router-link-exact-active는 경로가 정확하게 일치하면 class에 적용됩니다.

현재 웹 페이지가 게시판 리스트(/board)에 있으면 경로가 정확하게 일치하기 때문에 Board의 <router-link>에서는 .router-link-active와 .router-link-exact-active가 적용됩니다.

그러나 게시판 리스트(/board)에서 게시물을 클릭하여 게시물 뷰(/board/boardview?boardNo=1)에 있으면 경로가 포함되기 때문에 Board의 <router-link>에서는 .router-link-active가 적용됩니다.

즉, .router-link-active에 대해 CSS를 적용해 주면 됩니다.

nav .navbar-nav a.router-link-exact-active {
  color: #42b983 !important;
}

내비게이션 바안에 내비게이션 링크(메뉴)에 활성 된활성된 상태가 표시됩니다. 다른 링크를 클릭하여 활성된 상태가 표시되지 확인해 보시기 바랍니다.

내비게이션 바안에 내비게이션 링크(메뉴)에 활성 되지 않은 상태도 표시하기 위해서 <style>에 .nav-link를 추가합니다. 폰트도 볼드 처리하였습니다.

nav .navbar-nav a.nav-link {
  font-weight: bold;
  color: #2c3e50 !important;
}

7. 내비게이션 바에 brand(브랜드)를 추가합니다.

brand(브랜드)에는 회사명이나 제품명, 프로젝트명 또는 로고가 들어갑니다.

여기서는 Vue 로고 이미지를 추가해 보겠습니다.

<router-link>를 추가하고 class에 .navbar-brand를 추가합니다.

<header>
	<nav class="navbar navbar-expand-sm navbar-light bg-light">
		<div class="container-fluid">
			<router-link to="/" class="navbar-brand">
				<img alt="Vue logo" src="./assets/logo.png" style="height:25px;" />
			</router-link>
			<ul class="navbar-nav">
				<li class="nav-item">
					<router-link to="/" class="nav-link">Home</router-link>
				</li>
				<li class="nav-item">
					<router-link to="/about" class="nav-link">About</router-link>
				</li>
				<li class="nav-item">
					<router-link :to="{name: 'BoardList'}" class="nav-link">Board</router-link>
				</li>
				<li class="nav-item">
					<router-link :to="{name: 'Score'}" class="nav-link">Score</router-link>
				</li>
			</ul>
		</div>
	</nav>
</header>

내비게이션 바안에 로고가 표시되지만 내비게이션 링크가 오른쪽으로 이동됩니다.

그 이유는 container(컨테이너)의 CSS에 justify-content: space-between;이 적용되어 있어 container(컨테이너) 안 item(아이템)들의 사이(between)가 균일하게 간격이 생기게 됩니다.

container(컨테이너) 안의 정렬 방식(justify-content)은 다음과 같습니다.

flex-start는 아이템들을 왼쪽으로 정렬합니다. (기본값)

flex-end는 아이템들을 오른쪽으로 정렬합니다.

center는 아이템들을 가운데로 정렬합니다.

space-between는 아이템들의 사이에 동일한 간격으로 생깁니다.

space-around는 아이템의 왼쪽과 오른쪽 둘레에 동일한 간격이 생깁니다.

space-evenly는 아이템들의 사이와 왼쪽과 오른쪽에 동일한 간격으로 생깁니다.

그래서 <ul> 태그의 class에 .me-auto를 추가합니다.

.me-auto는 margin-right: auto!important;으로 오른쪽에 마진이 자동으로 추가되어 왼쪽으로 정렬되게 됩니다. 참고로 .ms-auto는 margin-left: auto!important;으로 왼쪽에 마진을 자동으로 추가되어 오른쪽으로 정렬됩니다.

<header>
	<nav class="navbar navbar-expand-sm navbar-light bg-light">
		<div class="container-fluid">
			<router-link to="/" class="navbar-brand">
				<img alt="Vue logo" src="./assets/logo.png" style="height:25px;" />
			</router-link>
			<ul class="navbar-nav me-auto">
				<li class="nav-item">
					<router-link to="/" class="nav-link">Home</router-link>
				</li>
				<li class="nav-item">
					<router-link to="/about" class="nav-link">About</router-link>
				</li>
				<li class="nav-item">
					<router-link :to="{name: 'BoardList'}" class="nav-link">Board</router-link>
				</li>
				<li class="nav-item">
					<router-link :to="{name: 'Score'}" class="nav-link">Score</router-link>
				</li>
			</ul>
			<span>text</span>
		</div>
	</nav>
</header>

8. 내비게이션 바가 모바일 사이즈에서 정상적으로 동작하는 것을 확인하기 위해 웹 브라우저에서 F12 키를 누릅니다. 그러면 개발자 툴이 나타납니다.

모바일 사이즈로 테스트하기 위해서 Toggle device toolbar 버튼을 클릭합니다.

그러면 웹 브라우저의 화면 사이즈가 설정한 모바일 장치별 사이즈로 변경됩니다.

화면을 크게 보기 위해 개발자 툴에서 세로로 점이 3개가 있는 버튼을 클릭합니다. 그리고 개발자 툴을 오른쪽으로 위치시키기 위해 Dock to right를 클릭합니다.

그럼 오른쪽으로 개발자 툴이 배치되어 화면을 크게 볼 수 있습니다.

내비게이션 바에 모바일 사이즈에서는 세로로 정렬되는 것을 확인할 수 있습니다.

그러나 로고와 내비게이션 바가 수평으로 정렬되어 수정이 필요합니다.

9. 로고와 내비게이션 바가 수직으로 정렬되게 하기 위해서 <div> 태그를 추가하고 class에 flex-basis:100%;를 추가합니다. flex-basis은 container(컨테이너) 안 item(아이템)의 초기 크기를 지정합니다.

<header>
	<nav class="navbar navbar-expand-sm navbar-light bg-light">
		<div class="container-fluid">
			<router-link to="/" class="navbar-brand">
				<img alt="Vue logo" src="./assets/logo.png" style="height:25px;" />
			</router-link>
			<div style="flex-basis:100%;">
				<ul class="navbar-nav me-auto">
					<li class="nav-item">
						<router-link to="/" class="nav-link">Home</router-link>
					</li>
					<li class="nav-item">
						<router-link to="/about" class="nav-link">About</router-link>
					</li>
					<li class="nav-item">
						<router-link :to="{name: 'BoardList'}" class="nav-link">Board</router-link>
					</li>
					<li class="nav-item">
						<router-link :to="{name: 'Score'}" class="nav-link">Score</router-link>
					</li>
				</ul>
			</div>
		</div>
	</nav>
</header>

그리고 <style>의 .nav-link에 text-align를 추가합니다. 그 이유는 <div> 태그의 class에 flex-basis:100%;가 적용되면 내비게이션 링크도 가로의 크기가 100%가 되어 텍스트가 중앙에 정렬되게 됩니다. 그래서 text-align를 left(왼쪽 정렬)로 initial(기본값)으로 설정합니다.

nav .navbar-nav a.nav-link {
  font-weight: bold;
  color: #2c3e50 !important;
  text-align:initial;
}

그러면 로고와 내비게이션 바가 수직으로 정렬되고 내비게이션 링크도 왼쪽으로 정렬되어 보기가 좋아집니다.

728x90

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

'Vue.js 3 & NodeJS > Vue 3' 카테고리의 다른 글

Vue CLI 부트스크랩 5 내비게이션 바 3 - Vue CLI Bootstrap 5 Navbar (0)	2022.02.27
Vue CLI 부트스크랩 5 내비게이션 바 2 - Vue CLI Bootstrap 5 Navbar Collapse (0)	2022.02.14
Vue CLI 시맨틱 HTML - Vue CLI Semantic HTML, Document Structure (0)	2022.02.06
Vue CLI 부트스크랩 아이콘 설치 - Vue CLI Bootstrap Icons Install (0)	2022.02.05
Vue CLI 부트스크랩 5 설치 - Vue CLI Bootstrap 5 Install (0)	2022.02.05

현재글Vue CLI 부트스크랩 5 내비게이션 바 1 - Vue CLI Bootstrap 5 Navbar

눈으로 개발하는 블로그