본문 바로가기

Python_WEB/HTML

HTML5 - 190608 Basic Study 18(CSS- Navigation Bar / 링크 바)

반응형

1. Navigation Bar(네비게이션 바)

웹 사이트의 주요 디자인 중 하나.

웹 페이지의 메뉴를 의미.

다른 말로는 Link Bar(링크 바)라고 불린다.

 

2. HTML Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 1일차</title>
<link href="css/ex03.css" rel="stylesheet">
</head>

<body>
<h1>네비게이션바 만들기</h1>
<ul class="nav">
  <li><a href="#">button1</a></li>
  <li><a href="#">button2</a></li>
  <li><a href="#">button3</a></li>
  <li><a href="#">button4</a></li>
  <li><a href="#">button5</a></li>
  <li><a href="#">button6</a></li>
  <li><a href="#">button7</a></li>
</ul>
</body>
</html>

 

3. CSS Code

@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
/* 목록 기호 없애기 */
ul, li{
	list-style:none;
}
/* 밑줄 없애기 */
a{
	color:black;
	text-decoration:none;
}
/* a태그에 마우스 올릴때를 선택*/
/* 밑줄넣기 */
a:hover{
	text-decoration:underline;
}
/* 구조 선택자 */
ul.nav{
	margin:30px;
	border:px solid red;
	/* 바리게이트역활 */
	overflow:hidden;
	width:700px;
}
ul.nav li:nth-child(2n){
	background:orange;
}
ul.nav li:nth-child(2n+1){
	background:pink;
}
.nav li{
	float:left;
	padding:10px;
}
.nav li a{
	padding:10px;
	border:px solid black;
	/* 박스(블럭)형태로 변환하기 */
	display:block;
	background:gold:;
}
/* 네비게이션 버튼 둥글게 처리하기 */
ul.nav li:nth-child(1){}
ul.nav li:nth-child(7){}
ul.nav li:first-child{
	border-radius:20px:;
	/* 상 우 하 좌 */
	border-radius:20px 0 0 20px;
	}
ul.nav li:last-child{
	/* 상 우 하 좌 */
	border-radius:0 20px 20px 0px;
	}
/* 마우스 올렸을때 색상 변환 */
ul.nav li:hover{
	background:navy;
}
/* li에 마우스를 올렸을 때 a에 색상 변환 */
ul.nav li:hover a{}
ul.nav li:hover>a{
	color:white;
	}
/* 3번째 버튼에 마우스 롤 오버시 글자 gold 변환 */
ul li:nth-child(3) a{
	color:blue;
}
ul li:nth-child(3):hover a{
	color:gold;
}
/* 마우스 누르고 있는 상태 윗줄넣기 */
ul li a:active{
	/* 윗줄넣기 */
	text-decoration:overline;
	/* 취소선 */
	text-decoration:line-through:;
}
/* li에 마우스 올렷을때 반응 */
ul li:hover a{
	box-shadow:3px 3px 1px gray;
	}
/* a에 마우스 올렸을때 반응 */
ul li a:hover{
	/* 가로 세로 흐름 그림자색 */
	box-shadow:3px 3px 1px snow;	
	}

 

4. HTML / CSS 파일

ex03.html
0.00MB
ex03.css
0.00MB

 

5. HTML 미리보기

< CSS 1일차 >

 

반응형

태그