Front/HTML
HTML Step 17
NOOWGNAJ
2022. 7. 11. 21:23
반응형
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 3일차 3 CSS2.0 응용 (배너 디스크)</title>
<style>
body{
margin: 10px;
padding : 0;
}
.disc{
width: 250px;
height: 20px;
list-style: none;
margin-top: 0;
padding : 0;
}
.licss{
width: 20px;
height: 20px;
background-color: black;
border-radius: 10px;
float : left;
margin-left: 5px;
}
.licss:hover{
background-color: red;
}
.red {
background-color: red;
}
.menu_ico{
width: 95px;
height: 95px;
border : 1px solid #ccc;
border-radius: 100%;
float : left;
overflow: hidden;
}
.menu_ico2{
width: 95px;
height: 95px;
border : 1px solid #ccc;
border-radius: 100%;
float : left;
overflow: hidden;
background-image: url("./menus.png");
}
.menu_ico2:hover{
background-color: magenta;
}
.img1{
background-position: 0px 0;
}
.img2{
background-position: -96px 0;
}
.img3{
background-position: -192px 0;
}
.img4{
background-position: -288px 0;
}
.img5{
background-position: -384 0;
}
/*
background-position : background-color 적용시 사용함
background-position : x축 y축;
background-position-x : ;
background-position-y : ;
로 나눠서도 사용 가능
*/
/* overflow : hidden 은 해당 오브젝트 사이즈의 부분만 보여지도록 하는 css속성 */
</style>
<!-- color : red orange...
rgb : (0,0,0) ~ (255,255,255)
#000000; ~ #ffffff 전체가 다 같으면 세자리까지 사용 가능 ex) #000 ~ #fff
-->
</head>
<body>
<ol class="disc">
<li class="licss"></li>
<li class="licss"></li>
<li class="licss"></li>
<li class="licss"></li>
<li class="licss"></li>
</ol>
<!-- <ol class="disc"> -->
<!-- <% for(){ %> -->
<!-- <li class="licss"></li> -->
<!-- <% } %> -->
<!-- </ol> -->
<br><br>
<div class="menu_ico"><img src="./home.png"></div>
<div class="menu_ico"><img src="./key.png"></div>
<div class="menu_ico"><img src="./mail.png"></div>
<div class="menu_ico"><img src="./help.png"></div>
<div class="menu_ico"><img src="./settings.png"></div>
<br><br>
<div class="menu_ico2 img1" style="clear:both;"></div>
<div class="menu_ico2 img2"></div>
<div class="menu_ico2 img3"></div>
<div class="menu_ico2 img4"></div>
<div class="menu_ico2 img5"></div>
</body>
<script>
</script>
</html>반응형