학습내용

1. night

2) night 2

<!-- night 2 -->

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

animation.css↓

/* night2 */

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

@keyframes moveMoon {
	from {
		margin-left: -135px;    /* moon이 static(2차원)이기 때문에, left를 사용할 수 없다. */
	}
	to {
		margin-left: 110%;
	}
}

mobile.css↓

/* night2 */

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

	margin-top: 0;
}

#night2 .night2Bubble {
	width: 127px;

	left: 50%;
	/* pc버전에서 absolute를 사용했기 때문에 left 사용 가능 */
	margin: 300px 0 0 -67px;
}

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

	top: 70px;
	bottom: initial;   /* bottom값을 적용시키기 않음 */
}

---

2. Morning

<!-- morning -->

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

</div>

style.css↓

/* morning */

#morning {
	position: relative;    /* 자식들의 포지션을 결정하지 못했을 경우, 일단 큰 공간을 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;    /* morning영역의 최하단에 배치 */
}

animation.css↓

/* morning */

#morning .sun {
	animation: moveSun linear 10s 1500ms infinite;   /* 첫번째 나오는 시간은 애니메이션 실행시간, 두번째는 지연시간 */	 
}

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

mobile.css↓

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

---

3. Kitchen

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

style.css↓

/* 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);
}
/* 먼저 나온 형제태그인 leftPan과 rightPot이 float로 3차원 속성을 가진다. 현재 아무것도 지정되지 않은 img가 float들과 같은 선상에 배치되어 있다. */
/* 개발일지 6일차 z-index 참고 */
/* 형제태그일 경우, 앞의 태그가 3차원이면, 레이어 겹침현상이 일어남. 앞 태그가 2차원일 경우, 레이어 겹침현상이 일어나지 않음 */

#kitchen .steamWrap {
	position: relative;

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

	left: 50%;
	margin-left: -275px;
	top: -100px;      /* clear로 float의 기능을 껐기 때문에, 레이어가 겹치지 않아서 오브젝트가 너무 밑으로 내려가버림 */

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

animation.css↓

/* kitchen */

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

• https://jeremyckahn.github.io/stylie/ : 참고사이트 이용

mobile.css↓

/* 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.bg);
}

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

---