반응형
위치
<!DOCTYPE html>
<html>
<head>
<title>위치속성 테스트</title>
<style>
div{width: 300px; height: 150px;}
.redBox{background-color: red;}
.blueBox{background-color:blue;
/*position: relative;*/
}
.small{width:50px; height: 50px;
background-color: pink;
position: absolute;
top:1000px;
left:10px;
}
.header{width: 100%;height: 80px;
background-color: orange;
position: fixed; top:0px; left:0px;
box-shadow: 10px 10px 3px 6px red;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffaf4b+0,ff920a+100;Orange+3D+%231 */
background: #ffaf4b; /* Old browsers */
background: linear-gradient(to bottom, #ffaf4b 0%,#ff920a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.header ul{list-style: none;}
.header ul li{float: right;padding: 10px 20px;}
.clear{clear: both;}
</style>
</head>
<body>
<div class="header">
<ul>
<li>Home</li>
<li>Profile</li>
<li>Contact</li>
</ul>
</div>
<div class="clear"></div>
<div class="redBox">
</div>
<div class="blueBox">
<div class="small">TEST</div>
</div>
</body>
</html>변형/애니메이션
<!DOCTYPE html>
<html>
<head>
<title>변형속성</title>
<style>
.bar{width: 100px; height: 100px;
background-color: red;
transition: width 2s, height 1s;
transition-timing-function: ease-in-out;
/*
transition-property: width;
transition-duration: 2s;
transition-delay: 0s; */
}
.bar:hover{background-color: orange;
width: 500px;height: 150px;}
.circle{width:100px; height:100px;
background-color: pink;
border-radius:100px;
animation-name: circleAni;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-fill-mode: forwards;
}
@keyframes circleAni{
0%{
margin-left: 0px;
}
100%{
margin-left: 500px;
background-color: red;
}
}
</style>
</head>
<body>
<div class="bar"></div>
<div class="circle"></div>
</body>
</html>반응형
'웹프로그래밍 기초 > B반소스자료' 카테고리의 다른 글
| slider (4) | 2023.06.01 |
|---|---|
| 디스플레이 & 폰트 스타일 (3) | 2023.04.27 |
| CSS TEST (4) | 2023.04.06 |
| 레이아웃 & css (1) | 2023.03.30 |
| Table & Form Tag (176) | 2023.03.23 |
댓글