개발일지 7일차

이재경·2021년 6월 2일
키즈가오
0

1. 학습내용

  • 키즈가오 실습(forest 구간)

<index.html>

<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="기계를 통해 쌀을 고운 가루로 만든답니다.">
	<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>

style.css

/*forest1*/
#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;
}
/*forest2*/
#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: 200px;
    }
#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-right: 100px;
}
#forest2 .forest2Tree {
	float: left;
	position: relative;
	width: 304px;
	height: 282px;
	background-image: url(../img/forest/forest2/forest2tree.png);
	top: 50px;
}
/*forest3*/
#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;
}

animation.css

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

mobile.css

/*forest1*/
	#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;
		/*style.css에서 position: relative를 용했기때문에 top 사용이 가능하다*/
		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: 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;
	}
  • 결과
    PC버전
    forest1

    forest2

    forest3

    모바일버전
    forest

  • 키즈가오 (science 구간)
    <index.html>

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

style.css

#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;
}
/*img와 p태그 사이의 공백을 내기위한 방법 : p태그에 padding-top
또는 img태그에 margin-bottom */
#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;
}

animation.css

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

mobile.css

#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: 220px;
	}
	#science .scienceWrap .scienceCenterWrap .purpleSteam {
		width: 80px;
		height: 72px;
		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;
	}
  • 결과
    PC버전

    모바일버전
  • 키즈가오 실습(night1 구간)

    index.html

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

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

animation.css

#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

#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_star.png);
		top: 300px;
		margin-left: 50px;
	}
	#night1 .starWrap .star1,
	#night1 .starWrap .star2,
	#night1 .starWrap .star3 {
		display: none;
	}
  • 결과
    PC버전

    모바일버전

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

position에 따라서 2차원, 3차원으로 나뉘는데 이 때 레이아웃의 구성이 달라져 요소들의 위치가 정확히 놓기 힘들고 어려웠다.

3. 해결방법 작성

position 2,3차원 구분을 통해 해결

4. 학습 소감

position 구분과 margin에 대한 복습이 필요함을 느낌

profile
이재경
I'm Closer
이전 포스트

개발일지 6일차

다음 포스트

개발일지 8일차

0개의 댓글

관련 채용 정보