개발일지 6일차

이재경·2021년 6월 1일
키즈가오
0

1. 학습내용

  • 키즈가오 실습(intro~farm 구간)

<index.html>

<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">
<header id="intro">		
	<div class="introWrap">
		<div class="logo"></div>	
		<div class="lion"></div>	
		<div class="rabbit"></div>	
		<div class="bear"></div>	
		<div class="monkey"></div>	
	</div>

	<div class="cloudWrap">
		<div class="leftCloud"></div>
		<div class="rightCloud"></div>
		<div class="dragonfly"></div>
	</div>
</header>

<div id="farm1">		
	<div class="leftRice1"></div>
	<div class="farmer"></div>
	<div class="rightRice1"></div>

	<div class="farmSpeechWrap">
		<img src="img/farm/farm1/farmspeech.png" align="우리쌀 점토">
	
		<p class="farmSpeech">			
			식재료만 넣은 안전한<br>
			우리쌀 점토 키즈가오는<br>
			우리 쌀을 사용하여 만들어요.<br>
			화학물질을 사용하지 않고,<br>
			식재료를 사용해서 만든<br>
			안전한 제품이랍니다.<br>
		</p>
	</div>
</div>

<div id="farm2">
	<div class="leftRice2"></div>
	<div class="scarecrow"></div>
	<div class="rightRice2"></div>
</div>

<div id="farm3">
	
	<div class="farm3Window"></div>
	<div class="machineWrap">
		<div class="machine1"></div>
		<div class="sawShadow"></div>
		<div class="saw1"></div>
		<div class="saw2"></div>
		<div class="machineBird"></div>
		<div class="timer"></div>
	</div>

	<img class="farm3Bubble" src="img/farm/farm3/farm3bubble.png">

</div>

style.css

/* Default CSS */
html, body {
	margin: 0;
	padding: 0;
}
/* x축을 벗어나는 모든 요소들은 hidden 처리해야한다. */
/* 예시로 잠자리가 x축을 벗어날 때 x축 스크롤이 생겨버림 */
body {
	overflow-x: hidden;
}
h2, h3, h4 ,h5, h6, p {
	margin: 0;
	padding: 0;
}
/*버튼 태그는 기본적으로 테두리를 가지고 있음*/
/*transparent 투명하게*/
button {
	border: none;
	background-color: transparent;
}
.clearfix {
	clear: both;
}
/* 마진병합현상해결 1. intro에 padding-top을 줘서 intro와 introWrap
사이에 간격은 준다. 이 경우 높이값은 1700px*/
/* 2.  */
/* Intro */
#intro {
	width: 100%;
	height: 1600px;
	background-image: url(../img/intro/intro_bg.png);
	/* padding-top: 100px; */
}
/* left:50%, margin-left:-(width/2)px >> 중앙정렬 */
/* margin: 0 auto >> 중앙정렬*/
/* position:relative 를 사용한 이유 : 1. 중앙정렬을 하기위해서 */
/* 2. 만약 top과 left를 사용해야하는 경우 
그때 좌표 기준점을 부모에게 잡고 싶을 경우 relative가 유리 */
#intro .introWrap {
	position: relative;
	width: 760px;
	height: 516px;
	/*background-color: yellow;*/
	left: 50%;
	margin-left: -380px;
	/* 마진병합현상 발생 */
	/*margin-top: 100px;*/
	top: 100px;
}
#intro .introWrap .logo {
	position: absolute;
	width: 760px; 
	height: 516px;
	background-image: url(../img/intro/logo.png);
	z-index: 100;
}
#intro .introWrap .lion {
	position: absolute;
	width: 161px;
	height: 161px;
	background-image: url(../img/intro/lion.png);	
	margin: 80px 0 0 30px;
}
#intro .introWrap .rabbit {
	position: absolute;
	width: 105px;
	height: 129px;
	background-image: url(../img/intro/rabbit.png);
	margin: 90px 0 0 580px;
}
/* image크기를 넘는 경우 background-image는 공간을 맺구려는 속성이 있다 */
/* 이미지 크기는 딱 맞게! */
#intro .introWrap .bear {
	position: absolute;
	width: 112px;
	height: 105px;
	background-image: url(../img/intro/bear.png);
	margin: 310px 0 0 560px;
	z-index: 200;
}
#intro .introWrap .monkey {
	position: absolute;
	width: 85px;
	height: 93px;
	background-image: url(../img/intro/monkey.png);
	margin: 310px 0 0 50px;
	z-index: 200;
}
#intro .cloudWrap {
	position: relative;
	width: 100%;
	height: 1050px;
	/*background-color: pink;*/
}
/* float를 이용하여 좌우배치할 경우 레이아웃이 틀어지는 현상이 발생 */
/* 이경우 absolute에 left, right: 0으로 좌우배치 가능 */
#intro .cloudWrap .leftCloud {
	position: absolute;
	width: 934px;
	height: 816px;
	background-image: url(../img/intro/cloud1.png);
	left: 0;
	z-index: 2;
}
#intro .cloudWrap .rightCloud {
	position: absolute;
	width: 843px;
	height: 858px;
	background-image: url(../img/intro/cloud2.png);
	right: 0;
}
#intro .cloudWrap .dragonfly {
	position: absolute;
	width: 366px;
	height: 228px;
	background-image: url(../img/intro/dragonfly.png);
	top: 800px;
}
/* Farm1 */
#farm1 {
	position: relative;
	width: 100%;
	height: 800px;
	background-image: url(../img/farm/farm1/farm1_bg.png);
}
#farm1 .leftRice1 {
	position: absolute;
	width: 390px;
	height: 670px;
	background-image: url(../img/farm/farm1/leftrice.png);
	left: 0;
}
#farm1 .rightRice1 {
	position: absolute;
	width: 335px;
	height: 570px;
	background-image: url(../img/farm/farm1/rightrice.png);
	right: 0;
	top: 100px;
}
#farm1 .farmer {
	position: absolute;
	width: 747px;
	height: 1078px;
	background-image: url(../img/farm/farm1/farmer.png);
	left: 50%;
	margin-left: -310px;
}
#farm1 .farmSpeechWrap {
	position: absolute;
	top: 250px;
	left: 150px;
}
#farm1 .farmSpeechWrap .farmSpeech {
	color: #895c2f;
	font-size: 18px;
	line-height: 27px;
}
/* Farm2 */
#farm2 {
	position: relative;
	width: 100%;
	height: 850px;
	background-image: url(../img/farm/farm2/farm2_bg.png);
}
#farm2 .leftRice2 {
	float: left;
	width: 250px;
	height: 850px;
	background-image: url(../img/farm/farm2/leftRice2.png);
}
#farm2 .rightRice2 {
	float: right;
	width: 236px;
	height: 850px;
	background-image: url(../img/farm/farm2/rightRice2.png);
}
#farm2 .scarecrow {
	position: absolute;
	width: 103px;
	height: 206px;
	background-image: url(../img/farm/farm2/scarecrow.png);
	margin: 200px 0 0 300px;
}
/* Farm3 */
#farm3 {
	position: relative;
	width: 100%;
	height: 850px;
	background-image: url(../img/farm/farm3/farm3_bg.png);
}
#farm3 .farm3Window {
	position: absolute;
	width: 247px;
	height: 169px;
	background-image: url(../img/farm/farm3/window.png);
	margin: 100px 0 0 100px;
}
#farm3 .machineWrap {
	position: relative;
	width: 600px;
	height: 455px;
	left: 50%;
	margin-left: -285px;
	top: 150px;
}
#farm3 .machineWrap .machine1 {
	position: absolute;
	width: 586px;
	height: 455px;
	background-image: url(../img/farm/farm3/machine1.png);
	z-index: 900;
}
#farm3 .machineWrap .sawShadow {
	position: absolute;
	width: 95px;
	height: 95px;
	background-image: url(../img/farm/farm3/sawshadow.png);
	margin: 145px 0 0 145px;
}
#farm3 .machineWrap .saw1,
#farm3 .machineWrap .saw2 {
	position: absolute;
	width: 95px;
	height: 95px;
	background-image: url(../img/farm/farm3/saw.png);
}
#farm3 .machineWrap .saw1 {
	margin: 140px 0 0 140px;
}
#farm3 .machineWrap .saw2 {
	margin: 140px 0 0 350px;
}
#farm3 .machineWrap .timer {
	position: absolute;
	width: 103px;
	height: 104px;
	background-image: url(../img/farm/farm3/second.png);
	margin: 125px 0 0 45px;
	z-index: 999;
}
#farm3 .machineWrap .machineBird {
	position: absolute;
	width: 44px;
	height: 49px;
	background-image: url(../img/farm/farm3/machinebird.png);
	margin: 220px 0 0 20px;
	z-index: 999;
}
#farm3 .farm3Bubble {
	position: absolute;
	top: 350px;
	right: 80px;
}

animation.css

/* Intro */
#intro .introWrap .lion {
	animation: spinLion 1500ms linear infinite alternate;
}
@keyframes spinLion {
	from {
		transform: rotate(-10deg);
	}
	to {
		transform: rotate(10deg);
	}
}
#intro .introWrap .rabbit {
	animation: spinRabbit 1000ms linear infinite alternate;
}
@keyframes spinRabbit {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(5deg);
	}
}
#intro .introWrap .bear {
	animation: spinBear 1000ms linear infinite alternate;
}
@keyframes spinBear {
	from {
		transform: rotate(10deg);
	}
	to {
		transform: rotate(-10deg);
	}
}
#intro .introWrap .monkey {
	animation: spinMonkey 800ms linear infinite alternate;
}
@keyframes spinMonkey {
	from {
		transform: rotate(20deg);
	}
	to {
		transform: rotate(50deg);
	}
}
#intro .cloudWrap .dragonfly {
	animation: flyDragonfly linear 7s infinite;
}
@keyframes flyDragonfly {
	from {
		left: -366px;
	}
	to {
		left: 100%;
	}
}
/* Farm */
#farm3 .machineWrap .timer {
	animation: rotateTimer 10000ms linear infinite;
}
@keyframes rotateTimer {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
#farm3 .machineWrap .saw1 {
	animation: rotateLeftSaw 10000ms linear infinite;
}
@keyframes rotateLeftSaw {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
#farm3 .machineWrap .saw2 {
	animation: rotateRightSaw 10000ms linear infinite;
}
@keyframes rotateRightSaw {
	from {
		transform: rotate(360deg);
	}
	to {
		transform: rotate(0deg);
	}
}

mobile.css

@media (max-width: 767px) {
	#intro {
		height: 1150px;
		background-image: url(../img/mobile/intro/mobile_intro_bg.png);
	}
	/* style.css에서 사용한 left:50%을 사용하지않은 이유는 
	미디어쿼리의 바깥쪽 영역의 값을 상속받기 때문이다. */
	#intro .introWrap {
		width: 189px;
		height: 129px;
		margin-left: -94.5px;
		top: 230px;
	}
	#intro .introWrap .logo {
		width: 189px;
		height: 129px;
		background-image: url(../img/mobile/intro/mobile_logo.png);
	}
	#intro .introWrap .lion,
	#intro .introWrap .rabbit,
	#intro .introWrap .bear,
	#intro .introWrap .monkey,
	#intro .cloudWrap .dragonfly {
		display: none;
	}
	#intro .cloudWrap {
		height: 350px;
		top: 280px;
	}
	#intro .cloudWrap .leftCloud {
		width: 267px;
		height: 314px;
		background-image: url(../img/mobile/intro/mobile_cloud1.png);
	}
	#intro .cloudWrap .rightCloud {
		width: 237px;
		height: 309px;
		background-image: url(../img/mobile/intro/mobile_cloud2.png);
	}
	/* Farm1 */
	#farm1 {
		height: 450px;
		background-image: url(../img/mobile/farm/farm1/mobile_farm1_bg.png);
	}
	#farm1 .leftRice1 {
		width: 86px;
		height: 150px;
		background-image: url(../img/mobile/farm/farm1/mobile_leftrice.png);
	}
	#farm1 .rightRice1 {
		width: 95px;
		height: 170px;
		background-image: url(../img/mobile/farm/farm1/mobile_rightrice.png	
		top: -20px;
	}
	#farm1 .farmer {
		width: 160px;
		height: 250px;
		background-image: url(../img/mobile/farm/farm1/mobile_farmer.png);	
		margin-left: -69px;
	}
	#farm1 .farmSpeechWrap {
		width: 300px;
		text-align: center;
		left: 50%;
		margin-left: -150px;
	}
	#farm1 .farmSpeechWrap img {
		width: 79px;
	}
	#farm1 .farmSpeechWrap .farmSpeech {
		line-height: 20px;
		font-size: 12px;
	}
	#farm2 {
		height: 440px;
		background-image: url(../img/mobile/farm/farm2/mobile_farm2_bg.png);
	}
	#farm2 .leftRice2 {
		width: 57px;
		height: 201px;
		background-image: url(../img/mobile/farm/farm2/mobile_leftrice2.png);
	}
	#farm2 .rightRice2 {
		width: 54px;
		height: 202px;
		background-image: url(../img/mobile/farm/farm2/mobile_rightrice2.png);
	}
	#farm2 .scarecrow {
		display: none;
	}
    #farm3 {
		height: 500px;
		background-image: url(../img/mobile/farm/farm3/mobile_farm3_bg.png);
	}
	#farm3 .farm3Window {
		width: 82px;
		height: 56px;
		background-image: url(../img/mobile/farm/farm3/mobile_window.png);
		margin: 10px 0 0 10px;
	}
	#farm3 .machineWrap {
		width: 200px;
		height: 150px;
		top: 120px;
		margin-left: -96px;
	}
	#farm3 .machineWrap .machine1 {
		width: 191px;
		height: 149px;
		background-image: url(../img/mobile/farm/farm3/mobile_machine1.png);
	}
	#farm3 .machineWrap .sawShadow,
	#farm3 .machineWrap .timer,
	#farm3 .machineWrap .machineBird {
		display: none;
	}
	#farm3 .machineWrap .saw1,
	#farm3 .machineWrap .saw2 {
		width: 31px;
		height: 31px;
		background-image: url(../img/mobile/farm/farm3/mobile_saw.png);
	}
	#farm3 .machineWrap .saw1 {
		margin: 50px 0 0 50px;
	}
	#farm3 .machineWrap .saw2 {
		margin: 50px 0 0 115px;
	}
	#farm3 .farm3Bubble {
		position: absolute;
		width: 152px;
		left: 50%;
		margin: 0 0 0 -70px;
	}
}
  • 결과
    PC버전




    모바일버전



    결과에는 보이지 않지만 애니메이션 역시 잘 돌아감 굿굿!

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

학습 도중 에러가 발생하여 #farm1 .farmer에서 background-image가 margin 부모의 레이아웃을 벗어나는 문제가 발생하여 해결하는데 30분이 넘게 걸렸다.
중간중간 img의 url값을 잘못입력하여 에러가 발생하여 코드 수정의 많은 시간이 소요되었다.

3. 해결방법 작성

CSS코드를 확인해보니 #farm1 .farmer에서 margin값이 -310px이 되어 레이아웃의 위치가 심하게 틀어져 있음을 확인하였다. 그래서 margin-left:-310px값을 줘서 위치값을 변경해주었다.
url의 위치를 정확히 숙지 및 파악 후 문제를 해결하였다.

4. 학습 소감

PC, 모바일, 애니메이션 영역을 구분하여 정리하니 확실히 코드 가독성이 높아서 보기 쉬웠고, 멘토님의 이전 설명이 이해가 되었다. 레이아웃의 구조에 대한 이해를 조금하게 되면서 코드에 발생한 에러를 찾는데 도움이 많이 되었다. 그리고 실습으로 애니메이션을 사용하여 약간의 결과물을 보니 뿌듯하였다.

profile
이재경
I'm Closer
이전 포스트

개발일지 5일차

다음 포스트

개발일지 7일차

0개의 댓글

관련 채용 정보