14(2021.07.15)

7강 웹프로그래밍 키즈가오2(전체)

학습 내용
night2 부터 이어서 웹 사이트 작업을 마무리

html

	<div id="night2">
		<div class="moon"></div>
		<img class="night2Bubble" src="img/oneday/night2/night2bubble.png" alt="하루동안 숙성을 시키게 됩니다."></div>
		<div class="rightMoonTree"></div>
	</div>

style

#night2 {
	position: relative;

	width: 100%;
	height: 800px;
	background-image: url(../img/oneday/night2/night2_bg.png);
}

#night2 .moon {
	width: 135px;
	height: 135px;
	background-image: url(../img/oneday/night2/moon.png);
}

#night2 .night2Bubble {
	position: absolute;

	margin: 300px 0 0 80px;
}

#night2 .rightMoonTree {
	position: absolute;

	width: 243px;
	height: 588px;
	background-image: url(../img/oneday/night2/moontree.png);

	right: 0;
	bottom:  0;
}

animation

#night2 .moon {
	animation: moveMoon linear 10s infinite;
}

@keyframes moveMoon {
	from {
		margin-left: -135px;
	}
	to {
		margin-left: 110%;
	}

mobile

#night2 {
	height: 620px;
	background-image: url(../img/mobile/oneday/night2/mobile_night2_bg.png);
}

#night2 .moon {
	width: 40px;
	height: 40px;

	background-image: url(../img/mobile/oneday/night2/mobile_moon.png);
}
#night2 .night2Bubble {
	width: 127px;

	left: 50%;
	margin:  300px 0 0 -67px;
}

#night2 .rightMoonTree {
	width: 70px;
	height: 173px;
	background-image: url(../img/mobile/oneday/night/mobile_moontree.png);

	top: 70px;
	bottom: initial;
} 

미디어쿼리에서 적용한 것을 모바일 버전에서는 사용하지 않을 때 initial 넣어주면 된다.

html

	<div id="morning">
		
		<div class="sun"></div>
		<div class="leftPine"></div>
		<div class="rightPine"></div>
	</div>

style

#morning {
	position: relative;

	width: 100%;
	height: 800px;
	background-image: url(../img/oneday/morning/morning_bg.png);
}

#morning .sun {
	width: 131px;
	height: 131px;
	background-image: url(../img/oneday/morning/sun.png);
}

#morning .leftPine {
	position: absolute;

	width: 231px;
	height: 329px;
	background-image: url(../img/oneday/morning/leftpine.png);

	top: 270px;
}

#morning .rightPine {
	position: absolute;

	width: 294px;
	height: 609px;
	background-image: url(../img/oneday/morning/rightpine.png);

	right: 0;
	bottom: 0;
}

animation

#morning .sun {
	animation: moveSun linear 10s 1500ms infinite;
}

@keyframes moveSun {
	from {
		margin-left: -131px;
	}
	to {
		margin-left: 110%;
	}
}

같이 움직이면 어색 1500ms의 delay 준다

mobile

#morning {
	height: 720px;
	background-image: url(../img/mobile/oneday/morning/mobile_morning_bg.png);
}

#morning .sun {
	width: 33px;
	height: 32px;
	background-image: url(../img/mobile/oneday/morning/mobile_sun.png);
}

#morning .leftPine {
	width: 48px;
	height: 32px;
	background-image: url(../img/mobile/oneday/morning/mobile_leftpine.png);
}

#morning .rightPine {
	width: 77px;
	height: 149px;
	background-image: url(../img/mobile/oneday/morning/mobile_rightpine.png);

	top: 220px;
}

html

	<div id="kitchen">

		<div class="leftPan"></div>
		<div class="rightPot"></div>

		<div class="steamWrap">
			<div class="steam"></div>
			<div class="bubble1"></div>
		</div>
	</div>

	<img class="kitchenBubble" src="img/kitchen/kitchenbubble.png" alt="숙성을 시킨 반죽을 잘 익혀주면">

style

#kitchen {
	position: relative;

	width: 100%;
	height: 800px;
	background-image: url(../img/kitchen/kitchen_bg.png);
}

#kitchen .leftPan {
	float: left;

	width: 253px;
	height: 384px;
	background-image: url(../img/kitchen/pan.png);
}

#kitchen .rightPot {
	float: right;

	width: 243px;
	height: 132px;
	background-image: url(../img/kitchen/pot.png);
}

#kitchen .steamWrap {
	position: relative;

	width: 483px;
	height: 457px;
	/*background-color: yellow;*/

	left: 50%;
	margin-left: -275px;
	top: -100px;

	clear: both;
}

#kitchen .steamWrap .steam {
	position: absolute;

	width: 479px;
	height: 457px;
	background-image: url(../img/kitchen/steam.png);

	z-index: 100;
}

#kitchen .steamWrap .bubble1 {
	position: absolute;

	width: 55px;
	height: 56px;
	background-image: url(../img/kitchen/bubble.png);

	margin-top: 230px;
}

잘 안 되었던 부분
버블이 표시가 되지 않았다. 강사님 화면에서도 처음에 표시가 되지 않아서 같은 문제일 줄 알고 잘 따라가야겠다고 생각했는데 다른 문제였다.

해결 방법
검사에 들어가서 console 누르고 문제점 보면서 element 눌러서 무엇을 수정해야할지 찾아보았다. bubble1 태그라서 image 파일도 bubble1을 불러왔는데 file not found가 뜬 걸 보고 file명을 확인 후 수정해주었다. (요즘 오타로 인한 오류가 많이 나서 문제가 되는 부분을 찾고 고치는 데 조금 요령이 생긴 것 같다.)

style

#kitchen .kitchenBubble {
	position: absolute;

	top: 400px;
	right: 0;
}

bubble 포물선 움직임

https://jeremyckahn.github.io/stylie/

Keyframes x축 easyOutSine
코드를 복사해서

animation

#kitchen .steamWrap .bubble1 {
  animation-name: bubble;
  animation-duration: 1000ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin: 0 0;
}
@keyframes bubble {
  0% {transform:translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  100% {transform:translate(-93px, -153px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
}

mobile

#kitchen {
	height: 400px;
	background-image: url(../img/mobile/kitchen/mobile_kitchen_bg.png);
}

#kitchen .leftPan {
	width: 52px;
	height: 78px;
	background-image: url(../img/mobile/kitchen/mobile_pan.png);
}

#kitchen .rightPot {
	width: 73px;
	height: 38px;
	background-image: url(../img/mobile/kitchen/mobile_pot.png);
}

#kitchen .steamWrap {
	width: 300px;
	height: 300px;
	margin-left: -150px;
	background-color: yellow;

	top: 0;
}

#kitchen .steamWrap .steam {
	width: 222px;
	height: 184px;
	background-image: url(../img/mobile/kitchen/mobile_steam.png);

	left: 50%;
	top: 100px;
	margin:  0 0 0 -140px;
}

뒤에 포물선으로 움직이던 버블 없애줘야 한다.

#kitchen .steamWrap .bubble1 {
	display: none;
}

#kitchen .kitchenBubble {
	width: 143px;
	left: 50%;

	margin: -320px 0 0 -70px;
}

html

	<div id="color1">
		<div class="penguin"></div>
		<img class="color1Bubble" src="img/color/color1/color1bubble.png" alt="말랑말랑 키즈가오 완성">
	</div>

style

#color1 {
	width: 100%;
	height: 750px;
	background-image: url(../img/color/color1/color1_bg.png);
}

#color1 .penguin {
	position: relative;

	width: 356px;
	height: 244px;
	background-image: url(../img/color/color1/penguin.png);

	top: 100px;
	left: 100px;
}

#color1 .color1Bubble {
	float: right;

	margin: 100px 200px 0 0;
}

mobile

#color1 {
	height: 500px;
	background-image: url(../img/mobile/color/color1/mobile_color1_bg.png);
}

#color1 .penguin {
	display: none;
}

#color1 .color1Bubble {
	float: initial;

	width: 166px;
	height: 56px;

	left: 50%;
	margin: 0 0 0 -83px;
}

color2

html

	<div id="color2">
		<div class="horse"></div>

		<div class="color2wrap">
			<img class="color2Bubble" src="img/color/color2/color2bubble.png" alt="색상을 선택해보세요">

			<div class="btn-wrap">
				<button type="button" class="red"></button>
				<button type="button" class="yellow"></button>
				<button type="button" class="blue"></button>
			</div>

			<p class="color2Comment">
				아이가 원하는 색상을 직접 만들며 색감을 스스로 발달시킵니다.<br>
				색이 잘 섞이므로 누구나 쉽게 다양한 색을 만들 수 있습니다.
			</p>
		</div>
	</div>

style

#color2 {
	position: relative;
	width: 100%;
	height: 800px;
	background-image: url(../img/color/color2/color2_bg.png);
}

#color2 .horse {
	float: right;
	width: 188px;
	height: 241px;
	background-image: url(../img/color/color2/horse.png);

	margin: 100px 100px 0 0;
}

#color2 .color2wrap {
	clear: both;
	position: relative;

	width: 500px;
	/*background-color: yellow;*/

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

#color2 .color2wrap color2Bubble {
	margin-bottom: 30px;
}

#color2 .color2wrap .btn-wrap .red,
#color2 .color2wrap .btn-wrap .yellow,
#color2 .color2wrap .btn-wrap .blue {
	width: 59px;
	height: 82px;
}

#color2 .color2wrap .btn-wrap .red {
	background-image: url(../img/color/color2/btn/btn_red.png);
}

#color2 .color2wrap .btn-wrap .yellow {
	background-image: url(../img/color/color2/btn/btn_yellow.png);
}

#color2 .color2wrap .btn-wrap .blue {
	background-image: url(../img/color/color2/btn/btn_blue.png);
}

#color2 .color2wrap .btn-wrap {
	margin-bottom: 20px;
}

#color2 .color2wrap .color2Comment {
	color: #8e7577;
}

mobile

#color2 {
	height: 400px;
	background-image: url(../img/mobile/color/color2/mobile_color2_bg.png);
}

#color2 .horse {
	display: none;
}

#color2 .color2wrap {
	width: 320px;
	height: 200px;

	top: 0;
	left: 50%;
	margin-left: -160px;

	text-align: center;
}

#color2 .color2wrap .color2Bubble {
	width: 128px;
}

#color2 .color2wrap .btn-wrap {
	width: 300px;
	height: 60px;
	margin-bottom: 0;
}

#color2 .color2wrap .btn-wrap .red,
#color2 .color2wrap .btn-wrap .yellow,
#color2 .color2wrap .btn-wrap .blue {
	width: 40px;
	height: 56px;
}

#color2 .color2wrap .btn-wrap .red {
	background-image: url(../img/mobile/color/color2/btn/mobile_btn_red.png);
}

#color2 .color2wrap .btn-wrap .yellow {
	background-image: url(../img/mobile/color/color2/btn/mobile_btn_yellow.png);
}

#color2 .color2wrap .btn-wrap .blue {
	background-image: url(../img/mobile/color/color2/btn/mobile_btn_blue.png);
}

물감 사이 공백 주기

#color2 .color2wrap .btn-wrap .yellow {
	background-image: url(../img/mobile/color/color2/btn/mobile_btn_yellow.png);
	margin-left: 20px;
	margin-right: 20px;
}

#color2 .color2wrap .color2Comment {
	color: #827577;
	line-height: 15px;
	font-size: 10px;
}

html

	<div id="color3">
		<div class="flag"></div>
		<div class="book"></div>
		<img class="logo" src="img/color/color3/logo.pnt" alt="키즈가오 회사 로고">
		<div class="dice"></div>
	</div>

style

#color 3 {
	position: relative;

	width: 100%;
	height: 800px;
	background-image: url(..img/color/color3/color_bg.png);
}

#color3 .flag {
	position: relative;

	width: 1774px;
	height: 178px;
	background-image: url(../img/color/color3/flag.png);

	left: 50%;
	margin-left: -887px;
}

#color3 .book {
	float: right;
	
	width: 417px;
	height: 178px;
	background-image: url(../img/color/color3/book.png);
}

#color3 .logo {
	position: absolute;

	left: 50%;
	margin-left: -378.5px;
}

#color3 .dice {
	position: absolute;
	width: 239px;
	height: 200px;
	background-image: url(../img/color/color3/dice.png);

	left: 0;
	bottom: 0;
}

mobile

#color3 {
	height: 430px;
	background-image: url(../img/mobile/color/color3/mobile_color3_bg.png);
}

#color3 .flag {
	width: 320px;
	height: 46px;
	background-image: url(../img/mobile/color/color3/mobile_flag.png);

	margin-left: -160px;
}



#color3 .book {
	width: 107px;
	height: 46px;
	background-image: url(../img/mobile/color/color3/mobile_book.png);

	margin-right: 20px;
}

#color3 .logo {
	width: 225px;

	margin-top: 100px;
	margin-left: -112.5px;
}

#color3 .dice {
	width: 62px;
	height: 52px;
	background-image: url(../img/mobile/color/color3/mobile_dice.png);
}

id와 class 이름을 지을 때 일관성 가지는 것 중요!

<div class="color1Wrap"></div>
<div class="color2Wrap"></div>
<div class="color3Container"></div>

<div class="color3Container"></div>

<div class="btnWrap"></div>

<div class="color1-wrap"></div>
<div class="color2-wrap"></div>

학습 소감
키즈가오 실습이 끝이 났다. 하나씩 따라하면서도 놓치게 되는 부분이 많았고 오탈자와 같은 사소한 실수로 헤매기도 했지만 그래도 백지부터 시작해서 하나를 완성했다는 뿌듯함이 있다. 혼자서도 원하는 디자인으로 만들 수 있도록 연습이 많이 필요할 것이라 생각한다. 이번 주말에는 키즈가오를 하면서 막혔던 부분 정리해놓은 것을 다시 보고 여전히 헷갈리는 위치 설정해주는 부분을 더 공부할 계획이다. 화이팅!