2021년 7월 15일 14일차

신종원·2021년 7월 15일

학습한 내용

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 모바일에 맞는 화면 제공 -->

<title>키즈가오</title>

<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">

<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>

<div id="farm1">
	<div class="leftRice1"></div>
	<div class="farmer"></div>
	<div class="rightRice1"></div>

	<div class="farmSpeechWrap">
		<img src="img/farm/farm1/farmspeech.png" align="우리쌀 점토">

		<p class="farmSpeech">
			 식재료만 넣은 안전한<br>
			 우리쌀 점토 키즈가오<br>
			 우리 쌀을 사용하여 만들어요.<br>
			 화학물질을 사용하지 않고,<br>
			 식재료를 사용해서 만든<br>
			 안전한 제품이랍니다.<br>
			 <!-- <br>: 줄바꿈 -->
		</p>
	</div>
</div>

<div id="farm2">
	<div class="leftRice2"></div>
	<div class="scarecrow"></div>
	<div class="rightRice2"></div>
</div>

<div id="farm3">
	<div class="farm3Window"></div>
	<div class="machineWrap">
		<div class="machine1"></div>
		<div class="sawShadow"></div>
		<div class="saw1"></div>
		<div class="saw2"></div>
		<div class="machineBird"></div>
		<div class="timer"></div>
	</div>

	<img class="farm3Bubble" src="img/farm/farm3/farm3bubble.png" alt="기계를 통해서 쌀알이 딱딱한 껍질은 벗어 냅니다.">
</div>



<div id="forest1">
	<div class="leftTree"></div>

	<div class="treeWrap">
		<div class="rightTree"></div>
		<div class="rabbit1"></div>
		<div class="rabbit2"></div>
	</div>
</div>

<div id="forest2">
	<div class="frog"></div>
	<div class="machineWrap2">
		<div class="machineBottom"></div>
		<div class="machineLeft"></div>
		<div class="machineRight"></div>
	</div>

	<img class="forestBubble" src="img/forest/forest2/forestbubble.png" alt="기계를 통해서 쌀을 고운 가루로 만든답니다.">
	<!-- alt : 이미지를 대신해서 글자를 표기 -->

	<div class="forest2Tree"></div>
</div>

<div id="forest3">
	<div class="forest3Wrap">
		<div class="forest3Tree"></div>
		<div class="smallBird"></div>
		<div class="bigBird"></div>
	</div>
</div>

<div id="science">

	<div class="scienceWrap">

		<div class="scienceLeftWrap">
			<div class="gly"></div>
			<img src="img/science/leftTitle.png" alt="자초, 어성초, 감초">
			<p>자초 어성초 감초를 넣어서<br>
			피부진정 및 함염 효과가 있답니다.</p>
		</div>

		<div class="scienceCenterWrap">
			<div class="purpleSteam"></div>
			<div class="funnelBack"></div>
			<div class="funnelFront"></div>
		</div>

		<div class="scienceRightWrap">
			<div class="water"></div>
			<img src="img/science/rightTitle.png" alt="글리세린, 올리브유">
			<p>빵의 표면을 촉촉하게 해주는<br>
			글리세린과 오메가-9 지방산이<br>
			풍부한 올리브유를 넣어서<br>
			보습효과도 뛰어나답니다.</p>
		</div>

	</div>

</div>


<div id="night1">
	<div class="owl"></div>
	<div class="starWrap">
		<div class="star1"></div>
		<div class="star2"></div>
		<div class="star3"></div>
	</div>
</div>

<div id="night2">
	<div class="moon"></div>
	<img class="night2Bubble" src="img/oneday/night2/night2bubble.png" alt="하루동안 숙성을 시키게 됩니다.">
	<div class="rightMoonTree"></div>
</div>


<div id="morning">
	<div class="sun"></div>
	<div class="leftPine"></div>
	<div class="rightpine"></div>
</div>


<div id="kitchen">
	<div class="leftPan"></div>
	<div class="rightPot"></div>

	<div class="steamWrap">
		<div class="steam"></div>
		<div class="bubble1"></div>
	</div>

	<img class="kitchenBubble" src="img/kitchen/kitchenbubble.png" alt="숙성을 시킨 반죽을 잘 익혀주면">
</div>


<div id="color1">
	<div class="penguin"></div>
	<img class="color1Bubble" src="img/color/color1/color1bubble.png" alt="말랑말랑 키즈가오 완성">
</div>


<div id="color2">
	<div class="horse"></div>

	<div class="color2wrap">

		<img class="color2Bubble" src="img/color/color2/color2bubble.png" alt="색상을 선택해 보세요">

		<div class="btn-wrap">
			<button type="button" class="red"></button>
			<button type="button" class="yellow"></button>
			<button type="button" class="blue"></button>
		</div>

		<p class="color2Comment">아이가 원하는 색상을 직접 만들어 색감을 스스로 발달시킵니다.<br>
		색이 잘 섞이므로 누구나 쉽게 다양한 색을 만들 수 있습니다.</p>

	</div>
</div>

<div id="color3">
	<div class="flag"></div>
	<div class="book"></div>
	<img class="logo" src="img/color/color3/logo.png" alt="키즈가오 회사 로고">
	<div class="dice"></div>
</div>

style - css

/ Default CSS 초기화 작업/
html, body {
margin: 0;
padding: 0;
}

body {
overflow-x: hidden;
}
/overflow-x: hidden : x축이 브라우저를 넘어가면 숨김처리(태그를 안하면 가로축에 스크롤이 생성됨)/

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);

/*padding-top: 100px -> 모든 컨텐츠들이 밀리기 때문에 사용 어려움*/

}

#intro .introWrap {
position: relative;
/중앙 정렬을 하기 위해(2차원, 3차원 특성 가지고있음)/
width: 760px;
height: 516px;
/background-color: yellow;/

left: 50%;
margin-left: -300px;

}

#intro .introWrap .logo {
position: absolute;

width: 760px;
height: 516px;
background-image: url(../img/intro/logo.png);

z-index: 100;

/*margin-top: 100px -> 마진 병합현상 때문에 사용하기 어려움*/

}

#intro .introWrap .lion {
position: absolute;
/부모의 포지션 상태에 따라서 3차원 특징이 적용된 자식의 top, left, right, bottom의 기준이 달라질 수 있다./

width: 161px;
height: 161px;
background-image: url(../img/intro/lion.png);

margin: 80px 0 0 30px;

}

#intro .introWrap .rabbit {
position: absolute;

width: 105px;
height: 129px;
background-image: url(../img/intro/rabbit.png);

margin: 90px 0 0 500px;

}

#intro .introWrap .bear {
position: absolute;

width: 112px;
height: 105px;
background-image: url(../img/intro/bear.png);

margin: 310px 0 0 560px;

z-index: 200;
/*logo 위쪽으로 올라감 z축이 더 위쪽에 있으므로*/

}

#intro .introWrap .monkey {
position: absolute;

width: 85px;
height: 93px;
background-image: 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;
/부모를 relative로 감싸주는 것이 안전/
width: 934px;
height: 816px;
background-image: url(../img/intro/cloud1.png);

left: 0;
z-index: 2;

}

#intro .cloudWrap .rightCloud {
position: absolute;

width: 834px;
height: 858px;
background-image: url(../img/intro/cloud2.png);

right: 0;

}

#intro .cloudWrap .dragonfly {
position: absolute;

width: 360px;
height: 228px;
background-image: url(../img/intro/dragonfly.png);

top: 800px;

}

/ Farm1 /

#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 .rightRice1 {
position: absolute;

width: 335px;
height: 570px;
background-image: url(../img/farm/farm1/rightrice.png);
right: 0;
top: 100px;

}

#farm1 .farmer {
position: absolute;

width: 747px;
height: 1078px;
background-image: url(../img/farm/farm1/farmer.png);

left: 50%;
margin-left: -310px;

}

#farm1 .farmSpeechWrap {
position: relative;

top: 250px;
left: 150px;

}

#farm1 .farmSpeechWrap .farmSpeech {
color: #895c2f;
font-size: 18px;
line-height: 27px;
}

/ Farm2 /
#farm2 {
position: relative;
width: 100%;
height: 850px;
background-image: url(../img/farm/farm2/farm2_bg.png);
}

#farm2 .leftRice2 {
float: left;

width: 250px;
height: 850px;
background-image: url(../img/farm/farm2/leftrice2.png);

}

#farm2 .rightRice2 {
float: right;

width: 236px;
height: 850px;
background-image: url(../img/farm/farm2/rightrice2.png);

}

#farm2 .scarecrow {
position: absolute;

width: 103px;
height: 206px;
background-image: url(../img/farm/farm2/scarecrow.png);

margin: 200px 0 0 300px;

}

/ Farm3 /

#farm3 {
position: relative;

width: 100%;
height: 850px;
background-image: url(../img/farm/farm3/farm3_bg.png);

}

#farm3 .farm3Window{
position: absolute;

width: 247px;
height: 169px;
background-image: url(../img/farm/farm3/window.png);

margin: 100px 0 0 100px;

}

#farm3 .machineWrap {
position: relative;

width: 600px;
height: 455px;
/*background-color: yellow;*/

left: 50%;
margin-left: -285px;
top: 150px;

}

#farm3 .machineWrap .machine1 {
position: absolute;
width: 586px;
height: 455px;
background-image: url(../img/farm/farm3/machine1.png);

z-index: 900;

}

#farm3 .machineWrap .sawShadow {
position: absolute;

width: 95px;
height: 95px;
background-image: url(../img/farm/farm3/sawshadow.png);

margin: 145px 0 0 145px;

}

#farm3 .machineWrap .saw1,
#farm3 .machineWrap .saw2 {
position: absolute;
width: 95px;
height: 95px;
background-image: url(../img/farm/farm3/saw.png);
}

#farm3 .machineWrap .saw1 {
margin: 140px 0 0 140px;
}

#farm3 .machineWrap .saw2 {
margin: 140px 0 0 350px;
}

#farm3 .machineWrap .timer {
position: absolute;

width: 103px;
height: 104px;
background-image: url(../img/farm/farm3/second.png);

margin: 125px 0 0 45px;

z-index: 999;

}

#farm3 .machineWrap .machineBird {
position: absolute;

width: 44px;
height: 49px;
background-image: url(../img/farm/farm3/machineBird.png);

margin: 220px 0 0 20px;

z-index: 999;

}

#farm3 .farm3Bubble {
position: absolute;

top: 350px;
right: 80px;

}

#forest1 {
width: 100%;
height: 1050px;
background-image: url(../img/forest/forest1/forest1_bg.png);
}

#forest1 .leftTree {
width: 445px;
height: 1200px;
background-image: url(../img/forest/forest1/leftree.png);

left: 0;

}

#forest1 .treeWrap {
float: right;
position: relative;

width: 304px;
height: 572px;
/*background-color: yellow;*/

top: 100px;
/* top, left, right, bottom -> 자기자신이 주도해서 움직임(다른영역에 침범할 수 있다.)*/

}

#forest1 .treeWrap .rightTree {
position: absolute;

width: 304px;
height: 572px;
background-image: url(../img/forest/forest1/righttree.png);

z-index: 10;

}

#forest1 .treeWrap .rabbit1 {
position: absolute;

width: 82px;
height: 103px;
background-image: url(../img/forest/forest1/rabbit1.png);

margin: 435px 0 0 107px;
/*top right bottom left 순서 (시계방향 순서)*/

}

#forest1 .treeWrap .rabbit2 {
position: absolute;

width: 56px;
height: 75px;
background-image: url(../img/forest/forest1/rabbit2.png);

margin: 435px 0 0 200px;

}

#forest2 {
width: 100%;
height: 750px;
background-image: url(../img/forest/forest2/forest2_bg.png);
}

#forest2 .frog {
position: absolute;

width: 153px;
height: 257px;
background-image: url(../img/forest/forest2/frog.png);

margin: 50px 0 0 100px;

}

#forest2 .machineWrap2 {
position: relative;

width: 400px;
height: 400px;

left: 50%;
margin-left: -200px;
/*가운데 정렬*/
top: 180px;

}

#forest2 .machineWrap2 .machineBottom {
position: absolute;

width: 374px;
height: 162px;
background-image: url(../img/forest/forest2/machinebottom.png);

margin-top: 220px;

z-index: 200;

}

#forest2 .machineWrap2 .machineLeft {
position: absolute;

width: 123px;
height: 228px;
background-image: url(../img/forest/forest2/machineleft.png);

margin: 30px;

z-index: 200;
/*z-index(높이)가 같으면(machineBottom과 machineleft) 나중에 쓴 코드가 위로 올라가게 된다.*/

}

#forest2 .machineWrap2 .machineRight {
position: absolute;

width: 123px;
height: 248px;
background-image: url(../img/forest/forest2/machineright.png);

margin: 10px 0 0 260px;

z-index: 200;

}

#forest2 .forestBubble {
position: relative;

float: right;

top: -100px;
margin-right: 100px;

}

#forest2 .forest2Tree {
float: left;
/왼쪽 위치/
position: relative;

width: 304px;
height: 282px;
background-image: url(../img/forest/forest2/forest2tree.png);

top: 50px;
/*위에서 50px 위치*/

}

#forest3 {
width: 100%;
height: 600px;
background-image: url(../img/forest/forest3/forest3_bg.png);
}

#forest3 .forest3Wrap {
float: right;
position: relative;

width: 354px;
height: 440px;

top: 100px;

}

#forest3 .forest3Wrap .forest3Tree {
position: absolute;

width: 354px;
height: 440px;
background-image: url(../img/forest/forest3/forest3tree.png);

}

#forest3 .forest3Wrap .smallBird {
position: absolute;

width: 40px;
height: 35px;
background-image: url(../img/forest/forest3/bird_sm.png);

top: 120px;
left: 125px;

}

#forest3 .forest3Wrap .bigBird {
position: absolute;

width: 83px;
height: 80px;
background-image: url(../img/forest/forest3/bird_big.png);

margin: 280px 00 94px;

}

#science {
position: relative;

width: 100%;
height: 800px;
background-image: url(../img/science/science_bg.png);

}

#science .scienceWrap{
position: relative;

width: 1068px;
height: 655px;

margin: 0 auto;
/*중앙정렬*/

}

#science .scienceWrap .scienceLeftWrap {
float: left;
width: 288px;
height: 100%;
}

#science .scienceWrap .scienceLeftWrap .gly {
width: 230px;
height: 192px;
background-image: url(../img/science/gly.png);

margin: 0 0 130px 55px;

}

#science .scienceWrap .scienceLeftWrap .p,
#science .scienceWrap .scienceRightWrap .p {
color: #8e7577;
font-size: 18px;
line-height: 26px;

padding-top: 10px;

}

#science .scienceWrap .scienceCenterWrap {
position: relative;
float: left;
width: 488px;
height: 100%;
}

#science .scienceWrap .scienceCenterWrap .purpleSteam {
position: relative;

width: 241px;
height: 216px;
background-image: url(../img/science/grape.png);

left: 50%;
margin-left: -120px;

}

#science .scienceWrap .scienceCenterWrap .funnelBack {
position: absolute;

width: 488px;
height: 438px;
background-image: url(../img/science/funnelback.png);

}

#science .scienceWrap .scienceCenterWrap .funnelFront {
position: relative;

width: 485px;
height: 390px;
background-image: url(../img/science/funnelfront.png);

margin-top: 48px;

}

#science .scienceWrap .scienceRightWrap {
float: right;
width: 292px;
height: 100%;
}

#science .scienceWrap .scienceRightWrap .water {
width: 204px;
height: 191px;
background-image: url(../img/science/water.png);

margin-bottom: 130px;

}

#night1 {
width: 100%;
height: 700px;
background-image: url(../img/oneday/night1/night1_bg.png);
}

#night1 .owl {
position: absolute;

width: 334px;
height: 571px;
background-image: url(../img/oneday/night1/owl.png);

margin-top: 50px;

}

#night1 .starWrap {
position: relative;

width: 750px;
height: 400px;

top: 150px;
margin-left: 600px;

}

#night1 .starWrap .star1,
#night1 .starWrap .star2,
#night1 .starWrap .star3 {
position: absolute;

width: 53px;
height: 50px;
background-image: url(../img/oneday/night1/star1.png);

}

#night1 .starWrap .star1 {
margin-top: 350px;
}

#night1 .starWrap .star1 {
margin-left: 650px;
}

#night1 .starWrap .star3 {
margin: 250px 0 0 500px;
}

#night2 {
position: relative;

width: 100%;
height: 800px;
background-image: url(../img/oneday/night2/night2_bg.png);

}

#night2 .moon {
width: 135px;
height: 135px;
background-image: url(../img/oneday/night2/moon.png);
}

#night2 .night2Bubble {
position: absolute;

margin: 300px 0 0 80px

}

#night2 .rightMoonTree {
position: absolute;

width: 243px;
height: 588px;
background-image: url(../img/oneday/night2/moontree.png);

right: 0;
bottom: 0;

}

#morning {
position: relative;

width: 100%;
height: 800px;
background-image: url(../img/oneday/morning/morning_bg.png);

}

#morning .sun {
width: 131px;
height: 131px;
background-image: url(../img/oneday/morning/sun.png);
}

#morning .leftPine {
position: absolute;

width: 231px;
height: 329px;
background-image: url(../img/oneday/morning/leftpine.png);

top: 270px;

}

#morning .rightPine {
position: absolute;

width: 294px;
height: 609px;
background-image: url(../img/oneday/morning/rightpine.png);

right: 0;
bottom: 0;

}

#kitchen {
position: relative;
width: 100%;
height: 800px;
background-image: url(../img/kitchen/kitchen_bg.png);
}

#kitchen .leftPan {
float: left;

width: 253px;
height: 384px;
background-image: url(../img/kitchen/pan.png);

}

#kitchen .rightPot {
float: right;

width: 243px;
height: 132px;
background-image: url(../img/kitchen/pot.png);

}

#kitchen .steamWrap {
position: relative;

width: 483px;
height: 457px;

left: 50%;
margin=left: -275px;
top: -100;

clear: both;
/*위에있는 float left,right기능을 꺼버림*/

}

#kitchen .steamWrap .steam {
position: absolute;

width: 479px;
height: 457px;
background-image: url(../img/kitchen/steam.png);

z-index: 100;

}

#kitchen .steamWrap .bubble1 {
position: absolute;

width: 55px;
height: 56px;
background-image: url(../img/kitchen/bubble.png);

margin-top: 230px;

}

#kitchen .kitchenBubble {
position: absolute;

top: 400px;
right: 0;

}

#color1 {
position: relative;

width: 100%;
height: 750px;
background-image: url(../img/color/color1/color1_bg.png);

}

#color1 .penguin {
position: relative;

width: 356px;
height: 244px;
background-image: url(../img/color/color1/penguin.png);

top: 100px;
left: 100px;

}

#color1 .color1Bubble {
position: relative;
float: right;

margin: 100px 200px 0 0;

}

#color2 {
position: relative;
width: 100%;
height: 800px;
background-image: url(../img/color/color2/color2_bg.png);
}

#color2 .horse {
float: right;
width: 188px;
height: 241px;
background-image: url(../img/color/color2/horse.png);

margin: 100px 100px 0 0;

}

#color2 .color2wrap {
clear: both;
position: relative;

width: 500px;

top: 100px;
margin-left: 50px;

}

#color2 .color2wrap .color2Bubble {
margin-bottom: 30px;
}

#color2 .color2wrap .btn-wrap {
margin-bottom: 20px;
}

#color2 .color2wrap .btn-wrap .red,
#color2 .color2wrap .btn-wrap .yellow,
#color2 .color2wrap .btn-wrap .blue {
width: 59px;
height: 82px;
}

#color2 .color2wrap .btn-wrap .red {
background-image: url(../img/color/color2/btn/btn_red.png);
}

#color2 .color2wrap .btn-wrap .yellow {
background-image: url(../img/color/color2/btn/btn_yellow.png);
}

#color2 .color2wrap .btn-wrap .blue {
background-image: url(../img/color/color2/btn/btn_blue.png);
}

#color2 .color2wrap .color2Comment {
color: #8e7577;
}

#color3 {
position: relative;

width: 100%;
height: 800px;
background-image: url(../img/color/color3/color3_bg.png);

}

#color3 .flag {
position: relative;

width: 1774px;
height: 178px;
background-image: url(../img/color/color3/flag.png);

left: 50%;
margin-left: -887px;
/*가운데 정렬*/

}

#color3 .book {
float: right;

width: 417px;
height: 178px;
background-image: url(../img/color/color3/book.png);

}

#color3 .logo {
position: absolute;

left: 50%;
margin-left: -378.5px;

}

#color3 .dice {
position: absolute;
width: 239px;
height: 200px;
background-image: url(../img/color/color3/dice.png);

left: 0;
bottom: 0;

}

animation - css

/intro/

#intro .introWrap .lion {
animation: spinLion 1500ms linear infinite alternate;
}

@keyframes spinLion {
from {
transform: rotate(-10deg);
}

to {
	transform: 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: spinBear 1000ms linear infinite alternate;
}

@keyframes spinBear {
from {
transform: rotate(10deg);
}

to {
	transform: rotate(-10deg);
}

}

#intro .introWrap .monkey {
animation: spinMonkey 800ms linear infinite alternate;
}

@keyframes spinMonkey {
from {
transform: rotate(20deg);
}

to {
	transform: rotate(50deg);
}

}

#intro .cloudWrap .dragonfly {
animation: flyDragonfly linear 7s infinite;
}

@keyframes flyDragonfly {
from {
left: -366px;
}

to {
	left: 100%;
	/*px로 설정하면 쓸데 없는 움직임이나 매번 브라우징 사이즈가 바뀌면 바꿔줘야한다.*/
}

}

/Farm3/

#farm3 .machineWrap .timer {
animation: rotateTimer 10000ms linear infinite;
}

@keyframes rotateTimer {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

#farm3 .machineWrap .saw1 {
animation: rotateLeftSaw 10000ms linear infinite;
}

@keyframes rotateLeftSaw {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

#farm3 .machineWrap .saw2 {
animation: rotateRightSaw 10000ms linear infinite;
}

@keyframes rotateRightSaw {
from {transform: rotate(360deg);}
to {transform: rotate(0deg);}
}

#forest1 .treeWrap .rabbit1 {
animation: spinRabbitOne 1000ms linear infinite alternate;
}

@keyframes spinRabbitOne {
from { transform: rotate(0deg); }
to { transform: rotate(10deg); }
}

#forest1 .treeWrap .rabbit2 {
animation: spinRabbitTwo 1000ms linear infinite alternate;
}

@keyframes spinRabbitTwo {
from { transform: rotate(10deg); }
to { transform: rotate(0deg); }
}

#forest2 .machineWrap2 .machineLeft {
animation: moveLeft 1s linear infinite alternate;
}

@keyframes moveLeft {
from {left: 30px;}
to {left: 0;}
}

#forest2 .machineWrap2 .machineRight {
animation: moveRight 1s linear infinite alternate;
}

@keyframes moveRight {
from {left: -30px;}
to {left: 0;}
}

#forest3 .forest3Wrap .smallBird {
animation: spinSmallBird 1000ms linear infinite alternate;
}

@keyframes spinSmallBird {
from { transform: rotate(0deg); }
to { transform: rotate(10deg); }
}

#forest3 .forest3Wrap .bigBird {
animation: spinBigBird 1000ms linear infinite alternate;
}

@keyframes spinBigBird {
from { transform: rotate(-10deg); }
to { transform: rotate(10deg); }
}

#science .scienceWrap .gly {
animation: spinGly 1500ms linear infinite alternate;
}

@keyframes spinGly {
from {transform: rotate(0deg);}
to {transform: rotate(50deg);}
}

#science .scienceWrap .water {
animation: spinWater 1500ms linear infinite alternate;
}

@keyframes spinWater {
from {transform: rotate(0deg);}
to {transform: rotate(-50deg);}
}

#night1 .starWrap .star1,
#night1 .starWrap .star2,
#night1 .starWrap .star3 {
animation: pulseStar 1s linear infinite alternate;
}

@keyframes pulseStar {
from { transform: scale(1);}
to { transform: scale(0.8);}
}

#night2 .moon {
animation: moveMoon linear 10s infinite;
}

@keyframes moveMoon {
from { margin-left: -135px; }
to { margin-left: 110%; }
}

#morning .sun {
animation: moveSun linear 10s 1500ms infinite;
/duration delay (숫자 순서)/
}

@keyframes moveSun {
from { margin-left: -131px; }
to { margin-left: 110%; }
}

#kitchen .steamWrap .bubble1 {
animation-name: bubble;
animation-duration: 1000ms;
animation-delay: 0ms;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform-origin: 0 0;
}
@keyframes bubble {
0% {transform:translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
100% {transform:translate(-115px, -225px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
}html::after { content: url(https://ga-beacon.appspot.com/UA-42910121-1/stylie?pixel); position: absolute; left: -999em; }
}

mobile - css

@media (max-width: 767px) {

#intro {
	height: 1150px;
	background-image: url(../img/mobile/intro/mobile_intro_bg.png);
}

#intro .introWrap {
	width: 189px;
	height: 129px;

	margin-left: -94.5px;
	/*width의 절반값으로 센터 지정*/
	/*background-color: yellow;*/

	top: 230px;
}

#intro .introWrap .logo {
	width: 189px;
	height: 129px;
	background-image: url(../img/mobile/intro/mobile_intro_logo);
}

#intro .introWrap .lion,
#intro .introWrap .rabbit,
#intro .introWrap .bear,
#intro .introWrap .monkey,
#intro .cloudWrap .dragonfly {
	display: none;
}

#intro .cloudWrap {
	height: 350px;

	top: 280px;
}

#intro .cloudWrap .leftCloud {
	width: 267px;
	height: 314px;
	background-image: url(../img/mobile/intro/mobile_cloud1.png);
}

#intro .cloudWrap .rightCloud {
	width: 237px;
	height: 309px;
	background-image: url(../img/mobile/intro/mobile_cloud2.png);
}

/* Farm1 */
#farm1 {
	height: 450px;
	background-image: url(../img/mobile/farm/farm1/mobile_farm1_bg.png);
}

#farm1 .leftRice1{
	width: 86px;
	height: 150px;
	background-image: url(../img/mobile/farm/farm1/mobile_leftrice.png);
}

#farm1 .rightRice1{
	width: 95px;
	height: 170px;
	background-image: url(../img/mobile/farm/farm1/mobile_rightrice.png);

	top: -20px;
}

#farm1 .farmer{
	width: 160px;
	height: 250px;
	background-image: url(../img/mobile/farm/farm1/mobile_farmer.png);

	margin-left: -69px;
}

#farm1 .farmSpeechWrap {
	width: 300px;
	
	text-align: center;

	left: 50%;
	margin-left: -150px;
}

#farm1 .farmSpeechWrap img {
	width: 79px;
}

#farm1 .farmSpeechWrap .farmSpeech {
	line-height: 20px;
	font-size: 12px;
}	

#farm2 {
	height: 440px;
	background-image: url(../img/mobile/farm/farm2/mobile_farm2_bg.png);
}

#farm2 .leftRice2 {
	width: 57px;
	height: 201px;
	background-image: url(../img/mobile/farm/farm2/mobile_leftrice2.png);
}

#farm2 .rightRice2 {
	width: 54px;
	height: 202px;
	background-image: url(../img/mobile/farm/farm2/mobile_rightrice2.png);
}

#farm2 .scarecrow {
	display: none;
}

#farm3{
	height: 500px;
	background-image: url(../img/mobile/farm/farm3/mobile_farm3_bg.png);
}

#farm3 .farm3Window {
	width: 82px;
	height: 56px;
	background-image: url(../img/mobile/farm/farm3/mobile_window.png);

	margin-left: 10px 0 0 10px;
}

#farm3 .machineWrap{
	width: 200px;
	height:  150px;
	
	top: 120px;
	margin-left: -96px;
	}

#farm3 .machineWrap .machine1 {
	width: 191px;
	height: 149px;
	background-image: url(../img/mobile/farm/farm3/mobile_machine1.png);
}

#farm3 .machineWrap .msawSahdow {
	display: none;
}

#farm3 .machineWrap .saw1,
#farm3 .machineWrap .saw2,
#farm3 .machineWrap .machineBird {
	width: 31px;
	height: 31px;
	background-image: url(../img/mobile/farm/farm3/mobile_saw.png);
}

#farm3 .machineWrap .saw1 {
	margin: 50px 0 0 50px;
}

#farm3 .machineWrap .saw2 {
	margin: 50px 0 0 115px;
}


#farm3 .farm3Bubble {
	position: absolute;

	width: 152px;

	left: 50%;
	margin: 0 0 0 -70px;
}


#forest1 {
	position: relative;

	height: 400px;
	background-image: url(../img/mobile/forest/forest1/mobile_forest1_bg.png);
}

#forest1 .leftTree {
	width: 79px;
	height: 187px;
	background-image: url(../img/mobile/forest/forest1/mobile_lefttree.png);
}

#forest1 .treeWrap {
	width: 68px;
	height: 129px;

	top: 200px;
}

#forest1 .treeWrap .rabbit1,
#forest1 .treeWrap .rabbit2 {
	display: none;
}

#forest1 .treeWrap .rightTree {
	width: 68px;
	height: 129px;
	background-image: url(../img/mobile/forest/forest1/mobile_righttree.png);
}

#forest2 {
	position: relative;

	height: 400px;
	background-image: url(../img/mobile/forest/forest2/mobile_forest2_bg.png);
}


#forest2 .frog {
	width: 34px;
	height: 57px;
	background-image: url(../img/mobile/forest/forest2/mobile_frog.png);

	margin: 0 0 0 20px;
}

#forest2 .machineWrap2 {
	width: 200px;
	height: 110px;

	top: 70px;
	margin-left: -97px;
}

#forest2 .machineWrap2 .machineBottom {
	width: 141px;
	height: 60px;
	background-image: url(../img/mobile/forest/forest2/mobile_machinebottom.png);

	left: 50%;
	margin:50 0 0 -70.5px;
}

#forest2 .machineWrap2 .machineLeft {
	width: 46px;
	height: 85px;
	background-image: url(../img/mobile/forest/forest2/mobile_machineleft.png);

	margin: 0 0 0 20px;
}

#forest2 .machineWrap2 .machineRight {
	width: 46px;
	height: 93px;
	background-image: url(../img/mobile/forest/forest2/mobile_machineright.png);

	margin: -10px 0 0 130px;
}

#forest2 .forestBubble {
	position: absolute;

	width: 161px;

	top: 290px;
	left: 50%;
	margin-left: -83px;
}

#forest2 .forest2Tree {
	float: right;

	width: 69px;
	height: 76px;
	background-image: url(../img/mobile/forest/forest2/mobile_forest2tree.png);

	top: 130px;
	margin-right: 20px;
}


#forest3 {
	height: 630px;

	background-image: url(../img/mobile/forest/forest3/mobile_forest3_bg.png);
}

#forest3 .forest3Wrap {
	width: 99px;
	height: 127px;

	top: 300px;
}

#forest3 .forest3Wrap .forest3Tree {
	width: 99px;
	height: 127px;
	background-image: url(../img/mobile/forest/forest3/mobile_forest3tree.png);
}

#forest3 .forest3Wrap .smallBird,
#forest3 .forest3Wrap .bigBird {
	display: none;
}


#science {
height: 580px;
background-image: url(../img/mobile/science/mobile_science_bg.png);
}

#science .scienceWrap {
	overflow: hidden;

	width: 360px;
	height: auto;

	top: 180px;
}

#science .scienceWrap .scienceLeftWrap {
	width: 100px;
}

#science .scienceWrap .scienceLeftWrap .gly {
	width: 76px;
	height: 63px;
	background-image: url(../img/mobile/science/mobile_gly.png);

	margin: 0 0 10px 0;
}

#science .scienceWrap .scienceLeftWrap img,
#science .scienceWrap .scienceRightWrap img {
	height: 15px;
}

#science .scienceWrap .scienceLeftWrap p,
#science .scienceWrap .scienceRightWrap p {
	display: none;
}

#science .scienceWrap .scienceCenterWrap {
	width: 160px;
	height: 222px;
}

#science .scienceWrap .scienceCenterWrap .purpleSteam {
	width: 80px;
	height: 71px;
	background-image: url(../img/mobile/science/mobile_grape.png);

	margin-left: -40px;
}


#science .scienceWrap .scienceCenterWrap .funnelBack {
	width: 173px;
	height: 151px;
	background-image: url(../img/mobile/science/mobile_hopperback.png);
}

#science .scienceWrap .scienceCenterWrap .funnelFront {
	width: 160px;
	height: 122px;
	background-image: url(../img/mobile/science/mobile_hopperfront.png);

	left: 50%;
	margin-left: 20px 0 0 -80px;
}

#science .scienceWrap .scienceRightWrap {
	width: 100px;
}

#science .scienceWrap .scienceRightWrap .water {
	width: 67px;
	height: 63px;
	background-image: url(../mobile/science/mobile_water.png);

	margin-bottom: 10px;
	margin-left: 32px;
}


#night1 {
	position: relative;
	height: 500px;
	background-image: url(../img/mobile/oneday/night1/mobile_night1_bg.png);
}

#night1 .owl {
	width: 88px;
	height: 151px;
	background-image: url(../img/mobile/oneday/night1/mobile_owl.png);
	margin-top: 0;
}

#night1 .starWrap {
	position: absolute;

	width: 300px;
	height: 157px;
	background-image: url(../img/mobile/oneday/night1/mobile_star1.png);

	top: 300px;
	margin-left: 50px;
}

#night1 .starWrap .star1,
#night1 .starWrap .star2,
#night1 .starWrap .star3 {
	display: none;
}



#night2 {
	height: 620px;
	background-image: url(../img/mobile/oneday/night2/mobile_night2_bg.png);
}

#night2 .moon {
	width: 40px;
	height: 40px;

	background-image: url(../img/mobile/oneday/night2/mobile_moon.png);
}

#night2 .night2Bubble {
	width: 127PX;

	left: 50%;
	margin: 300PX 0 0 -67PX;
}

#night2 .rightMoonTree {
	width: 70px;
	height: 173px;
	background-image: url(../img/mobile/oneday/night2/mobile_moontree.png);

	top: 70px;
	bottom: initial;
	/*미디어쿼리에서 적용되던것을 모바일 버전에서는 사용하지 않으려면 initial을 사용하면 된다.*/
}



#morning {
	height: 720px;
	background-image: url(../img/mobile/oneday/morning/mobile_morning_bg.png);
}

#morning .sun {
	width: 33px;
	height: 32px;
	background-image: url(../img/mobile/oneday/morning/mobile_sun.png);
}

#morning .leftPine {
	width: 48px;
	height: 81px;
	background-image: url(../img/mobile/oneday/morning/mobile_leftpine.png);
}

#morning .rightPine {
	width: 77px;
	height: 149px;
	background-image: url(../img/mobile/oneday/1morning/mobile_rightpine.png);

	top: 220px;
}


#kitchen {
	height: 400px;
	background-image: url(../img/mobile/kitchen/mobile_kitchen_bg.png);
}

#kitchen .leftpan {
	width: 52px;
	height: 78px;
	background-image: url(../img/mobile/kitchen/mobile_pan.png);
}

#kitchen .rightPot {
	width: 73px;
	height: 38px;
	background-image: url(../img/mobile/kitchen/mobile_pot.png);
}

#kitchen .steamWrap {
	width: 300px;
	height: 300px;
	margin-left: -150px;

	top: 0;
}

#kitchen .steamWrap .steam {
	width: 222px;
	height: 184px;
	background-image: url(../img/mobile/kitchen/mobile_steam.png);
}

#kitchen .steamWrap .steam {
	width: 222px;
	height: 184px;
	background-image: url(../img/mobile/kitchen/mobile_steam.png);

	left: 50%;
	top: 100px;
	margin-left: 0 0 0 -140px;
}

#kitchen .steamWrap .bubble1 {
	display: none;
}

#kitchen .kitchenBubble {
	width: 143px;
	left: 50%;

	margin-right: -130px 0 0 -70px;
}


#color1 {
	height: 500px;
	background-image: url(../img/mobile/color/color1/mobile_color1_bg.png);
}

#color1 .penguin {
	display: none;
}

#color1 .color1Bubble {
	position: relative;
	float: initial;
	/*모바일에서 float 기능 끔(initial을 사용해서)*/

	width: 166px;
	height: 56px;

	left: 50%;
	margin: 100 0 0 -83px;
}


#color2 {
	height: 400px;
	background-image: url(../img/mobile/color/color2/mobile_color2_bg.png);
}

#color2 .horse {
	display: none;
}

#color2 .color2wrap {
	width: 320px;
	height: 200px;

	top: 0;
	left: 50%;
	margin-left: -160px;

	text-align: center;
}

#color2 .color2wrap .color2Bubble {
	width: 128px;
}

#color2 .color2wrap .btn-wrap {
	width: 300px;
	height: 60px;
	margin-bottom: 0;
}

#color2 .color2wrap .btn-wrap .red,
#color2 .color2wrap .btn-wrap .yellow, 
#color2 .color2wrap .btn-wrap .blue {
width: 40px;
height: 56px;
}

#color2 .color2wrap .btn-wrap .red {
	background-image: url(../img/mobile/color/color2/btn/mobile_btn_red.png);
}

#color2 .color2wrap .btn-wrap .yellow {
	background-image: url(../img/mobile/color/color2/btn/mobile_btn_yellow.png);
	margin-left: 20px;
	margin-right: 20px;
}

#color2 .color2wrap .btn-wrap .blue {
	background-image: url(../img/mobile/color/color2/btn/mobile_btn_blue.png);
}

#color2 .color2wrap .color2Comment {
	color: #8e7577;
	line-height: 15px;
	font-size: 10px;
}


#color3 {
	height: 430px;
	background-image: url(../img/mobile/color/color3/mobile_color3_bg.png);
}

#color3 .flag {
	width: 320px;
	height: 46px;
	background-image: url(../img/mobile/color/color3/mobile_flag.png);
	
	margin-left: -160px;
}

#color3 .book {
	width: 107px;
	height: 46px;
	background-image: url(../img/mobile/color/color3/mobile_book.png);
 	
 	margin-right: 20px;
}

#color3 .logo {
	width: 225px;

	margin-top: 100px;
	margin-left: -112.5px;
}

#color3 .dice {
	width: 62px;
	height: 52px;
	background-image: url(../img/mobile/color/color3/mobile_dice.png);
}

}

결과물

학습내용 중 어려웠던 점

종합적으로 공부를 했는데 방법이 여러가지라 어느것이 정답인 것은 없었고, 내가 어떤 태그를 사용해서 만들것인지 정해야했다.

해결방법

많은 것들을 연습해봐야 눈에 뜨일것 같다.
연습만이 살길이다.

학습소감

오늘로써 키즈가오 홈페이지를 내가 A부터 Z까지 직접 타자를 치면서 코드를 작성했는데, 눈으로 홈페이지를 봤을 때 얼마 되지 않는 페이지를 작성하기 위해 2000줄이 되는 코드를 작성했다. 이렇게 뒤에서 많은 고생을 하는지 오늘 수업을 통해 느꼈다.

신종원

나는 돈 많이 버는 개발자가 될 것이다.

이전 포스트

2021년 7월 14일 13일차

다음 포스트