반응형
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 미리보기
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190608 Basic Study 20(CSS 동위(형제) 선택자) (0) | 2019.06.08 |
|---|---|
| HTML5 - 190608 Basic Study 19(CSS 구조 선택자) (0) | 2019.06.08 |
| HTML5 - 190608 Basic Study 17(CSS Basic 2) (0) | 2019.06.08 |
| HTML5 - 190608 Basic Study 16(CSS Basic 1) (0) | 2019.06.08 |
| HTML5 - 190607 Basic Study 15(SNS 공유 Meta 태그) (0) | 2019.06.07 |
