<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float 배치</title>
<style>
#floatimg {
border: 1px solid yellowgreen;
margin: 10px;
padding: 5px;
float: left;
/* position: relative; */
/* left: 10px; */
}
</style>
</head>
<body>
<h3>스폰지밥</h3>
<hr>
<div>
<img id="floatimg"
src="../media/apple.png"
width="100"
height="100">
<p>
저는 스폰지밥입니다. 먹는 밥이 아니고요 제 이름이 그냥 그래요.
그리고 어린이부터 노인까지 많은 분들의 사랑을 받고 있어요.
제 친구 뚱이도 있고요, 징징이도 있고 집게 사장님도 있어요</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1초에 한바퀴식 무한번 반복</title>
<style>
@keyframes turn {
0% { transform : rotate(0deg); }
100% { transform : rotate(360deg); }
}
#turn {
animation-name : turn;
animation-duration : 1s;
animation-iteration-count : infinite;
}
</style>
</head>
<body>
<h3>어지러워요</h3>
<hr>
<img id="turn" src="../media/apple.png">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>왼쪽으로 90도 오른쪽으로 90도 1초에 한번씩 무한반복</title>
<style>
@keyframes turn {
0% { transform : rotate(-90deg); }
50% { transform : rotate(90deg); }
100% { transform : rotate(-90deg); }
}
#turn {
animation-name : turn;
animation-duration : 1s;
animation-iteration-count : infinite;
}
</style>
</head>
<body>
<h3>어지러워요</h3>
<hr>
<img id="turn" src="../media/apple.png">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transition</title>
<style>
#tran {
transition : width 2s;
}
#tran:hover {
width : 100%;
}
</style>
</head>
<body>
<h3>마우스를 올려봐요</h3>
<hr>
<img id="tran" src="../media/apple.png" width="100" height="100" alt="animation">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>리스트로 수직 메뉴 만들기</title>
<style>
#menubar {
display : inline-block;
background-color: olive;
}
ul {
margin : 0;
padding : 10px;
list-style-type: none;
}
ul li a {
color : white;
text-decoration: none;
}
ul li a:hover {
color : violet;
}
</style>
</head>
<body>
<h3>리스트로 수직 메뉴 만들기</h3>
<hr>
<nav id="menubar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Espresso</a></li>
<li><a href="#">Cappuccino</a></li>
<li><a href="#">Cafe Latte</a></li>
<li><a href="#">F.A.Q</a></li>
</ul>
</nav>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>카푸치노 만드는 순서</title>
<style>
div {
border : 1px solid red;
}
div h3 {
text-align: center;
}
ol {
list-style-type: none;
}
span{
position : absolute;
font: bold italic 35px Helvetica;
color: olivedrab;
}
p {
padding-left : 50px;
}
</style>
</head>
<body>
<h3>카푸치노</h3>
<hr>
<div>
<h3>카푸치노 만드는 순서</h3>
<ol>
<li><span>1.</span><p>에스프레소를 추출한다. 반드시 에스프레소 콩을 사용해야 제맛이 난다.</p></li>
<li><span>2.</span><p>적당한 용기에 우유를 넣어 중탕을 하거나 끓기 직전까지 데운다.</p></li>
<li><span>3.</span><p>몇초간 저어 충분히 거품을 낸다. 거품이 충분하지 않으면 풍미가 떨어진다.</p></li>
<li><span>4.</span><p>컵에 계피 막대를 꽂고 커피를 부은 후 우유 거품을 붓는다. 휘핑크림을 얹고 계피가루를 뿌린다.</p></li>
</ol>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>애니메이션 응용 keyframes</title>
<style>
@keyframes slideLeft {
0% { margin-left : 100%;}
100% { margin-left : 0%;}
}
p {
animation-duration : 3s;
animation-name : slideLeft;
}
</style>
</head>
<body>
<h3>에니메이션 응용</h3>
<hr>
<p>
질문있습니다.
</p>
</body>
</html>
'IT > Css' 카테고리의 다른 글
| css3 - 레이아웃 배치, 자바스크립트 submit 제한걸기, radio, checkbox, select, textarea (0) | 2018.08.29 |
|---|---|
| css3 - 레이아웃 배치 header, nav, section, footer, float (0) | 2018.08.28 |
| css3 - :hover 활용, 이미지 테두리 만들기, text-shadow와 box-shadow (0) | 2018.08.21 |
| css3 - 배치, 리스트 꾸미기, 표 꾸미기, 폼 꾸미기 (0) | 2018.08.20 |
| css3로 웹 페이지 꾸미기 (0) | 2018.08.17 |