2021년 7월 14일 13일차

신종원·2021년 7월 14일

학습한 내용

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>

css-style

/ 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;
}

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

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

}

결과물

오늘 kidsgao 두번째 실습을 진행하였다.

학습내용 중 어려웠던 점

내용 어려운것 보다는 내가 이상황에서 어떤 태그를 적용해야하는지 잘 모르겠다.

해결방법

복습하고 이해하는게 빠른 해결방법이다.

학습소감

내용이 어렵고 할게 많지만 내가 만든 결과물들이 잘 나와있어서 재밌고, 더 노력을 해야겠다라고 생각한다.

신종원

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

이전 포스트

2021년 7월 13일 12일차

다음 포스트