gnb 연습 / navigation bar
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>01_호박네브</title>
<style>
*{margin: 0;
padding: 0;}
#wrapper{
background-color: #5A2F7D;
width: 600%;
height: 950px;
position: absolute;
}
nav, li a{
border: 1px solid red;
}
a{
border-color: blue;
}
nav#gnb{
width: 720px;
height: 97px;
overflow: hidden;
position: fixed;
left: 50%;
margin-left: -360px;
bottom: 0;
z-index: 99999;
}
#gnb li{
width: 120px;
height: 97px;
float: left;
list-style: none;
box-sizing: border-box;
}
#gnb li a{
display: block;
width: 100%;
height: 100%;
text-indent: -9999px;
}
#gnb li:nth-child(1) a{
background: url(img/nav1.png);
background-size: contain;
}
#gnb li:nth-child(1) a:hover{
background: url(img/navon1.png);
background-size: contain;
}
#gnb li:nth-child(1) a{
background: url(img/nav2.png);
background-size: contain;
}
#gnb li:nth-child(1) a:hover{
background: url(img/navon2.png);
background-size: contain;
}
#gnb li:nth-child(1) a{
background: url(img/nav3.png);
background-size: contain;
}
#gnb li:nth-child(1) a:hover{
background: url(img/navon3.png);
background-size: contain;
}
#gnb li:nth-child(1) a{
background: url(img/nav4.png);
background-size: contain;
}
#gnb li:nth-child(1) a:hover{
background: url(img/navon4.png);
background-size: contain;
}
#gnb li:nth-child(1) a{
background: url(img/nav5.png);
background-size: contain;
}
#gnb li:nth-child(1) a:hover{
background: url(img/navon5.png);
background-size: contain;
}
#gnb li:nth-child(1) a{
background: url(img/nav6.png);
background-size: contain;
}
#gnb li:nth-child(1) a:hover{
background: url(img/navon6.png);
background-size: contain;
}
#wrapper>section{
border: 1px solid yellow;
width: 16.6667%;
height: 100%;
position: absolute;
}
#wrapper>section:nth-child(1){
background-color: #20560B;
left: 0;
}
#wrapper>section:nth-child(2){
background-color: #BFB726;
left: 16.6667%;
}
#wrapper>section:nth-child(3){
background-color: #272723;
left: 33.3334%;
}
#wrapper>section:nth-child(4){
background-color: #B66606;
left: 50.0001%;
}
#wrapper>section:nth-child(5){
background-color: #870C6F;
left: 66.6668%;
}
#wrapper>section:nth-child(6){
background-color: #0D725F;
left: 83.3335%;
}
</style>
</head>
<body>
<div id="wrapper">
<section id="intro">
<nav id="gnb">
<ul>
<li><a href="#intro">intro</a></li>
<li><a href="#home">home</a></li>
<li><a href="#event">event</a></li>
<li><a href="#product">product</a></li>
<li><a href="#limited">limited</a></li>
<li><a href="#party">party</a></li>
</ul>
</nav>
</section>
<section id="home"></section>
<section id="event"></section>
<section id="product"></section>
<section id="limited"></section>
<section id="party"></section>
</div>
</body>
</html>cover : 그림을 늘려 이미지로 최대한 배경을 채우는 것
contain : content area 안에서 최대한 fit하게 맞추는 것
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>02_낙서하는 네비</title>
<style>
*{margin: 0;
padding: 0;}
html, body{
background-color: #FCB802;
}
nav#lnb{
width: 748px;
height: 56px;
background: url(img/nav/nav.png);
margin: 10px auto;
}
nav#lnb li{
width: 125px;
height: 56px;
list-style: none;
float: left;
text-indent: -9999px;
cursor: pointer;
position: relative;
z-index: 2;
}
nav#lnb li:last-child{
width: 123px;
}
nav#lnb li:nth-of-type(1) a{
background: url(img/nav/menu_01.png);
}
nav#lnb li:nth-of-type(2) a{
background: url(img/nav/menu_02.png);
}
nav#lnb li:nth-of-type(3) a{
background: url(img/nav/menu_03.png);
}
nav#lnb li:nth-of-type(4) a{
background: url(img/nav/menu_04.png);
}
nav#lnb li:nth-of-type(5) a{
background: url(img/nav/menu_05.png);
}
nav#lnb li:nth-of-type(6) a{
background: url(img/nav/menu_06.png);
}
nav#lnb li:nth-of-type(1):hover a,#lnb li:nth-of-type(1).active a{
background: url(img/nav/menu_hover_01.png);
}
nav#lnb li:nth-of-type(2):hover a,#lnb li:nth-of-type(2).active a{
background: url(img/nav/menu_hover_02.png);
}
nav#lnb li:nth-of-type(3):hover a,#lnb li:nth-of-type(3).active a{
background: url(img/nav/menu_hover_03.png);
}
nav#lnb li:nth-of-type(4):hover a,#lnb li:nth-of-type(4).active a{
background: url(img/nav/menu_hover_04.png);
}
nav#lnb li:nth-of-type(5):hover a,#lnb li:nth-of-type(5).active a{
background: url(img/nav/menu_hover_05.png);
}
nav#lnb li:nth-of-type(6):hover a,#lnb li:nth-of-type(6).active a{
background: url(img/nav/menu_hover_06.png);
}
nav#lnb li a{
width: 100%;
height: 100%;
display: block;
position: relative;
z-index: 2;
}
@keyframes scribble{
from{}
to{background-position: -375px 0}
}
nav#lnb li:hover div{
background: url(img/nav/scribble.png);
animation:scribble 1s steps(3) infinite;
}
nav#lnb li div{
width: 125px;
height: 56px;
position: relative;
top: -56px;
z-index: 1;
}
#lnb li.active div{
background: url(img/nav/scribble.png);
animation: scribble 1s steps(3) infinite;
}
</style>
</head>
<body>
<div id="wrapper">
<nav id="lnb">
<ul>
<li>
<a href="#home">menu1</a>
<div></div>
</li>
<li class="active">
<a href="#portfolio">menu2</a>
<div></div>
</li>
<li>
<a href="#">menu3</a>
<div></div>
</li>
<li>
<a href="#">menu4</a>
<div></div>
</li>
<li>
<a href="#">menu5</a>
<div></div>
</li>
<li>
<a href="#">menu6</a>
<div></div>
</li>
</ul>
</nav>
</div>
</body>
</html>
</body>
</html>
# z-index : 가상의 z축을 만들어 태그들에게 z축의 값을 준다. -> 어떤 태그가 어떤 태그를 덮는지 순서를 정할 수 있다.
(화면을 바꾸기 위해 태그의 순서를 바꾸는 건 좋지 않기 때문에 z-index를 사용한다.)
# z-index를 주려면 무조건 position 속성이 있어야 한다.
# 부모와 자식 관계에서는 자식이 무조건 위로 올라온다!!(z-index로 arrange를 바꿀 수 없다.)
반응형
'IT' 카테고리의 다른 글
| 2D transform / animation 속성 활용 (0) | 2022.07.07 |
|---|---|
| 웹폰트(TTF, OTF, WOFF, SVG, EOT) / transition (0) | 2022.07.06 |
| Sprite 속성 / Sprite animation 연습 (0) | 2022.07.02 |
| position : absolute / fixed / relative / static / z-index (0) | 2022.06.30 |
| 상태선택자 / 반응선택자 / 구조선택자 / placeholder / nth-child (0) | 2022.06.29 |