7월 15일 Velog

류영서·2021년 7월 15일
대구AI스쿨
0

학습한 내용

Kids Gao 실습 3

http://sisikiller.dothome.co.kr/

10. Night - 2

달(moon)
말풍선(night2Bubble)
나무(rightMoonTree)

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


@keyframes moveMoon {
	from { margin-left: -135px; }
	to { margin-left: 110%; }
}
  • moon의 포지션이 static 상태이기 때문에 left를 사용할 수 없다.
  • margin-left: -135px; : 최초 시작점(브라우저 왼쪽 끝)에서 moon의 width값만큼 왼쪽으로 더 밀쳐짐
  • margin-left: 110%; : 브라우저 오른쪽 끝에서 화면의 10%만큼 오른쪽으로 더 밀쳐짐

[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;
	}
  • img(night2Bubble) 태그는 width 값을 지정하면 height 값이 자동으로 결정된다.
  • bottom: initial; : 미디어쿼리 바깥의 bottom: 0; 을 적용하지 않는다.

11. Morning

해(sun)
왼쪽 나무(leftPine)
오른쪽 나무(rightPine)

[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;
}
  • top: 270px; : y축 방향으로 270px 만큼 아래로

[animation.css]

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


@keyframes moveSun {
	from { margin-left: -131px; }
	to { margin-left: 110%; }
}
  • animation : 먼저 나오는 숫자 = duration, 뒤에 나오는 숫자 = delay

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

12. Kitchen

왼쪽 주방용품(leftPan)
중간(steamWrap) : 기계(steam), 버블(bubble1)
오른쪽 냄비(rightPot)
말풍선(kitchenBubble)

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

	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;
	/*bubble1보다 위에 오기 위해서*/
}

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

  • 앞에 나오는 형제 태그에 순수 3차원 성질(float)이 부여되면 y축 정렬되어있던 형제 태그가 x축으로 같은 레이어에 위치하게 된다.

  • clear: both; : 앞의 형제 태그의 float 속성 때문에 같은 선상에 겹쳐지는 현상을 끄고 싶을 때 사용, 다음 선상에 위치

[animation.css]

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

[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;
        	 /*left: 50%; 상속 받아 중앙 정렬*/

		 top: 0;
	}

	#kitchen .steamWrap .steam {
		width: 222px;
		height: 184px;
		background-image: url(../img/mobile/kitchen/mobile_steam.png);

		left: 50%;
		margin: 100px 0 0 -140px;
	}

	#kitchen .steamWrap .bubble1 {
		display: none;
	}

	#kitchen .kitchenBubble {
		width: 143px;

		left: 50%;
		margin: -320px 0 0 -70px;

	}
  • 말풍선(kitchenBubble) 위치 변경, bubble1 사라짐

13. Color - 1

펭귄(penguin)
오른쪽 텍스트 이미지(color1Bubble)

[html]

	<div id="color1">
		<div class="penguin"></div>
		<img class="color1Bubble" 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 .color1Bubble {
	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 .color1Bubble {
		float: initial;
		position: relative;

		width: 166px;
		height: 56px;

		left: 50%;
		margin: 100px 0 0 -83px;
	}
  • float: initial; : float 기능 해제

14. Color - 2

목마(horse)
버튼 영역(color2Wrap) : 말풍선(color2Bubble), 버튼(btn-wrap), 설명(color2Comment)

[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;  /*앞 형제 태그의 float 해제*/
	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;
 }
  • #color2 .color2Wrap 에 height 지정하지 않는 이유
    : 자식 태그의 position 값이 모두 static이고 부모가 relative일 때 자식 태그의 높이 값에 영향을 받음
  • button : inline-block 성격, 기본 x축 정렬

[mobile.css]

	#color2 {
		height: 400px;
		background-image: url(../img/mobile/color/color2/mobile_color2_bg.png);
	}

	#color2 .horse {
		display: none;
	}

	#color2 .color2Wrap {
		width: 320px;

		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;
 	}
  • 말 이미지 제거, 백그라운드 이미지로 대체

15. Color - 3

상단 띠(flag)
오른쪽 선반(book)
가운데 로고(logo)
왼쪽 주사위(dice)

[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;
 		/*left: 50%; 상속 받아 중앙 정렬*/
 	}

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

주의점

id와 class를 일관성 있게 설정하는 것이 좋다.
예)
id = color1 -> class = color1Container
id = color2 -> class = color2Container
id = color3 -> class = color3Container

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

실습 도중에 div 태그와 img 태그가 형제 태그일 때 선행하는 div 태그의 position에 따라 img 태그의 위치가 바뀌는 것을 보고는 개념을 다시 익히고자 했다.

해결 방법 작성

[html]

	<div class="a"></div>
	<div class="d"></div>
	<img class="c" src="https://via.placeholder.com/150">

[css]

.a {
	width: 200px;
	height: 150px;
	background-color: pink;
}

.d {
	/*position : relative;*/
	/*position: absolute;*/

	width: 200px;
	height: 150px;
	background-color: blue;
}

.c {
	margin: 100px 0 0 200px;
}

  • position 지정하지 않음

  • position : relative;
    : margin 적용하지 않았을 때 / margin 적용했을 때

  • position : absolute;
    : margin 적용하지 않았을 때 / margin 적용했을 때

  • 결론
    : float, fixed, absolute 와 같이 순수 3차원일 때만 레이어 겹침이 일어난다.
    레이어 겹침이 일어난 위치를 기준으로 margin 값을 받아 좌표 이동을 한다.

학습 소감

키즈가오 사이트를 끝까지 만들어봐서 뿌듯했다. 주의점을 생각하면서 처음부터 스스로 다시 만들어봐야겠다.

profile
류영서
이전 포스트

7월 14일 Velog

다음 포스트

7월 16일 Velog

0개의 댓글

관련 채용 정보