학습 내용

11. Night2 만들기

HTML

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

	<div class="rightMoonTree"></div>
</div>
- 3가지 항목

style.css

#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 .moon {
animation: moveMoon linear 10s infinite;}
- 돌아오지 않도록 얼터너티브는 적용 X

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

to {
	margin-left: 110%;
}}
-static이기 때문에 left는 사용하지 못함

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;}
    - 바닥값이 0이 아닌 초기의 값을 준다.

12. Morning 만들기

HTML

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

style.css

#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.css

#morning .sun {
animation: moveSun linear 10s infinite 1500ms;}
-위의 달과 같이 움직이면 이상하기 때문에 1.5초의 딜레이를 걸어줌


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

to {
	margin-left: 110%;}}
    -위의 달과 같은 명령

mobile.css

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

13. Kitchen 만들기

HTML

	<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 {
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; 
-left와 right 둘 다 float를 사용했기 때문에 레이어가 겹친다. 
그러면 하단의 푸터가 뒤쪽에 배치가 된다. 
그래서 마지막 float의 다음 태그에 clear속성을 주어 float의 기능을 끈다.}

#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 .steamWrap .bubble1 {
animation-name: bubble;
animation-duration: 2000ms;
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%);}
  50% {transform:translate(-71.75px, -62.5px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  100% {transform:translate(-82px, -125px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}}
  
-stylie를 이용하여 원하는 포물선을 만든다.

mobile.css

	#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 1 만들기

HTML

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

style.css

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

#color1 .colorBubble {
float: right;

margin: 100px 200px 0 0;}

mobile.css

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

#color1 .penguin {
	display: none;}

#color1 .colorBubble {
	position: relative;
	float: initial;

	width: 166px;
	height: 56px;

	left: 50%;
	margin-left: -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.css

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

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 {
margin-bottom: 20px;}

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

Mobile.css

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

HTML

	<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

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

mobile.css

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

학습 중 어려웠던 점

어제보다는 이해가 쉬웠고 머리가 잘 돌아 갔다.

해결 방안

이대로 쭉 노력한다.

학습 소감

점점 이해가 가고 혼자 생각할 수 있는 능력이 생겼다. 더 숙달해서 내것으로 만들고 싶다.