본문 바로가기
JAVA/HTML

[HTML-id3]overflow:hidden 이미지 틀안에 숨기기,

by java나유 2022. 7. 16. 
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML3일차 css2.0 응용 (배너디스크)</title>
<style>
body{margin:0; padding:0;}

.disc{width:250px; height:20px; list-style:none;
margin:0; padding: 0;
}
.licss{width:20px; height:20px; background-color:black;
border-radius:20px; float:left; margin-left:5px;
}   
.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")
}
/*backgound-position: background-image 적용시 사용
backgound-position:x축 y축
backgound-position-x:
backgound-position-y:	
*/

.img1{background-position:0 0;} 
.img2{background-position:-96px 0;}
.img3{background-position:-192px 0;}
.img4{background-position:-288px 0;}
.img5{background-position:-384px 0;}  
 

</style>
<!--  color:red, orange...rgb(0,0,0)~rgb(255,255,255)
#FFFFFF; ~ #000000 (0~F)까지 밖에 없음 
  -->
  <!-- overflow:hidden 외곽선 안에 이미지가 쏙 들어오게 css속성 -->
</head>
<body>

<ol class="disc">
<li class="licss red"></li>
<li class="licss"></li>
<li class="licss"></li>
<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>
</html>

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML3일차 css2.0 응용 (배너디스크)</title>
<style>
body{margin:0; padding:0;}

.disc{width:250px; height:20px; list-style:none;
margin:0; padding: 0;
}
.licss{width:20px; height:20px; background-color:black;
border-radius:20px; float:left; margin-left:5px;
}   
.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")
}
/*backgound-position: background-image 적용시 사용
backgound-position:x축 y축
backgound-position-x:
backgound-position-y:	
*/

.img1{background-position:0 0;} 
.img2{background-position:-96px 0;}
.img3{background-position:-192px 0;}
.img4{background-position:-288px 0;}
.img5{background-position:-384px 0;}  
 

</style>
<!--  color:red, orange...rgb(0,0,0)~rgb(255,255,255)
#FFFFFF; ~ #000000 (0~F)까지 밖에 없음 
  -->
  <!-- overflow:hidden 외곽선 안에 이미지가 쏙 들어오게 css속성 -->
</head>
<body>

<ol class="disc">
<li class="licss red"></li>
<li class="licss"></li>
<li class="licss"></li>
<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>
</html>
728x90
저작자표시 비영리 변경금지 (새창열림)

'JAVA > HTML' 카테고리의 다른 글

details / summary (더보기)  (0) 2022.07.16
[HTML-id6] 사이트 전체 레이아웃 inline-block:span에 주로 사용하는 속성  (0) 2022.07.16
[HTML-id2]border-radius: 왼쪽상단, 오른쪽상단, 오른쪽하단, 왼쪽하단  (0) 2022.07.16
[HTML-id1]position, static 고정 relative, 자식이 absoulte면 부모는 무조건 relative  (0) 2022.07.16
[HTML] radio 태그 name 있어야함 input type:"text" "password" "checkbos"  (0) 2022.07.13

관련글

댓글

티스토리툴바