내비게이션 바는 생소할 수도 있지만 우리가 화면에서 보이는 목록 즉 메뉴를 만들 때 많이 쓰입니다.. 첫번째는 링크를 사용한 리스트 메뉴이며, 두번째는 수직 내비게이션 바이고, 세번 째는 display 속성을 이용한 수평 내비게이션 바 네번 째는 floating 속성을 이용한 수평 내비게이션 바를 알아보겠습니다.
1. 링크를 사용한 리스트 메뉴
가장 기본적인 방식으로 리스트를 만들어 각 리스트 요소에 링크를 걸어줌으로써 내가 원하는 요소를 눌렀을 때 요소와 연결된 곳으로 이동이 되는 방식입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Navigation bar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding:0;
}
</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>2. 수직 내비게이션 바
수직 내비게이션 바는 첫번 째 방식에서 디자인 요소를 조금 첨가한 방식으로, 훨씬 더 깔끔하고 직관적이다라는 장점이 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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.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>또한 display 속성을 block으로 주게되면 우리가 원하는 내비게이션 바에 형태가 된다 그러나 inline으로 바꾸면 영역이 침범될 가능성이 높습니다.
또 hover 속성을 이용하면 마우스를 메뉴에 가져다 되었을 때 색깔이 바뀌는 것을 확인할 수 있습니다.
3. display 속성을 이용한 수평 내비게이션 바
이 방식은 display속성을 inline으로 주게됨으로써 요소를 수평으로 나열하는 방식입니다. 엄청 쉽고 간단한 방식입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>4. floating 속성을 이용한 수평 내비게이션 바
이 방식은 세번 째 방식보다 더 나은 방식이라고 할 수 있으면, 세번 째 방식은 display속성이 inline으로 요소 간 독립성이 떨어지지만 이 방식은 display속성이 block이기 때문에 요소 간 독립성이 높습니다. 그러므로 이 방식을 많이 선호하는 편입니다. 그리고 float를 사용하게 되면 원래는 display가 block이면 한 블록을 다 차지해야하지만 float에 의해서 무시됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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;
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>floating 속성을 이용한 수평 내비게이션 바 그리고 현재 메뉴의 위치 표시</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>
<li><a href="/bbs/login.php">로그인</a></li>
<li><a href="/bbs/register_form.php">회원가입</a></li>
</ul>
</body>
</html>