반응형
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 파일
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190615 Basic Study 36(가로 네비게이션 바) (0) | 2019.06.15 |
|---|---|
| HTML5 - 190615 Basic Study 35(스프라이트 메뉴) (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 |
| HTML5 - 190609 Basic Study 31(가시 속성) (0) | 2019.06.09 |
