2021.07.14 키즈가오(2)

dogyeomyeo4444·2021년 7월 14일
대구AI스쿨
0

오늘의 강의 내용

  • 어제에 이어서 하는 키즈가오 웹사이트 제작이다.

* forest 부분


pc버전에서의 forest부분


mobile버전에서의 forest부분

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

<!-- style.css언어 -->
#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;
}

<!-- animation.css언어 -->
#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); }
}

<!-- mobile.css -->
#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) 부분


pc버전에서의 forest2 부분


mobile버전에서의 forest2 부분

<!-- html언어 -->
<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>

<!-- style.css언어 -->
#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;
}

<!-- animation.css언어 -->
#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;}
}

<!-- mobile.css언어 -->
#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) 부분


pc버전에서의 forest3 부분


mobile버전에서의 forest3 부분

<!-- html언어 -->
<div id="forest3">

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

<!-- style.css언어 -->
#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언어 -->
#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 -->
#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 부분


pc버전에서의 science 부분


mobile버전에서의 science 부분

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

<!-- 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;
 		/*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 부분


pc버전에서의 night1 부분


mobile버전에서의 night1 부분

<!-- 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: 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효과로는 별의 크기가 달라진다.

강의를 마치고난뒤 소감

분량이 많아지니 여간 힘든것이 아니다. 반복작업 인듯 아닌듯한
작업도 혼동이 일어나기 쉬웠다. 특히 집중력이 떨어지는게 느껴져 명상이라도 해야하나? 이런 생각이 들었다. 어려운점 보다는 익숙해지는것이 먼저겠다 싶었다. 주말에 반복, 연습을 하여야겠다.

profile
dogyeomyeo4444
i will be the best
이전 포스트

2021.07.13 키즈가오

다음 포스트

2021.07.15키즈가오(3)

0개의 댓글

관련 채용 정보