CSS 기울기 색 변형효과 transform, 레이아웃 설정
2019. 11. 5. 11:48
Programing/Web Programming
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
header{
background-color:red;
width:100%;
height: 50px;
}
nav{
background-color:yellow;
width:100%;
height:100px;
}
aside{
background-color:yellow;
width:10%;
height: 400px;
float:left;
}
article.one{
background-color:#ff00dd;
height: 400px;
width:70%;
float:left;
}
article.two{
background-color:#ffff00;
width:20%;
height: 400px;
float:right;
}
footer{
background-color:blue;
width:100%;x
height: 100px;
clear:both;
}
</style>
</head>
<body>
<head >header</head>
<nav >nav</nav>
<aside >aside</aside>
<article class="one" >content</article>
<article clas="two" >con</article>
<footer>footr</footer>
</body>
</html>
transform
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: all 1s;
transform: rotate(0deg);
}
div:hover{
transition: all 1s;
transform: rotate(45deg);
background: yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
레이아웃
'Programing > Web Programming' 카테고리의 다른 글
| PHP에서 외부 주소 JSON 언파싱 (0) | 2019.11.17 |
|---|---|
| CSS 애니메이션 기울기, 비율, 이동 (0) | 2019.11.07 |
| HTML 공 튕기기 (0) | 2019.10.31 |
| HTML 좌우 움직임 (0) | 2019.10.31 |
| HTML 기울기 (0) | 2019.10.31 |