index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>애니메이션 실습</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="section">
<!-- container -->
<div class="container">
<h1>Website Title</h1>
<p class="hide-small">Website slogan included here.</p>
<nav class="site-nav">
<ul class="group">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li class="hide-small"><a href="#">FAQs</a></li>
<li class="hide-small"><a href="#">Links</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
<!-- /container -->
</header>
<div class="content-area section">
<!-- container -->
<div class="container flexbox">
<!-- col -->
<div class="main-area">
<h2>Welcome to the page!</h2>
<!-- row -->
<div class="boxes">
<!-- box-a -->
<div class="box-a">
<p>Key feature 1</p>
</div>
<!-- box-a -->
<div class="box-a">
<p>Key feature 2</p>
</div>
<!-- box-a -->
<div class="box-a">
<p>Key feature 3</p>
</div>
<!-- box-a -->
<div class="box-a">
<p>Key feature 4</p>
</div>
</div>
<img class="star" src="https://learnwebcode.github.io/Web-Design-for-Beginners/star.png">
</div>
<!-- /col -->
<!-- 사이드바 -->
<div class="sidebar">
<h3>Sidebar Heading</h3>
<p>Sidebar Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut
aliquip ex ea commodo consequat. Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex
ea commodo consequat.</p>
<p>Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo
consequat. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod.</p>
</div>
</div>
<!-- /container -->
</div>
<footer>
<p>© 2017 - This is the footer.</p>
</footer>
</body>
</html>style.css
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
html {
background-color: #608699;
line-height: 1.7;
}
body {
font-family: 'PT Sans', Arial, sans-serif;
font-size: 15px;
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-top: 0;
}
img {
max-width: 100%;
height: auto;
}
a {
text-decoration: none;
}
/* Main Column Typography */
.main-area h2 {
font-size: 165%;
font-weight: normal;
}
.section {
padding-left: 40px;
padding-right: 40px;
}
.container {
max-width: 960px;
margin: 0 auto;
overflow: hidden;
}
@media screen and (min-width: 1280px) {
body {
font-size: 16px;
}
.container {
max-width: 1200px;
}
}
@media screen and (max-width: 767px) {
.section {
padding-left: 20px;
padding-right: 20px;
}
}
header {
padding-top: 20px;
color: #fff;
background-color: #405c71;
}
header h1 {
margin: 0;
font-weight: normal;
font-size: 165%;
}
header p {
font-size: 90%;
margin: 0;
}
/* Site Navigation */
.site-nav {
margin-top: 20px;
}
.site-nav ul {
margin: 0;
padding: 0;
}
.site-nav li {
list-style: none;
float: left;
margin-right: 5px;
}
.site-nav a {
display: block;
color: #fff;
padding: 10px 20px;
background-color: #365267;
transition-property: color, background-color;
transition-duration: 2s;
}
.site-nav a:hover {
background-color: #fff;
color: #2c465a;
}
@media screen and (max-width: 1023px) {
.site-nav li {
width: 33.332%;
margin-right: 0;
}
.site-nav a {
padding: 15px 0;
margin-right: 5px;
margin-bottom: 5px;
text-align: center;
}
}
@media screen and (max-width: 767px) {
.site-nav li {
width: 50%;
}
}
/* End Site Navigation */
.content-area {
background-color: #fff;
padding-bottom: 40px;
padding-top: 40px;
}
@media screen and (max-width: 767px) {
.content-area {
padding-top: 20px;
}
}
.flexbox {
display: flex;
}
.main-area {
flex-basis: 66%;
padding-right: 40px;
box-sizing: border-box;
}
.sidebar {
flex-basis: 34%;
color: #555;
font-size: 85%;
}
.sidebar h3 {
font-size: 138.5%;
margin-bottom: 7px;
}
@media screen and (max-width: 767px) {
.hide-small {
display: none;
}
.flexbox {
display: block;
}
.main-area{
padding-right: 0;
}
}
.boxes {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
/* Bounce 애니메이션 */
@keyframes fadeBounce {
0% {
/* opacity 불투명도. 0일 때 안보임 */
/* 위쪽에서 시작 */
opacity: 0;
transform: translateY(-200%);
}
40% {
transform: translateY(0);
}
55% {
transform: translateY(-6px);
}
70% {
opacity: 1;
transform: translateY(0);
}
85% {
transform: translateY(-3);
}
100% {
/* 완전히 보이고 원래 제자리 */
opacity: 1;
transform: translateY(0);
}
}
.box-a {
flex-basis: 100%;
opacity: 0;
animation: fadeBounce 1s forwards;
/* animation-name: fadeBounce;
animation-duration: 1s;
animation-fill-mode: forwards; */
/* 무한반복이 아니라 1번 진행하고 끝 */
background-color: #e7eff5;
padding: 20px 20px 0 20px;
border: 2px solid #d3dee7;
margin-bottom: 30px;
box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.boxes :nth-child(2){
animation-delay: 0.5s;
}
.boxes :nth-child(3){
animation-delay: 1s;
}
.boxes :nth-child(4){
animation-delay: 1.5s;
}
/* Star 애니메이션 */
@keyframes slideSpin {
50% {
/* 오른쪽으로 이동, 절반으로 사이즈 작아짐 */
transform: translateX(150%) scale(0.5);
}
/* 회전 반바퀴 */
75% {
transform: translateX(150%) rotate(180deg) scale(0.5);
}
/* 오른쪽으로 이동 */
100% {
transform: translateX(300%) rotate(180deg);
}
}
.star {
animation: slideSpin 2s infinite alternate;
width: 25%;
height: auto;
}
@media screen and (min-width: 1280px) {
.box-a{
flex-basis: 42%;
}
}
footer {
text-align: center;
font-size: 85%;
color: #fff;
padding-bottom: 20px;
padding-top: 20px;
}
안녕하세요!!