본문 바로가기

Python_WEB/HTML

HTML5 - 190615 Basic Study 34(배경 속성 이해하기)

728x90

1. HTML Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>5일차</title>
<link href="css/ex01.css" rel="stylesheet">
</head>

<body>
<h1>배경 속성 이해하기</h1>
<!-- div#box${box$}*3-->
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
<div id="box4">box4</div>
<div id="box5">box5</div>
<div id="box6">box6</div>
<div id="box7">box7</div> 
 

</body>

</html>

 

2. CSS Code

@charset "utf-8";
/* CSS Document */
/* CSS 초기화 */
*{
	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;
}
div{
	width:300px;
	height:300px;
	border:3px solid red;
}
#box1{
	/* bgc : 젠코딩 */
	background-color:pink;
	}
#box1{
	background-image:url(../img/5.png);
	background-repeat:no-repeat;
}
#box1:hover{
	background-position:0 0;
	background-position:left top;
	background-position:center center;
	transition:1s;
}
#box1:active{
	background-position:100% 100%;
}
#box2{
	/* bgi : 젠코딩 */
	background-image:url(../img/3.png);
	/* 사진 크기 조정 */
	background-size:100% 100%
}
#box2{
	/* 배경고정 */
	background-attachment:fixed;
}
#box3{
	background-image:url(../img/2.png);
	background-size:50% 50%
}
#box3:hover{
	background-repeat:no-repeat;
}
#box3:active{
	background-repeat:repeat-x;
}
#box4{
	/* 통합 속성 */
	background:pink url(../img/1.png) no-repeat scroll 5% 5%;
}
#box4:hover{
	background:orange url(../img/4.png) no-repeat center center;
	transition:1s;
}
#box5{
	background:url(../img/4.png) nono-repeat;
	background-size:100% 100%;
	width:500px;
	height:400px;
}
#box5:hover{
	background-size:50% 50%;
	transition:1s;
	background-position:100px 100px;
}
#box5:acive{
	background-size:contain;
	background-position:left top;
}
#box6{
	border:20px double yellow;
	background:url(../img/1.png);
	background-origin:border-box;
	background-clip:border-box;
	/* border:20px solid rgba(255,255,0,0.2); */
	padding:20px;
}
#box6:hover{
	background-clip:padding-box;
}
#box6:acitve{
	background-clip:content-box;
}
#box7{
	background-image:url(../img/1.png), url(../img/2.png);
	background-repeat:no-repeat;
	background-size:50% 50%;
	background-position:left top, right bottom;
	transition:1s;
}
#box7:hover{
	background-position:right bottom, left top;
}

 

3. HTML / CSS 파일

ex01.html
0.00MB
ex01.css
0.00MB

반응형