학습내용
디자인
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="우리쌀 점토로 만든 키즈가오 웹사이트 소개">
<meta name="keywords" content="키즈가오, 점토, 장난감">
<meta name="author" content="키즈가오">
<meta name="veiwport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/animation.css">
<link rel="stylesheet" type="text/css" href="css/mobile.css">
</head>
<body>
<header id="intro">
<div class="introWrap">
<div class="logo"></div>
<div class="lion"></div>
<div class="rabbit"></div>
<div class="bear"></div>
<div class="monkey"></div>
</div>
<div class="cloudWrap">
<div class="leftCloud"></div>
<div class="rightCloud"></div>
<div class="dragonfly"></div>
</div>
</header>
</body>
</html>CSS
html, body {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0;
}
button {
border: none;
background-color: transparent;
}
.clearfix {
clear: both;
}
/* Intro */
#intro {
width: 100%;
height: 1600px;
background-image: url(../img/intro/intro_bg.png);
}
#intro .introWrap {
position: relative;
width: 760px;
height: 516px;
background-color: yellow;
left: 50%;
margin-left: -380px;
}
#intro .introWrap .logo {
position: absolute;
width: 760px;
height: 516px;
background-color: url(../img/intro/logo.png);
z-index: 100;
}
#intro .introWrap .lion {
position: absolute;
width: 161px;
height: 161px;
background-color: url(../img/intro/lion.png);
margin: 80px 0 0 30px;
z-index: 0;
}
#intro .introWrap .rabbit {
position: absolute;
width: 105px;
height: 129px;
background-color: url(../img/intro/rabbit.png);
margin: 90px 0 0 580px;
}
#intro .introWrap .bear {
position: absolute;
width: 112px;
height: 105px;
background-color: url(../img/intro/bear.png);
margin: 90px 0 0 580px;
z-index: 200;
}
#intro .introWrap .monkey {
position: absolute;
width: 85px;
height: 93px;
background-color: url(../img/intro/monkey.png);
margin: 310px 0 0 50px;
z-index: 200;
}
#intro .cloudWrap {
position: relative;
width: 100%
height: 1050px;
/*background-color: pink; */
}
#intro .cloudWrap .leftCloud {
position: absolute;
width: 934px;
height: 816px;
background-image: url;(../img/intro/cloud1.png);
left: 0;
z-index: 2;
}
#intro .cloudWrap .rightCloud {
position: absolute;
width: 843px;
height: 858px;
background-image: url;(../img/intro/cloud1.png);
left: 0;
}
#intro .cloudWrap .dragonfly {
position: absolute;
width: 366px;
height: 228px;
background-image: url;(../img/intro/dragonfly.png);
top: 800px;
}
#intro .introWrap .lion {
animation: spinLion 1500ms linear infinite alternate;
}
@keyframes spinLion {
from {
transform: rotate(-10deg);
}
to {
tranform: rotate(10deg);
}
}
#intro .introWrap .rabbit {
animation: spinRabbit 1000ms linear infinite alternate;
}
@keyframes spinRabbit {
from {
transform: rotate(0deg);
}
to {
transform: rotate(5deg);
}
}
#intro .introWrap .bear {
animation: spinRabbit 1000ms linear infinite alternate;
}
@keyframes spinBear {
from {
transform: rotate(10deg);
}
to {
transform: rotate(5deg);
}
}
#intro .introWrap .dragonfly {
animation: flyDragonfly linear 7s infinite;
}
@keyframes flyDragonfly {
from {
left: -366px;
}
to {
left: 100%;
}
}
farm
#farm1 {
position: relative;
width: 100%;
height: 800px;
background-image: url(../img/farm/farm1/farm1_bg.png);
}
#farm1 .leftRice1 {
position: absolute;
width: 390px;
height: 670px;
background-image: url(../img/farm/farm1/leftrice.png);
left: 0;
}
...
#farm1 .farmSpeechWrap {
position: relative;
top: 250px;
left: 150px;
#farm1 .farmSpeechWrap .farmSpeech {
color: #895C2F;
font-size: 18px;
line-height: 27px;
}어려운점
- 비슷하게 복사하는 것이 생각보다 어려웠음
해결방법
- 복습
학습소감
- 스스로 해낸 것 같은 느낌이지만 스스로 한 것이 아니기 때문에 조금 두렵지만 더 열심히 해봐야겠음
Please be wonderful but don't be so serious, enjoy this journey with the good people!