7월 13일 화

gunho-sung.log·2021년 7월 13일
0

학습한 내용
키즈가오 사이트 farm3 까지 실습진행 하였다.

<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>
			안전 제품이랍니다. 
		</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" alt="기계를 통해서 쌀알이 딱딱한 껍질을 벗어 냅니다.">

</div>

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

/intro/

#intro {
width: 100%;
height: 1600px;
background-image: url(../img/intro/intro_bg.png);
}

#intro .introWrap {
position: relative; /중앙정렬을 하기위해서(left 3차원에 사용가능한데 렐레티브는 2, 3차 동시 성격 가짐 )/

width: 760px;
height: 516px;
/*background-color: yellow;*/

left:  50%;
margin-left: -380px;

/*margin: 0 auto;*/

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;

/*z-index: 0; 기본이 0이다*/

}

#intro .introWrap .rabbit {
position: absolute;

width: 105px;
height: 129px;
background-image: url(../img/intro/rabbit.png);

margin: 90px 0 0 580px;

}

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

z-index: 200;

}

#intro .cloudWrap {
position: relative;

width: 100%;
height: 1050px;
/*background-color: pink;*/

}

#intro .cloudWrap .leftCloud {
position: absolute;

width: 934px;
height: 816px;
background-image: url(../img/intro/cloud1.png);

left: 0;

}

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

}

/Fram1/

#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: relative;

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;
/*background-color: yellow;*/

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;

}

------------------------./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: spinLion 1000ms linear infinite alternate;
}

@keyframes spinBear {
from {
transform: rotate(10deg);

}

to {
	transform: rotate(-10deg);
}

}

#intro .introWrap .monkey {
animation: spinMonkey 1000ms 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%;
}

}

/Farm3/

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

-------------------------------------------.@media (max-width: 767px) {

#intro {
	height: 1150px;
	background-image: url(../img/mobile/intro/mobile_intro_bg.png);
}

#intro .introWrap {
	width: 189px;
	height: 129px;

	margin-left: -94.5px;
	/*background-color: yellow;*/

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


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


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

}


학습한 내용 중 어려웠던 점 또는 해결못한 것들 + 해결 방법
그대로 따라 한 것 같은데 이미지가 표시가 되지 않거나 작동하지 않는 애니메이션이 몇개 있었다.

1-1. 농부와 엑박 이미지

처음에는 위 이미지에 농부가 나오지 않았다. 그래서 열심히 조사를 한 끝에 url주소에 ..img로 입력해 /가 빠져 ../img로 바꾸어 해결하였다.

1-2.엑박 이미지도 역시 오탈자...
img src="img/fram/farm1/farmspeech.png" align="우리쌀 점토"

  1. 농부 이미지가 모바일 버전으로 변경이 되지 않음.
    모바일.css 코드를 작성 할 때 @media {} 괄호 안에 작성해야 했는데
    괄호를 닫고 계속 작업을 해서 적용이 되지 않았다.
  1. farm3의 기계의 톱니바퀴들이 돌아가지 않는다.

style.css 코드를 전체 복사 붙여넣기하니 작동된다. 문제는 style 코드에 있다.
하...
#fram3 .machineWrap .timer {
position: absolute;

width: 103px;
height: 104px;
background-image: url(../img/farm/farm3/second.png);

margin: 125px 0 0 45px;

z-index: 999;

}

fram3... farm3... 역시나 오타

Q. 오류 원인을 찾기 위해서 f12 개발자 모드로 보는 중인데 애니메이션.css는 어떻게 확인하 지?

A. f12를 확대하니 보인다.

학습 소감
오늘은 실습량이 많아서 조금 타이트한 하루였다. 무엇보다도 따라하면서 안되는 것들이 있었는데
놀랍게도 모두 오탈자였다. 실제 업무에서도 오탈자 찾는 것에 많은 시간이 낭비가 된다고 하는데
공부할 때도 이렇게 되는거보니 각오해야 할 것 같다. 서브라임텍스트 자체에 맞춤법 검사해주는 기능은 있지만 클래스명 같은 경우에는 사용자가 직접 정하기 때문에 문법적이나 표준어에 틀린 단어도 많아서 좋은 기능은 아니다. 사람이 본래 글을 읽을 때 한글자 한글자 열심히 읽지 않는다고 한다. 그 원리가 오탈자 찾는 것에 큰 방해물이 되는 것 같다.

profile
gunho-sung.log
프로그래밍 초보 입문
이전 포스트

7월 12일 월

다음 포스트

7월 14일 수

0개의 댓글

관련 채용 정보