반응형
1. HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>5일차</title>
<link href="css/ex05.css" rel="stylesheet">
</head>
<body>
<h1>아이콘 리스트 예제</h1>
<!-- ul#icon_list>li*8>a[href=#]>(span.icon+span.text) -->
<ul id="icon_list">
<li><a href="#">
<span class="icon"></span>
<span class="text">전화걸기</span></a></li>
<li><a href="#">
<span class="icon"></span>
<span class="text">트위터</span></a></li>
<li><a href="#">
<span class="icon"></span>
<span class="text">페이스북</span></a></li>
<li><a href="#">
<span class="icon"></span>
<span class="text">메일</span></a></li>
<li><a href="#">
<span class="icon"></span>
<span class="text">RSS</span></a></li>
<li><a href="#">
<span class="icon"></span>
<span class="text">음악</span></a></li>
<li><a href="#">
<span class="icon"></span>
<span class="text">검색</span></a></li>
<li><a href="#">
<span class="icon"></span>
<span class="text">홈</span></a></li>
</ul>
</body>
</html>
2. CSS Code
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
}
body{
font-family:sans-serif,"맑은 고딕";
font-size:14px;
color:black;
}
ul,li{
list-style:none;
}
a{
text-decoration:none;
color:black;
}
#icon_list{
overflow:hidden;
}
#icon_list li{
width:25%;
height:96px;
float:left;
/* 박스처리 */
/* border:1px solid black; */
/* 테두리처리 */
box-sizing:border-box;
}
span.icon{
background:url(../img/icon-all.png);
display:block;
width:56px;
height:56px;
/* 박스가운데정렬 */
margin:auto;
}
span.text{
display:block;
/* background:red; */
text-align:center;
padding-top:5px;
}
#icon_list li:nth-of-type(1) .icon{
background-position:0 0;
}
#icon_list li:nth-of-type(2) .icon{
background-position:-58px 0;
}
#icon_list li:nth-of-type(3) .icon{
background-position:-115px 0;
}
#icon_list li:nth-of-type(4) .icon{
background-position:-172px 0;
}
#icon_list li:nth-of-type(5) .icon{
background-position:0 -57px;
}
#icon_list li:nth-of-type(6) .icon{
background-position:-58px 57px;
}
#icon_list li:nth-of-type(7) .icon{
background-position:-115px 57px;
}
#icon_list li:nth-of-type(8) .icon{
background-position:-172px 57px;
}
span.icon:hover{
position:relative;
top:-1px;
}
span.icon:active{
position:relative;
top:1px;
}
span.text:hover{
font-style:italic;
}
span.text{
position:relative;
}
span.text:before{
content:'';
display:block;
width:0;
height:5px;
background:red;
transition:0.5s;
position:absolute;
left:0;
bottom:0;
left:50%;
background:rgba(255,0,0,0.2);
height:90%;
border-radius:5px;
box-shadow:2px 2px 1px gray;
}
span.text:hover:before{
width:60%;
left:20%;
}
3. HTML / CSS / IMG 파일
ex05.html
0.00MB
ex05.css
0.00MB
icon-all.png
0.02MB
4. 미리보기
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190615 Basic Study 40(Note) (0) | 2019.06.15 |
|---|---|
| HTML5 - 190615 Basic Study 39(우엉조림 메뉴 만들기) (0) | 2019.06.15 |
| HTML5 - 190615 Basic Study 37(롤 오버 효과 주기) (0) | 2019.06.15 |
| HTML5 - 190615 Basic Study 36(가로 네비게이션 바) (0) | 2019.06.15 |
| HTML5 - 190615 Basic Study 35(스프라이트 메뉴) (0) | 2019.06.15 |
