Dev log - 14, 키즈가오 카피캣 실습 #3

박강산·2021년 7월 15일
0

대구AI스쿨 - 개발일지

목록 보기
14/44
post-thumbnail

학습한 내용

키즈가오 실습 기본 세팅

HTML 문서

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="description" content="우리쌀 점토로 만든 키즈가오 웹사이트 소개">
	<meta name="keywords" content="키즈가오, 점토, 장난감">
	<meta name="author" content="키즈가오">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>키즈가오</title>

	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/animation.css">
	<link rel="stylesheet" type="text/css" href="css/mobile.css">
</head>

CSS 문서

/* Default CSS */
html, body {
	margin: 0;
	padding: 0;
}

body {
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p {
	margin: 0;
	padding: 0;
}

button {
	border: none;
	background-color: transparent;
}

.clearfix {
	clear: both;
}

키즈가오 실습 2편 - night2

  • right, bottom 값을 0으로 설정하면, 해당 레이아웃 오른쪽 아래 배치
  • initial 속성은, 초기 혹은 기본 값을 의미

HTML 문서

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

CSS 문서 1 (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;
}

CSS 문서 2 (animation.css)

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

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

CSS 문서 3 (mobile.css)

@media (max-width: 767px) {
	/*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편 - morning

  • 이미지를 같은 속도로 움직이지 않게 하려면, delay 속성을 추가하면 됨 (앞 숫자가 duration, 뒷 숫자가 delay)

HTML 문서

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

CSS 문서 1 (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;
}

CSS 문서 2 (animation.css)

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

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

CSS 문서 3 (mobile.css)

@media (max-width: 767px) {
	/* 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;
	}
}

키즈가오 실습 2편 - kitchen

  • float 속성 사용 시, clear: both 속성을 사용해 같은 선상 배치되지 않게 설정 가능
  • 포물선과 같은 복잡한 애니메이션은 'stylie' 사이트 등을 이용

HTML 문서

<body>
	<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>
</body>

CSS 문서 1 (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;
}

CSS 문서 2 (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(-99px, -198px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
}

CSS 문서 3 (mobile.css)

@media (max-width: 767px) {
	/*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;
		/*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;
	}
}

키즈가오 실습 2편 - color1

  • 자식이 무슨 position 을 사용할 지 정해지지 않았다면, 부모는 relative 속성을 가지는 것이 안정적임

HTML 문서

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

CSS 문서 1 (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;
}

CSS 문서 2 (mobile.css)

@media (max-width: 767px) {
	/*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;
	}
}

키즈가오 실습 2편 - color2

  • button 태그는 inline 의 성격이기 때문에, x축 정렬이 기본

HTML 문서

<body>
	<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>
</body>

CSS 문서 1 (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;
}

CSS 문서 2 (mobile.css)

@media (max-width: 767px) {
	/*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;
	}
}

키즈가오 실습 2편 - color3

HTML 문서 

<body>
	<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>
</body>

CSS 문서 1 (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;
}

CSS 문서 2 (mobile.css)

@media (max-width: 767px) {
	/*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-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 를 지을 때는 일관성있게 하는 것이 좋음 (숫자의 위치나, 대문자와 소문자의 겸용 등)

  • 예를 들어, Wrap 과 Container 의 겸용이나, wrap과 Wrap 등의 겸용, color1-wrap과 colorwrap1 등의 겸용을 규칙성 있게 만들어야 가독성이 좋아짐

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

  • initial 속성에 대한 정확한 의미 파악 필요
  • clear: both 의 사용 방법에 대한 복습 필요

해결방법

  • 인터넷 검색을 통해, initial 속성은 기존에 설정되었던 속성을 초기화하고 기본값으로 설정한다는 의미임을 파악함, 그러나 IE에서는 사용 불가한 속성이기 때문에 사용에 조심해야한다는 것도 알게 되었음.

  • clear: both 가 사용한 후 부터 적용이 되는지, 사용한 속성에 바로 적용이 되는지 복습이 필요하였음. 그리고 학습 결과, 사용한 그 속성에 바로 적용이 되어 float 속성에 영향을 받지 않음을 복습을 통해 알게되었음.

학습 소감

  • 오늘은 몇 일동안 실습을 통해 진행하였던 kidsgao의 마지막 날이었음. 그런데 학습을 통해 여러 태그, 문법, 속성들을 타이핑 하다보니까, 상황에 맞게 쓰는 것들이 달라지긴 하지만, 확실히 비슷한 부분에서는 반복적인 작업임을 알게 되었음.

    많이 쓰는 것들을 잘 기억하고 몸에 익숙하게 만든다면, 내가 작업을 할 때 더욱 수월하게 할 수 있겠다는 생각이 들었음. 또한, 멘토님이 알려주신 일관성 있는 규칙성을 잘 기억하고, 가독성이 좋게 class 명을 지어보도록 노력하겠음.

profile
박강산
안녕하세요. 맡은 업무를 확실하게 수행하는 웹 개발자가 되기 위하여 끊임없이 학습에 정진하겠습니다.
이전 포스트

Dev log - 13, 키즈가오 카피캣 실습 #2

다음 포스트

Dev log - 15, 덴마크 쇼핑몰 카피캣 실습 #1

0개의 댓글