CSS 네비게이션 바(navigation bar) 링크, 수직, 수평
본문 바로가기

CSS 네비게이션 바(navigation bar) 링크, 수직, 수평

액트 2020. 3. 20.

내비게이션 바(navigation bar)

사용자가 웹 사이트에서 가장 많이 클릭하는 영역 중 하나가 바로 내비게이션 바입니다.

내비게이션 바(navigation bar)는 우리가 흔히 사용하는 웹 사이트의 메뉴를 의미합니다.

HTML 요소만으로 만든 단순한 메뉴에 CSS를 이용하면, 보기에도 이쁘고 쓰기도 편리한 메뉴로 손쉽게 바꿀 수 있습니다.

 

링크를 사용한 리스트 메뉴

내비게이션 바 중에서도 가장 기본적인 것이 바로 링크(link)를 사용한 리스트 메뉴입니다.

HTML에서 링크는 <a>태그로 표현합니다.

 

다음 예제는 링크를 사용하여 구현한 간단한 메뉴 예제입니다.

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Navigation bar</title>
	<style>
		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
	</style>
</head>

<body>

	<h1>링크를 사용한 리스트 메뉴</h1>
	<ul>
		<li><a href="www.naver.com">네이버</a></li>
		<li><a href="www.daum.net">다음</a></li>
		<li><a href="www.nate.com">네이트</a></li>
		<li><a href="www.google.com">구글</a></li>
	</ul>

</body>

</html>

링크를 사용한 리스트 메뉴

 

수직 내비게이션 바

링크를 사용한 리스트 메뉴에 display 속성값을 block으로 설정하면, 간단히 수직 내비게이션 바를 만들 수 있습니다.

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Navigation bar</title>
	<style>
		ul {
			background-color: #FFDAB9;
			width: 150px;
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
		li a {
			display: block;
			color: #000000;
			padding: 8px;
			text-decoration: none;
			font-weight: bold;
		}
		li a:hover {
			background-color: #CD853F;
			color: white;
		}
	</style>
</head>

<body>

	<h1>수직 내비게이션 바</h1>
	<ul>
		<li><a href="/index.php">Home</a></li>
		<li><a href="/html/intro">HTML</a></li>
		<li><a href="/css/intro">CSS</a></li>
		<li><a href="/javascript/intro">자바스크립트</a></li>
	</ul>

</body>

</html>

수직 내비게이션 바

위의 예제에서 인라인 요소인 <a>요소의 display 속성값을 블록(block)으로 변경하면, 메뉴의 어느 곳을 클릭하더라도 바로 연결된 페이지로 넘어가게 설정됩니다.

 

클래스(class)를 이용하면 내비게이션 바에서 현재 메뉴의 위치도 표현할 수 있습니다.

<style>

    li a.current { background-color: #FF6347; color: white; }

    li a:hover:not(.current) { background-color: #CD853F; color: white; }

</style>
<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Navigation bar</title>
	<style>
		ul {
			background-color: #FFDAB9;
			width: 150px;
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
		li a {
			display: block;
			color: #000000;
			padding: 8px;
			text-align: center;
			text-decoration: none;
			font-weight: bold;
		}
		li a.current {				<!-- 현재 메뉴 위치표시 -->
			background-color: #FF6347;
			color: white;
		}
		li a:hover:not(.current) {								
			background-color: #CD853F;
			color: white;
		}
	</style>
</head>

<body>

	<h1>현재 메뉴의 위치 표시</h1>
	<ul>
		<li><a href="/index.php">Home</a></li>
		<li><a class="current" href="/html/intro">HTML</a></li>   <!-- 현재 메뉴 위치표시 -->
		<li><a href="/css/intro">CSS</a></li>
		<li><a href="/javascript/intro">자바스크립트</a></li>
	</ul>

</body>

</html>

수직 네비게이션 바, 현재 메뉴의 위치 표시

 

border 속성을 이용하면 내비게이션 바에 경계선을 표현할 수 있습니다.

<style>

    li { border-bottom: solid 1px black; }

    li:last-child { border-bottom: none; }

</style>
<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Navigation bar</title>
	<style>
		ul {
			background-color: #FFDAB9;
			width: 150px;
			list-style-type: none;
			margin: 0;
			padding: 0;
			border: solid 1px black;
		}
		li { border-bottom: solid 1px black; }
		li:last-child { border-bottom: none; }
		li a {
			display: block;
			color: #000000;
			padding: 8px;
			text-align: center;
			text-decoration: none;
			font-weight: bold;
		}
		li a.current {
			background-color: #FF6347;
			color: white;
		}
		li a:hover:not(.current) {
			background-color: #CD853F;
			color: white;
		}
	</style>
</head>

<body>

	<h1>메뉴 간 경계선 표현</h1>
	<ul>
		<li><a href="/index.php">Home</a></li>
		<li><a class="current" href="/html/intro">HTML</a></li>
		<li><a href="/css/intro">CSS</a></li>
		<li><a href="/javascript/intro">자바스크립트</a></li>
	</ul>

</body>

</html>

메뉴 간 경계선 표현

 

수평 내비게이션 바

수평 내비게이션 바는 다음과 같은 속성을 이용해 만들 수 있습니다.

  1.  display 속성의 inline 속성값을 이용한 방법
  2.  floating 속성을 이용한 방법

 

1. display 속성의 inline 속성값을 이용한 방법

링크를 사용한 리스트 메뉴에서 <li>요소의 display 속성값을 inline으로 설정합니다.

그러면 블록 요소였던 <li>요소가 인라인 요소의 성질을 갖도록 변경됩니다.

 

인라인 요소로 변경된 <li>요소는 너비가 자신의 내용만큼만을 차지하도록 변경됩니다.

따라서 모든 <li>요소가 수평으로 늘어서게 되며, 이것을 이용하여 수평 내비게이션 바를 만들게 됩니다.

<style>

    li { display: inline; }

</style>
<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Navigation bar</title>
	<style>
		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
		li { display: inline; }
	</style>
</head>

<body>

	<h1>display 속성을 이용한 수평 내비게이션 바</h1>
	<ul>
		<li><a href="/index.php">Home</a></li>
		<li><a href="/html/intro">HTML</a></li>
		<li><a href="/css/intro">CSS</a></li>
		<li><a href="/bbs/login.php">로그인</a></li>
		<li><a href="/bbs/register_form.php">회원가입</a></li>
	</ul>

</body>

</html>

display 속성의 inline 속성값을 이용한 방법

 

2. floating 속성을 이용한 방법

링크를 사용한 리스트 메뉴의 <li>요소에 float 속성을 설정합니다.

 

이때 float 속성값을 left로 설정하면, 모든 메뉴가 왼쪽으로 정렬됩니다.

또한, float 속성값을 right로 설정하면, 모든 메뉴가 오른쪽으로 정렬됩니다.

<style>

    li { float: left; }

    li a { display: block; background-color: #FFDAB9; padding: 8px; }

</style>
<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Navigation bar</title>
	<style>
		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
		li { float: left; }
		li a {
			display: block;
			background-color: #FFDAB9;
			padding: 8px;
		}
	</style>
</head>

<body>

	<h1>floating 속성을 이용한 수평 내비게이션 바</h1>
	<ul>
		<li><a href="/index.php">Home</a></li>
		<li><a href="/html/intro">HTML</a></li>
		<li><a href="/css/intro">CSS</a></li>
		<li><a href="/bbs/login.php">로그인</a></li>
		<li><a href="/bbs/register_form.php">회원가입</a></li>
	</ul>

</body>

</html>

 

CSS를 이용하면 수평 내비게이션 바에 여러 가지 스타일을 설정할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Navigation bar</title>
	<style>
		ul {
			background-color: #FFDAB9;
			list-style-type: none;
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
		li { float: left; }
		li a {
			display: block;
			background-color: #FFDAB9;
			color: #000000;
			padding: 8px;
			text-decoration: none;
			text-align: center;
			font-weight: bold;
		}
		li a:hover {
			background-color: #CD853F;
			color: white;
		}
	</style>
</head>

<body>

	<h1>수평 내비게이션 바</h1>
	<ul>
		<li><a href="/index.php">Home</a></li>
		<li><a href="/html/intro">HTML</a></li>
		<li><a href="/css/intro">CSS</a></li>
		<li><a href="/bbs/login.php">로그인</a></li>
		<li><a href="/bbs/register_form.php">회원가입</a></li>
	</ul>

</body>

</html>

CSS를 이용하면 수평 내비게이션 바에 여러 가지 스타일 설정

 

클래스(class)를 이용하면 내비게이션 바에서 현재 메뉴의 위치도 표현할 수 있습니다.

위의 예제에서는 :not 선택자를 이용하여 현재 메뉴를 나타내는 current 클래스와 그 외의 메뉴의 배경색을 구분하고 있습니다.

border 속성을 이용하면 내비게이션 바에 경계선을 표현할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Navigation bar</title>
	<style>
		ul {
			background-color: #FFDAB9;
			list-style-type: none;
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
		li { float: left; }
		li a {
			display: block;
			background-color: #FFDAB9;
			color: #000000;
			padding: 8px;
			text-decoration: none;
			text-align: center;
			font-weight: bold;
		}
		li a.current {
			background-color: #FF6347;
			color: white;
		}
		li a:hover:not(.current) {
			background-color: #CD853F;
			color: white;
		}
	</style>
</head>

<body>

	<h1>오른쪽 메뉴 설정</h1>
	<ul>
		<li><a href="/index.php">Home</a></li>
		<li><a href="/html/intro">HTML</a></li>
		<li><a class="current" href="/css/intro">CSS</a></li>
		<ul style="float:left; list-style-type:none;">
			<li><a href="/bbs/login.php">로그인</a></li>
			<li><a href="/bbs/register_form.php">회원가입</a></li>
		</ul>
	</ul>

</body>

</html>

CSS를 이용하면 수평 내비게이션 바에 여러 가지 스타일 설정

드롭다운 매뉴 설정은 다음 페이지에서 확인 가능합니다.

https://yjshin.tistory.com/entry/CSS-11-%EB%93%9C%EB%A1%AD%EB%8B%A4%EC%9A%B4dropdown-%EB%A7%A4%EB%89%B4-%EC%84%A4%EC%A0%95

 

[CSS] 11. 드롭다운(dropdown) 매뉴 설정

드롭다운 드롭다운(dropdown) 효과 해당 요소에 마우스를 올려서 다른 요소나 텍스트가 나타나게 하는 효과를 드롭다운(dropdown) 효과라고 합니다. CSS를 이용하면 이러한 드롭다운 효과를 간단히 설정할 수 있습..

yjshin.tistory.com

 

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

'IT > Web' 카테고리의 다른 글

CSS 툴팁(tooltip) 효과  (0) 2020.03.20
CSS 드롭다운(dropdown) 매뉴 설정  (0) 2020.03.20
CSS 선택자 (2)  (0) 2020.03.19
CSS 선택자 (1)  (0) 2020.02.24
CSS 위치 속성 - Float(플로트), align(정렬)  (0) 2020.02.20

관련글

댓글

티스토리툴바