키즈가오 실습 - 2

배성현·2021년 9월 13일

forest 부분
1) 학습한 내용

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

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

#forest1 .leftTree {
position: absolute;

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

left: 0;

}

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

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

top: 100px;

}

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

}

#forest1 .treeWrap .rabbit2 {
position: absolute;

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

margin: 435px 0 0 200px;

}

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

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

animation효과 토끼 두마리 고개 좌우로 움직임

forest(2) 부분

	<img class="forestBubble" src="img/forest/forest2/forestbubble.png" alt="기계를 통해서 쌀을 고운 가루로 만든답니다.">
	<div class="forest2Tree"></div>

#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;
/*background-color: yellow;*/

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-top: 30px;

z-index: 200;

}

#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-left: 100px;

}

#forest2 .forest2Tree {
float: left;
position: relative;

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

top: 50px;

}

#forest2 .machineWrap2 .machineLeft {
animation: moveLeft 1000ms linear infinite alternate;
}

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

#forest2 .machineWrap2 .machineRight {
animation: moveRight 1000ms linear infinite alternate;
}

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

#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;
/background-color: yellow;/

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: 50px 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;
}
img경로에 주의를 하며서 작성

소스코드가 길어짐에 따라 틀린부분을 찾기가 쉽지않으므로
오타에 주의를 하자

br태그 : 줄바꿈

forest(3) 부분

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

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

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

width: 354px;
height: 440px;
/*background-color: yellow;*/

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 0 0 94px;

}

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

}

#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;
}
animation효과로 새가 좌우로 움직인다.

science 부분

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

#science {
position: relative;

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

}

#science .scienceWrap {
position: relative;

width: 1068px;
height: 655px;
/*background-color: yellow;*/

margin: 0 auto;

}

#science .scienceWrap .scienceLeftWrap {
float: left;
width: 288px;
height: 100%;
/background-color: blue;/
}

#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%;
/*background-color: pink;*/

}

#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: left;
width: 292px;
height: 100%;
/background-color: gray;/
}

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

margin-bottom: 130px;

}

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

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

#science .scienceWrap {
overflow: hidden;
width: 360px;
height: auto;

top: 180px;
/margin-left: -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: 20px 0 0 -80px;
}

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

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

margin-bottom: 10px;
margin-left: 32px;
}
funnelBack보다 funnelFront이미지가 앞에 위치

animation효과로는 양쪽의 비커들이 움직인다.

night1 부분

	<div class="starWrap">
		<div class="star1"></div>
		<div class="star2"></div>
		<div class="star3"></div>
	</div>

#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;
/*background-color: pink;*/

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 .star2 {
margin-left: 650px;
}

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

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

#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: 308px;
height: 157px;
/background-color: pink;/
background-image: url(../img/mobile/oneday/night1/mobile_star.png);

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

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

animation효과로는 별의 크기가 달라진다.
2) 학습내용 중 어려웠던 점
매니저분들이 볼때는 아 ㅋ 뭐 누워서 떡먹기네 겠지만 저한테는 진짜 하나부터 열까지 다 어려워서 죽는 줄 알았씁니다
3) 해결 방법
이제와서 든 생각인데 이거는 그냥 재능이 타고나야 가능하지 않나 싶어요 아무리 강의영상 보면서 복습한대도 제 머리로는 인되는데요???
4) 학습소감
절 들어가고싶네요 정말 이거 들으면서 제 머리털이 다 빠지고 빡빡이가 된 기분을 느꼈구요 뭐이리 어려운건지 제 머리로는 도저히 이해를 못하겠지만 복습하고 또 복습할게요 돈 벌어야죠... 네.....

배성현

이전 포스트

키즈가오 실습 1

다음 포스트

키즈가오 실습 - 2

키즈가오 실습 1

키즈가오 실습3

0개의 댓글