개발일지(2021-07-14)

서범규·2021년 7월 14일
키즈가오
0

학습한 내용

전날에 하던 작업에 이어서 홈페이지 하단쪽에 이미지, 애니메이션, 모바일버전 작업을 했습니다.

html

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

		<div class="treeWrap">
			<div class="rabbit1"></div>
			<div class="rabbit2"></div>
			<div class="rightTree"></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="기계를 통해서 쌀을 고운 가루로 만든답니다.">
		<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>

style

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

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






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

#forest2 .machineWrap2 {
	position: relative;

	width: 400px;
	height: 400px;
	background-color: yellowgreen;
	left: 50%;
	margin-left: -200;
	top: 100px;
}

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

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







#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: 200px 0 0 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(../science/funnelfront.png);

	margin-top: 48px;
}

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

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

	margin-bottom: 130px;
}




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

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

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

animation

#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: spinSmallBrid 1000ms linear infinite alternate;
}

@keyframes spinSmallBrid {
	from {
		transform: rotate(0deg);
	}

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

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

@keyframes spinBigBrid {
	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

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




	#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 .purpleSteam {
		width: 80px;
		height: 71px;
		background-image: url(../img/mobile/science/mobile_grape.png);

		margin-left: -40px;
	}

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

	#science .scienceWrap .scienceLeftWrap .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;
	}




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

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

		margin-top: 0;
	}

	#night1 .starWrap {
		position: absolute;

		width: 308px;
		height: 157px;
		background-image: url(../img/mobile/oneday/night/mobile_star.png);

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

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

학습한 내용 중 어려웠던 점 또는 해결못한 것들

아직까지 2차원과 3차원을 구분하면서 작업하기가 많이 힘들었습니다. 그리고 style 작업이 다른 작업들 보다 비교적으로 양이 많아서 틀린 부분을 스크롤하면서 찾을때 고생했습니다.

해결방법 작성

2차원과 3차원에 해당되는 것들을 다시 한번 검색해서 정리해 놓고, style 작업의 경우는 각 파트부분들 시작하기 전에 주석처리를 해서 표시를 하고 시작하는 것이 좋을거 같습니다.

학습 소감

강의를 보면서 따라하기도 벅차서 학습을 마치고 스스로 작업을 해낼 수 있는 자신감이 점점 떨어져 가는거 같습니다. 그리고 아직까지 틀린 부분을 찾아내는 요령이 많이 부족해서 작업하는 동안 고생을 더 하는거 같습니다.

profile
서범규
이전 포스트

개발일지(2021-07-13)

다음 포스트

개발일지(2021-07-15)

0개의 댓글