반응형
위치
<!DOCTYPE html>
<html>
<head>
<title>위치속성</title>
<style>
div{width: 300px; height: 150px;}
.red{background-color: red;}
.blue{background-color: blue;
/*position: relative;*/
}
.pink{background-color: pink;
width: 50px; height: 50px;
position:absolute;
top:2000px;
left: 20px;
}
.header{width: 100%; height: 80px;
background-color: tomato;
position:fixed; top:0px; left: 0px;
box-shadow: 10px 10px 3px 6px blue;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cdeb8e+0,a5c956+100;Green+3D+%232 */
background: #cdeb8e; /* Old browsers */
background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #cdeb8e 0%,#a5c956 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.header ul{list-style: none;}
.header ul li{float: right; padding: 5px 10px;}
.clear{clear:both;}
</style>
</head>
<body>
<div class="header">
<ul>
<li>home</li>
<li>profile</li>
<li>contact</li>
</ul>
<div class="clear"></div>
</div>
<div class="red">
</div>
<div class="blue">
<div class="pink">TEST</div>
</div>
</body>
</html>
변형/애니메이션
<!DOCTYPE html>
<html>
<head>
<title>변형속성</title>
<style>
.bar{width: 100px; height: 100px;
background-color: red;
transition: width 3s, height 2s;
/*transition-property: width;
transition-duration: 3s;
transition-delay: 0s;*/
}
.bar:hover{width:500px;height: 150px;
background-color: pink;
}
.circle{width: 100px; height: 100px;
background-color: orange;
border-radius:100px;
animation-name: move;
animation-duration: 2s;
animation-delay: 0s;
animation-iteration-count:3;
animation-direction: alternate;
animation-fill-mode: forwards;
}
@keyframes move{
0%{
margin-left: 0px;
}
100%{
margin-left: 500px;
background-color: green;
}
}
</style>
</head>
<body>
<div class="bar"></div>
<div class="circle"></div>
</body>
</html>반응형
'웹프로그래밍 기초 > A반소스자료' 카테고리의 다른 글
| scroll 에 애니메이션 넣기 (3) | 2023.05.25 |
|---|---|
| 실습소스 (0) | 2023.05.12 |
| 디스플레이속성 과 폰트속성 (1) | 2023.04.27 |
| CSS 테스트 (0) | 2023.04.06 |
| 레이아웃 & CSS (3) | 2023.03.30 |
댓글