210715 개발일지

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

대구 AI 스쿨

목록 보기
14/51
post-thumbnail

📌 학습한 내용

KidsGao 실습3

'Night2' PC.ver

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

	<div class="nightMoonTree"></div>
</div>
/* 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 .nightMoonTree {
	position: absolute;

	width: 243px;
	height: 588px;
	background-image: url(../img/oneday/night2/moontree.png);

	right: 0;
	bottom: 0;
}

'Night2' Animation

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

@keyframes moveMoon {
	from { 
	margin-left: -135px; 
	}  /* 화면 밖에서 부터 나타나야 하므로 달의 width값 만큼 왼쪽으로 땡김 */
	to {
		margin-left: 110%;  
        /* 화면의 크기보다 10% 더 이동하게끔 */
	}
}
  • #night2 .moon의 포지션 상태는 static -> left 속성을 사용할 수 x

'Night2' Mobile.ver

@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;  
        /* img태그를 사용했기 때문에 width 값을 조정하면 height값은 자동으로 조정된다 */

		left: 50%;  
        /* pc버전에서 position:  absolute;를 사용해서 사용 가능 */
		margin: 200px 0 0 -67px;
	}


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

		top: 70px;
		bottom: initial;  
	}
}
  • : initial;
    : 초기상태, 미디어 쿼리 바깥에서 작성한 코드를 모바일 버전에서는 적용하지 않을 때

'Morning' PC.ver

<div id="morning">
	<div class="sun"></div>
	<div class="leftPine"></div>
	<div class="rightPine"></div>
</div>
/*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;   /* 오른쪽 하단에 배치* /
}
  • 상세한 배치작업 이전에 큰 공간부터 position: relative;로 감싸둔다. (일종의 안전장치)

'Morning' Animation

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

@keyframes moveSun {
	from { 
		margin-left: -131px; 
	}  /* 화면 밖에서 부터 나타나야 하므로 달의 width값 만큼 왼쪽으로 땡김 */
	to {
		margin-left: 110%;  /* 화면의 크기보다 10% 더 이동하게끔 */
	}
}

'Morning' Mobile.ver

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

'Kitchen' PC.ver

<div id="kitchen">
	<div class="leftPan"></div>
	<div class="rightPot"></div>

	<div class="staemWrap">
		<div class="steam"></div>
		<div class="bubble1"></div>
	</div>

	<img class="kitchenBubble" src="img/kitchen/kitchenbubble.png" alt="숙성을 시킨 반죽을 잘 익혀주면">
	</div>
/* 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: 459px;
	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;  /* 만들어둔 공간(kitchen)을 기준으로 */
}
  • 먼저 나오는 형제가 3차원이면 그 다음에 나오는 형제도 3차원의 속성을 갖게 된다.

'Kitchen' Animation

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

'Kitchen' Mobile.ver

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

'Color1' PC.ver

<div id="color1">
	<div class="penguin"></div>
	<img class="color1Bubble" src="img/color/color1/color1bubble.png" alt="말랑말랑 키즈가오 완성!">	
</div>
/* 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 ;
}

'Color1' Mobile.ver

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

'Color2' PC.ver

<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>
  • <button>의 type 속성에서
    • type="submit"
      : 해당 버튼이 서버에 데이터를 보내는 역할
    • type="button"
      : 단순히 클릭을 하는 역할
/* 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 {
	position: relative;

	width: 500px;
	/*background-color: yellow;*/

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

'Color2' Mobile.ver

/* 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;
	}
}
  • <button>은 inline-block 요소의 성격을 가지고 있기때문에 x축 정렬이 된다.

'Color3' PC.ver

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

'Color3' Mobile.ver

/* 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;   
		/* pc버전에서는 본래 이미지가 가진 크기로 자동으로 값 설정, 모바일 버전에서는 width값을 설정하면 자동으로 height값이 비율에 맞게 변경됨 */ 
	
		margin-top: 100px;
		margin-left: -112.5px;
	}

	#color3 .dice {
		width: 62px;
		height: 52px;
		background-image: url(../img/mobile/color/color3/mobile_dice.png);
	}
}

📌 학습내용 중 어려웠던 점

  1. 모바일 버전에서 'Color2' 영역이 'Color3'영역 뒤로 겹쳐지는 현상 발생

📌 해결방법

처음에는 당황해서 최대한 비슷한 모양을 만들기 위해 'logo'의 마진값을 크게도 줘보고했지만 레이아웃이 더 틀어질 뿐이었다. 그래서 'Color2'부터 코드를 새로 작성했지만 여전히 해결되지 않았다. 그리고 크롬 검사 기능을 사용했을 때, color3. flag 영역이 상하좌우 모두에 margin: -160px;이 적용되어 있는 것을 발견했다.

📌 학습소감

오류난 부분의 강의를 세 번이나 돌려봤는데 margin부분이 잘못 작성되었다는 것을 눈치채지 못했단 사실이 부끄러웠다. 하지만 오류가 나타나면 바로 강사님께 해결방법을 요구했던 몇 주전과 다르게, 크롬의 검사 기능을 이용해 스스로 하나하나의 요소를 확인하고 오류가 생긴 원인을 나름대로 분석해본 시간은 나의 개발 공부 과정에 분명 큰 성장의 기점이 되었다고 생각한다.😆

profile
JANE Jeong
늘 새로운 배움을 추구하는 개린이 🌱
이전 포스트

210714 개발일지

다음 포스트

210716 개발일지

0개의 댓글