01
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS ์ ๋๋ฉ์ด์
</title>
<!--[if lt IE 9]>
<script src="html5shiv.js"></scirpt>
<![endif]-->
<style>
body {
padding-top:50px;
padding-left:50px;
}
.box {
width: 100px;
height: 100px;
background: green;
border: 1px solid black;
border-radius: 5px;
-webkit-transition-property: background;
-moz-transition-property: background;
-o-transition-property: background;
-ms-transition-property: background;
transition-property: background;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
transition-duration: 1s;
}
.box:hover {
background: yellow;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
02
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS ์ ๋๋ฉ์ด์
</title>
<!--[if lt IE 9]>
<script src="html5shiv.js"></scirpt>
<![endif]-->
<style>
.container {
width:500px;
margin:50px auto;
}
.photo {
border:1px solid #ccc;
}
.photo:hover {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
border: black 1px solid;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="container">
<img src="images/coffee.jpg" class="photo">
</div>
</body>
</html>
03
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS3 ํธ๋์คํผ๊ณผ ํธ๋์ง์
</title>
<style>
.photo {
margin-top:50px;
margin-left:100px;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
}
.photo:hover {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
box-shadow: 5px 5px 3px black;
}
</style>
</head>
<body>
<img src="images/lamp.jpg" class="photo">
</body>
</html>
< ์ฐธ๊ณ >
Do it! HTML5+CSS3 ์น ํ์ค์ ์ ์
โป ํด๋น ๊ธ์ ์ต๋ ๋ชฉ์ ์ผ๋ก ์์ฑ๋ ๊ธ์ ๋๋ค โป
๋ฐ์ํ
'๊ฐ์ธ๊ณต๋ถ > HTML5 + CSS3' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [HTML+CSS][๋ฐ์ํ ์น] 02 - ๊ฐ๋ณ ๊ทธ๋ฆฌ๋ ๋ ์ด์์ (0) | 2020.08.03 |
|---|---|
| [HTML+CSS][๋ฐ์ํ ์น] 01 - ๋ฐ์ํ ์น๊ณผ ๋ทฐํฌํธ(viewport)์ ๊ฐ๋ (0) | 2020.08.02 |
| [HTML+CSS][CSS3์ ์ ๋๋ฉ์ด์ ] 03 - ํธ๋์ง์ (0) | 2020.07.30 |
| [HTML+CSS][CSS3์ ์ ๋๋ฉ์ด์ ] 02 - ๋ณํ๊ณผ ๊ด๋ จ๋ ์์ฑ๋ค (0) | 2020.07.29 |
| [HTML+CSS][CSS3์ ์ ๋๋ฉ์ด์ ] 01 - ๋ณํ (0) | 2020.07.24 |
๋๊ธ