開発ログ6日目


1.学習内容

  • 児童高実習(intro~農場区間)
  • <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.学習内容の難点または未解決の問題


    学習中にエラーが発生しました.farmerでは,背景−画像がエッジ親レイアウトからずれるという問題が発生し,30分以上かかった.
    中間にimgのurl値が誤って入力されたため、エラーが発生し、コードの修正に多くの時間がかかりました.

    3.ソリューションの作成


    CSSコードをチェックしたところ、#farm 1が見つかりました.farmerは、マージン値が-310 pxであることを確認し、レイアウト位置の歪みが深刻であることを確認します.したがってmargin-left:-310 pxの値を与えて位置値を変更した.
    urlの位置を明らかにして、問題を解決しました.

    4.勉強の心得


    パソコン、モバイル、アニメーションを分けて整理すると、確かにコードの可読性が高く、分かりやすく、指導者の前の解釈も理解されました.レイアウトの構造を少し理解すると、コードのエラーを検索するのに役立ちます.そして実习として、アニメを使って结果を见て、とても嬉しかったです.