13(2021.07.14)

쩜·2021년 7월 14일

AI school

목록 보기

13/49

7강 키즈가오1 (02:20:37 - 끝)

forest1

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

#forest1 .treeWrap .rabbit1 {
	position: absolute;

	width: 82px;
	height: 103px;
	background-image: url(../img/forest/forest1/rabbit1.png);

	margin: 435ppx 0 0 107px;
}

어려웠던 점
여기까지 따라오는데 우여곡절이 너무 많았다...
강의는 10분도 안 들었는데 난 30분동안 이 부분만 반복을 했다. ㅠㅠ
처음에 노란 박스가 원하는 위치에 들어가지 않고 forest 이미지가 다 끝난 아랫 부분에 생성이 되어서 하다보면 문제점을 찾을 수 있겠지 하고 강의를 이어나갔다. 강사님께서 평소에 하셨던 방법으로 마우스 우클릭에 검사를 눌러서 확인을 해보려 했지만 찾지 못했다.
나무 그림을 넣는 차례에서도 내 페이지에는 나무가 안 보였다.
그리고 첫번째 토끼를 넣는 부분이었는데 토끼 머리가 손과는 거리가 너무 먼 노란 박스의 왼쪽 상단에 붕 떠있어서 토끼를 구해야겠다는 생각으로 문제점을 찾기 시작했다.

해결방법
강의를 계속 돌려보았다.
1) 나무 그림 해결
나무 그림이 안 보였던 것은 html 코드를 작성할 때 div 태그를 잘못 사용을 했었다. div 태그 부분을 수정하니 나무가 보였다.
2) 노란 박스 위치 해결
left tree에 position: absolute; 를 해주지 않았던 것
3) 토끼 해결
이건 정말 사소한 실수였는데 px 부분이 오타가 났었다.
어렵지 않은 문제였지만 검사를 눌러서 코드를 보면서 토끼 margin이 적용되지 않은 걸 확인을 했음에도 불구하고 오탈자를 찾지 못했던 게 속상했다 ㅠ

오랜 시간 끝에 토끼를 구할 수 있었다.

토끼 친구 만들어주기 css

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

style.css

#forest1 .treeWrap .rightTree {
	position: absolute;

	width: 304px;
	height: 572px;
	background-image: url(../img/forest/forest1/righttree.png);

	z-index: 10;
}

z-index를 추가하여 토끼 얼굴이 뒤로 가도록 해준다.

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

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

style.css
기계 넣기

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

같은 3차원이 적용되어있지만 나중에 작성된 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;
}

style
bubble & tree 넣기

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

animation

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

mobile

machine

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

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

bubble & tree

	#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

html

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

style

#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

#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

#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,
#forest2 .forest3Wrap .bigBird {
	display: none;
}

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

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

#science .scienceWrap .scienceCenterWrap {
	position: relative;
	float: left;
	width: 488px;
	height: 100%;
	background-color: pink;
}

#science .scienceWrap .scienceRightWrap {
	float: right;
	width: 292px;
	height: 100%;
	background-color: gray;
}

scienceRightWarp 에 float: right; 해도 괜찮다

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

	margin-bottom: 130px;
}

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

	margin-bottom: 130px;
}

#science .scienceWrap .scienceCenterWrap .funnelBack {
	position: absolute;

	width: 488px;
	height: 438px;
	background-image: url(../img/science/funnelBack.png);
}

#science .scienceWrap .scienceCenterWrap .funnelFront {
	position: relative;

	width: 285px;
	height: 390px;
	background-image: url(../img/science/funnelfront.png);

	margin-top: 48px;
}

animation

#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

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

배치가 다 틀어진다 pc버전에 적용된 값들 때문에!

overflow: hidden;
float 사용한 자식의 높이 값이 부모에게 영향줄 수 있다.

#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: 173p;
	height: 151p;
	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 {
	height: 61px;
	height: 63px;
	background-image: url(../img/mobile/science/mobile_water.png);

	margin-bottom: 10px;
	margin-left: 32px;
}

어려웠던 점2
내 그림은 왜 반복되는건지 깜짝 놀랬다 ㅠ

해결 방법
centerWrap에서 funnelBack 부분 픽셀 단위 오타
너무 허망하다
해결하고 보니 비커 부분 위치도 이상한 것 같아서 확인하니까 width 설정을 해야하는데 height를 두 번 설정해놓았다.

낮 밤 영역

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

#night1 .starWrap .star1,
#night1 .starWrap .star2,
#night1 .starWrap .star3 {
	animation: pulsStar 1s linear infinite alternate;
}

@keyframes pulsStar {
	from { transform: scale(1); }
	to { transform: scale(0.8); }
}

mobile

#night1 {
	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: ;
}


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

학습 소감
실수를 너무 많이 한 것 같다. 틀린 부분을 찾아내는 것도 쉽지 않다. 강의를 들으면서 집중력이 흐려졌나보다. 오늘은 이때까지 중 제일 힘들었던 것 같다 ㅠㅠ

쩜

이전 포스트

12(2021.07.13)

다음 포스트

13(2021.07.14)

AI school

forest1

forest2

forest3

science 영역

낮 밤 영역

12(2021.07.13)

14(2021.07.15)

0개의 댓글

관련 채용 정보