반응형
1. HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>5일차</title>
<link href="css/ex02.css" rel="stylesheet">
</head>
<body>
<h1>스프라이트 메뉴</h1>
<nav>
<ul>
<li><a href="#">템플릿</a></li>
<li><a href="#">워드프레스</a></li>
<li><a href="#">맞춤솔류션</a></li>
<li><a href="#">주문제작</a></li>
<li><a href="#">무료홈페이지</a></li>
</ul>
</nav>
</body>
</html>
2. CSS Code
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
}
body{
font-family:sans-serift, "맑은 고딕";
font-size:14px;
color:black;
}
ul, li{
list-style:none;
}
a{
text-decoration:none;
color:black;
}
/* 가로크기-116px 세로크기-38px */
nav ul{
overflow:hidden;
width:600px;
}
ul li{
width:116px;
height:38px;
background:url(../img/css_sprites-1.png);
float:left;
text-indent:-8888px;
}
/* 메뉴 위치 지정 */
ul li:nth-child(1){
background-position:0 0;
}
ul li:nth-child(2){
background-position:-116px 0;
}
ul li:nth-child(3){
background-position:-232px 0;
}
ul li:nth-child(4){
background-position:-348px 0;
}
ul li:nth-child(5){
background-position:-464px 0;
}
/* 메뉴에 마우스 올렸을시 효과 지정 */
ul li:nth-child(1):hover{
background-position:0 -38px;
}
ul li:nth-child(2):hover{
background-position:-116px -38px;
}
ul li:nth-child(3):hover{
background-position:-232px -38px;
}
ul li:nth-child(4):hover{
background-position:-348px -38px;
}
ul li:nth-child(5):hover{
background-position:-464px -38px;
}
/* 메뉴에 마우스 클릭시 효과 지정 */
ul li:nth-child(1):active{
background-position:0 -75px;
}
ul li:nth-child(2):active{
background-position:-116px -75px;
}
ul li:nth-child(3):active{
background-position:-232px -75px;
}
ul li:nth-child(4):active{
background-position:-348px -75px;
}
ul li:nth-child(5):active{
background-position:-464px -75px;
}
3. HTML / CSS / IMG 파일
ex02.html
0.00MB
ex02.css
0.00MB
css_sprites.png
0.01MB
css_sprites-1.png
0.02MB
4. 미리보기
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190615 Basic Study 37(롤 오버 효과 주기) (0) | 2019.06.15 |
|---|---|
| HTML5 - 190615 Basic Study 36(가로 네비게이션 바) (0) | 2019.06.15 |
| HTML5 - 190615 Basic Study 34(배경 속성 이해하기) (0) | 2019.06.15 |
| HTML5 - 190615 Basic Study 33(Sitemap 제작 - 3) (0) | 2019.06.15 |
| HTML5 - 190609 Basic Study 32(Note) (0) | 2019.06.09 |
