개발일지 8일차

1. 학습 내용

• 키즈가오 실습최종(night2~color3 구간)

  index.html

<div id="night2">
		<div class="moon"></div>
		<img class="night2Bubble" src="img/oneday/night2/night2bubble.png" alt="하루동안 숙성을 시키게 됩니다.">
		<div class="rightMoonTree"></div>
	</div>
	<!-- morning -->
	<div id="morning">
		<div class="sun"></div>
		<div class="leftPine"></div>
		<div class="rightPine"></div>
	</div>
	<!-- kitchen -->
	<div id="kitchen">
		<div class="leftPan"></div>
		<div class="rightPot"></div>
		<div class="steamWrap">
			<div class="steam"></div>
			<div class="bubble1"></div>
		</div>
		<img class="kitchenBubble" src="img/kitchen/kitchenbubble.png" alt="숙성을 시킨 반죽을 잘 익혀주면">
	</div>
	<!-- color1 -->
	<div id="color1">
		<div class="penguin"></div>
		<img class="color1Bubble" src="img/color/color1/color1bubble.png" alt="말랑말랑 키즈가오 완성">
	</div>
	<!-- color2 -->
	<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>
	<!-- color3 -->
	<div id="color3">	
		<div class="flag"></div>
		<div class="book"></div>
		<img class="logo" src="img/color/color3/logo.png" alt="키즈가오 회사 로고">
		<div class="dice"></div>
	</div>

style.css

/* night2 */
#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;
}
/* morning */
#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: 689px;
	background-image: url(../img/oneday/morning/rightpine.png);
	right: 0;
	bottom: 0;
}
/*kitchen*/
#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);
}
/*형제관계에 발생하는 position에 따라서 레이어가 겹치는지 안겹치는지 그 현상을 이해하는 것이 중요*/
#kitchen .steamWrap {
	position: relative;
	width: 483px;
	height: 457px;
	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;
}
#kitchen .kitchenBubble {
	position: absolute;
	top: 400px;
	right: 0;
}
#color1 {
	position: relative;
	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,right,bottom,left)*/
	top: 100px;
	left: 100px;
}
#color1 .color1Bubble {
	float: right;
	margin: 100px 200px 0 0;
}
/* color2 */
#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;
}
/*float: right 끝나는 지점인 이 부분에서 clear:both를 통해 꺼준다 */
/* position:relative는 자식의 높이값이 부모의 높이값의 영향을 주기때문에  
height값이 적용되지않아도 자식값의 height값이 적용된다.*/
#color2 .color2wrap {
	clear: both;
	position: relative;
	width: 500px;
	top: 100px;
	margin-left: 50px;
	clear: both;
}
#color2 .color2wrap .color2Bubble {
	margin-bottom: 30px;
}
#color2 .color2wrap .btn-wrap {
	margin-bottom: 20px;
}
#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 .color2Comment {
	color: #8e7577;
}
#color3 {
	position: relative;
	width: 100%;
	height: 800px;
	background-image: url(../img/color/color3/color3_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;
}

animation.css

#night2 .moon {
	animation: moveMoon 10s linear infinite;
}
/* style.css에서 .moon에서 position이 static 상태이기 때문에 left 속성을 사용할 수 없다. */
@keyframes moveMoon {
	from { margin-left: -135px; }
	to { margin-left: 110%; }
}
/* morning */
#morning .sun {
	animation: moveSun 10s linear infinite 1500ms;
}
@keyframes moveSun {
	from { margin-left: -131px; }
	to { margin-left: 110%; }
}
#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(-78px, -135px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
}

mobile.css

#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/night2/mobile_moontree.png);
		top: 70px;
		bottom: initial;
	}
	/* morning */
	#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: 81px;
		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;
	}
	/* kitchen */
	#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;
		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;
	}
	/* color */
	#color1 {
		height: 500px;
		background-image: url(../img/mobile/color/color1/mobile_color1_bg.png);
	}
	#color1 .penguin {
		display: none;
	}
	#color1 .color1Bubble {
		position: relative;
		float: initial;
		width: 166px;
		height: 56px;
		left: 50%;
		margin: 100px 0 0 -83px;
	}
	#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-last: 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);
		margin-left: 20px;
		margin-right: 20px;
	}
	#color2 .color2wrap .btn-wrap .blue {
		background-image: url(../img/mobile/color/color2/btn/mobile_btn_blue.png);
	}
	#color2 .color2wrap .color2Comment {
		color: #8e7577;
		line-height: 15px;
		font-size: 10px;
	}
	#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);
	}

• 결과
  PC버전
  night2
  morning
  
  kitchen
  
  color1
  
  color2
  
  color3
  
  모바일버전
  night2~morning
  
  kitchen~color1
  
  color2~3
  

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

id나 class명을 규칙적으로 정해야하는데 그러지 못해 코드 작성에 불편함을 느꼈다. 또 position에 대한 이해가 아직 어려웠다. 그리고 float가 끝나는 지점에서 clear:both;를 통해 float기능을 꺼줘야하는 점도 잊지말아야겠다.

해결방법 작성

position에 대한 이해 및 반복학습 필요, 요소 나열시 필요한 float, 레이아웃 정렬 및 정리, 자리배치에 필요한 (top,right,bottom,left),(margin-top,margin-right,margin-bottom,margin-left) 사용 숙지가 필요

포물선 애니메이션 같은 경우 복잡하기 때문에 stylie 사이트를 이용하여 해결

학습 소감

id나 class명을 본인이 정한 방식의 규칙대로 정해야 가독성면에서도 좋고, 코드를 정리하기 쉽다. 다음 학습에서는 이러한 점을 명심하고 코드를 짜야겠다.