210713 개발일지

juyoungkim·2021년 7월 13일
1) 학습한 내용

@ 키즈가오 실습

* 상단부분 *

-index.html
<div class="introWrap">
<div class="logo"></div>
<div class="lion"></div>
<div class="rabbit"></div>
<div class="bear"></div>
<div class="monkey"></div>
</div>


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

#intro .introWrap {position: relative;

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

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

#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;
	/*top: 80px;*/
	/*left: 30px;*/

	z-index: 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);

	margin: 310px 0 0 50px;

	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;

	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;}
- animation.css
#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%;}}
- mobile.css
@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;}

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


* 농부파트 *

- index.html
<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>
-styel.css
#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;}

* 허수아비 *

- index.html
<div id="farm2">
	<div class="leftRice2"></div>
	<div class="scarecrow"></div>
	<div class="rightRice2"></div>
</div>
- style.css
#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;}
- mobile.css
 	#farm2 
    	{height: 440px;
 		background-image: url(../img/mobile/fram/farm2/mobile_farm2_bg.png);}

 	#farm2 .leftRice2 
    	{width: 57px;
 		height: 201px;
 		background-image: url(../img/mobile/farm/fram2/mobile_leftrice2.png);}

 	#farm2 .rightRice2 
    	{width: 54px;
 		height: 202px;
 		background-image: url(../img/mobile/farm/fram2/mobile_rightrice2.png);}


 	#farm2 .scarecrow {display: none;}

* 기계 *

- index.html
<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>
- style.css
#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;}

- animation.css
#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
	#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-left: 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/mobil_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;}

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

파일들을 왔다갔다하는게 조금 힘겨웠다.
많은것을 해야하니 머리가 좀 복잡했다.

3)해결방법 작성

복습이 중요한거같다. 강의를 조금더 들여다 봐야할거 같다.

4)학습 소감

실제 홈페이지를 실습해봤는데 내손으로 탄생한다는게 신기했다.
내일은 어떤부분을 할지 기대가 된다.

profile
juyoungkim
이전 포스트

210712 개발일지

다음 포스트

210714 개발일지

0개의 댓글