Dev Log #14 - 7월 15일

Juhui_0304·2021년 7월 15일
CSShtml대구AI스쿨웹프로그래밍
0

Dev Log

목록 보기
14/49

✅ Kids Gao - night2 영역
✅ Kids Gao - morning 영역
✅ Kids Gao - kitchen 영역
✅ Kids Gao - color1 영역
✅ Kids Gao - color2 영역
✅ Kids Gao - color3 영역
✅ Kids Gao 리뷰

오늘 학습한 내용

1. Kids Gao - night2 영역

  • moon자체의 position이 static이기 때문에 잠자리 애니메이션 효과처럼 left를 사용할 수 없다. 따라서 moon을 움직이기 위해서 keyframes from에 margin-left를 적용해서 효과를 나타낸다.

  • night2Bubble은 이미지태그이므로 width값을 조정하면 height값이 자동 조절된다.

  • mobile.css의 #night2 .rightMoonTree {bottom: initial;}은 style.css의 #night2 .rightMoonTree {bottom: 0;}을 초기화 시키겠다는 뜻이다.

👉 html

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

	}

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

2. Kids Gao - morning 영역

👉 html

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

👉 style.css

/* 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: 609px;
	background-image: url(../img/oneday/morning/rightpine.png);

	right: 0;
	bottom: 0;
}

👉 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. Kids Gao - 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 */

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

#kitchen .kitchenBubble {
	position: absolute;

	top: 400px;
	right: 0;
}

👉 animation.css

/* kitchen */

#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(-116px, -170px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
}

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

4. Kids Gao - color1 영역

  • float:initial;

👉 html

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

👉 style.css

/* color1 */

#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 .color1Bubble {
	float: right;

	margin: 100px 200px 0 0;

}

👉 mobile.css

/* color1 */

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

5. Kids Gao - color2 영역

  • button 태그는 inline-block요소의 성격을 갖고 있기 때문에
    버튼을 연속적으로 기입했을 때 x축으로 정렬한다.

👉 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 */

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

👉 mobile.css

/* color2 */

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

6. Kids Gao - color3 영역

👉 html

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

👉 style.css

/* color3 */

#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 */

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

7. Kids Gao 리뷰

  • id와 class명은 일관성 있게 작성하는 것이 좋다.
  • 일관된 규칙성을 갖고 작업해야한다.(유지보수가 용이하기 때문)
  • 소문자, 대문자가 맞춰주어야한다.
  • 다시 처음부터 규칙성에 맞추어서 작성해볼 것.

👉 지금까지 결과물(pc)

👉 지금까지 결과물(mobile 미디어쿼리 적용)

오늘의 학습 후기(어려웠던 점, 개선할 점)

오늘로 Kids Gao 홈페이지 실습 마무리가 되었다. 정말 짧은 시간이었지만 많은 것들을 직접 해볼 수 있는 시간이었다. html, css 이론만으로 접했던 것을 직접 실습을 해보면서 홈페이지 사이트가 어떤 규칙과 흐름으로 만들어 지는 지 체험 해볼 수 있었다. 계속 반복되는 레이아웃으로 오늘 어려웠던 점은 딱히 없었다. 오늘 수업 중에서 가장 인상 깊었던 점은 마지막에 강사님께서 3개월 독학으로 처음 외주 작업을 한 사이트 라고 소개하면서 규칙성을 강조하셨다. 사실, 실습을 하면서 class명과 id명이 너무 헷갈려서 코드를 치기가 매우 까다로웠다. 근데 이러한 사연이 있었다고 하니까, 나도 처음 웹디자인 일을 할 때 이미지를 따로 cut해서 개발자에게 넘겨주어야 했는데, 이 때 이미지 name을 어떻게 지을 지 고민했던 순간이 떠올랐다. 이러한 과정은 '디자이너, 개발자에게도 모두 공통사항이구나'라는 것을 느꼈다. 내일 수업은 어떤 수업이 시작 될 지 기대된다🤓

profile
Juhui_0304
하루하루 성장하는 것을 목표로 합니다🌟
이전 포스트

Dev Log #13 - 7월 14일

다음 포스트

Dev Log #15 - 7월 16일

0개의 댓글