開発ログ7日目


1.学習内容

  • 児童高実習(林区)
  • <div id="forest1">
    	<div class="leftTree"></div>
    
    	<div class="treeWrap">
    		<div class="rightTree"></div>
    		<div class="rabbit1"></div>
    		<div class="rabbit2"></div>
    	</div>
    </div>
    <div id="forest2">
    	<div class="frog"></div>
    	<div class="machineWrap2">
    		<div class="machineBottom"></div>
    		<div class="machineLeft"></div>
    		<div class="machineRight"></div>
    	</div>
    
    	<img class="forestBubble" src="img/forest/forest2/forestbubble.png" alt="기계를 통해 쌀을 고운 가루로 만든답니다.">
    	<div class="forest2Tree"></div>
    </div>    
    <div id="forest3">
    	<div class="forest3Wrap">
    		<div class="forest3Tree"></div>
    		<div class="smallBird"></div>
    		<div class="bigBird"></div>
    	</div>
    </div>
    style.css
    /*forest1*/
    #forest1 {
    	width: 100%;
    	height: 1050px;
    	background-image: url(../img/forest/forest1/forest1_bg.png);
    }
    #forest1 .leftTree {
    	position: absolute;
    	width: 445px;
    	height: 1200px;
    	background-image: url(../img/forest/forest1/lefttree.png);
    	left: 0;
    }
    #forest1 .treeWrap {
    	float: right;
    	position: relative;
    	width: 304px;
    	height: 572px;
    	/*background-color: yellow;*/
    	top: 100px;
    }
    #forest1 .treeWrap .rightTree {
    	position: absolute;
    	width: 304px;
    	height: 572px;
    	background-image: url(../img/forest/forest1/righttree.png);
    	z-index: 10;
    }
    #forest1 .treeWrap .rabbit1 {
    	position: absolute;
    	width: 82px;
    	height: 103px;
    	background-image: url(../img/forest/forest1/rabbit1.png);
    	margin: 435px 0 0 107px;
    }
    #forest1 .treeWrap .rabbit2 {
    	position: absolute;
    	width: 56px;
    	height: 75px;
    	background-image: url(../img/forest/forest1/rabbit2.png);
    	margin: 435px 0 0 200px;
    }
    /*forest2*/
    #forest2 {
    	width: 100%;
    	height: 750px;
    	background-image: url(../img/forest/forest2/forest2_bg.png);
    }
    #forest2 .frog {
    	position: absolute;
    	width: 153px;
    	height: 257px;
    	background-image: url(../img/forest/forest2/frog.png);
    	margin: 50px 0 0 100px;
    }
    #forest2 .machineWrap2 {
    	position: relative;
    	width: 400px;
    	height: 400px;
    	/*background-color: yellow;*/
    	left: 50%;
    	margin-left: -200px;
    	top: 180px;
    }
    #forest2 .machineWrap2 .machineBottom {
    	position: absolute;
    	width: 374px;
    	height: 162px;
    	background-image: url(../img/forest/forest2/machinebottom.png);
    	margin-top: 220px;
    	z-index: 200px;
        }
    #forest2 .machineWrap2 .machineLeft {
    	position: absolute;
    	width: 123px;
    	height: 228px;
    	background-image: url(../img/forest/forest2/machineleft.png);
    	margin-top: 30px;	
    	z-index: 200;
    }
    #forest2 .machineWrap2 .machineRight {
    	position: absolute;
    	width: 123px;
    	height: 248px;
    	background-image: url(../img/forest/forest2/machineright.png);
    	margin: 10px 0 0 260px;
    	z-index: 200;
    }
    #forest2 .forestBubble {
    	position: relative;
    	float: right;
    	top: -100px;
    	margin-right: 100px;
    }
    #forest2 .forest2Tree {
    	float: left;
    	position: relative;
    	width: 304px;
    	height: 282px;
    	background-image: url(../img/forest/forest2/forest2tree.png);
    	top: 50px;
    }
    /*forest3*/
    #forest3 {
    	width: 100%;
    	height: 600px;
    	background-image: url(../img/forest/forest3/forest3_bg.png);
    }
    #forest3 .forest3Wrap {
    	float: right;
    	position: relative;
    	width: 354px;
    	height: 440px;
    	/*background-color: yellow;*/
    	top: 100px;
    }
    #forest3 .forest3Wrap .forest3Tree {
    	position: absolute;
    	width: 354px;
    	height: 440px;
    	background-image: url(../img/forest/forest3/forest3tree.png);
        }
    #forest3 .forest3Wrap .smallBird {
    	position: absolute;
    	width: 40px;
    	height: 35px;
    	background-image: url(../img/forest/forest3/bird_sm.png);
    	top: 120px;
    	left: 125px;
    }
    #forest3 .forest3Wrap .bigBird {
    	position: absolute;
    	width: 83px;
    	height: 80px;
    	background-image: url(../img/forest/forest3/bird_big.png);
    	margin: 280px 0 0 94px;
    }
    animation.css
    /*forest1*/
    #forest1 .treeWrap .rabbit1 {
    	animation: spinRabbitOne 1000ms linear infinite alternate;
    }
    @keyframes spinRabbitOne {
    	from { transform: rotate(0deg); }
    	to { transform: rotate(10deg); }
    }
    #forest1 .treeWrap .rabbit2 {
    	animation: spinRabbitTwo 1000ms linear infinite alternate;
    }
    @keyframes spinRabbitTwo {
    	from { transform: rotate(10deg); }
    	to { transform: rotate(0deg); }
    }
    /*forest2*/
    #forest2 .machineWrap2 .machineLeft {
    	animation: moveLeft 1s linear infinite alternate;
    }
    @keyframes moveLeft {
    	from { left: 30px; }
    	to { left: 0; }
    }
    #forest2 .machineWrap2 .machineRight {
    	animation: moveRight 1s linear infinite alternate;
    }
    @keyframes moveRight {
    	from { left: -30px; }
    	to { left: 0; }
    }
    #forest3 .forest3Wrap .smallBird {
    	animation: spinSmallBird 1000ms linear infinite alternate;
    }
    @keyframes spinSmallBird {
    	from { transform: rotate(0deg); }
    	to{ transform: rotate(10deg); }
    }
    #forest3 .forest3Wrap .bigBird {
    	animation: spinBigBird 1000ms linear infinite alternate;
    }
    @keyframes spinBigBird {
    	from { transform: rotate(-10deg); }
    	to{ transform: rotate(10deg); }
    }
    mobile.css
    /*forest1*/
    	#forest1 {
    		position: relative;	
    		height: 400px;
    		background-image: url(../img/mobile/forest/forest1/mobile_forest1_bg.png);
    	}
    	#forest1 .leftTree {
    		width: 79px;
    		height: 187px;
    		background-image: url(../img/mobile/forest/forest1/mobile_lefttree.png);
    	}
    	#forest1 .treeWrap {
    		width: 68px;
    		height: 129px;
    		/*style.css에서 position: relative를 용했기때문에 top 사용이 가능하다*/
    		top: 200px;
    	}
    	#forest1 .treeWrap .rabbit1,
    	#forest1 .treeWrap .rabbit2 {
    		display: none;
    	}
    	#forest1 .treeWrap .rightTree {
    		width: 68px;
    		height: 129px;
    		background-image: url(../img/mobile/forest/forest1/mobile_righttree.png);
    	}
    	#forest2 {
    		position: relative;
    		height: 400px;
    		background-image: url(../img/mobile/forest/forest2/mobile_forest2_bg.png);
    	}
    	#forest2 .frog {
    		width: 34px;
    		height: 57px;
    		background-image: url(../img/mobile/forest/forest2/mobile_frog.png);
    		margin: 0 0 0 20px;
    	}
    	#forest2 .machineWrap2 {
    		width: 200px;
    		height: 110px;
    		top: 70px;
    		margin-left: -97px;
    	}
    	#forest2 .machineWrap2 .machineBottom {
    		width: 141px;
    		height: 60px;
    		background-image: url(../img/mobile/forest/forest2/mobile_machinebottom.png);
    		left: 50%;
    		margin: 50px 0 0 -70.5px;
    	}
    	#forest2 .machineWrap2 .machineLeft {
    		width: 46px;
    		height: 85px;
    		background-image: url(../img/mobile/forest/forest2/mobile_machineleft.png);		
    		margin: 0 0 0 20px;
    	}
    	#forest2 .machineWrap2 .machineRight {
    		width: 46px;
    		height: 93px;
    		background-image: url(../img/mobile/forest/forest2/mobile_machineright.png);	
    		margin: -10px 0 0 130px;
    	}
    	#forest2 .forestBubble {
    		position: absolute;
    		width: 161px;
    		top: 290px;
    		left: 50%;
    		margin-left: -83px;
    	}
    	#forest2 .forest2Tree {
    		float: right;
    		width: 69px;
    		height: 76px;
    		background-image: url(../img/mobile/forest/forest2/mobile_forest2tree.png);
    		top: 130px;
    		margin-right: 20px;
    	}
    	#forest3 {
    		height: 630px;
    		background-image: url(../img/mobile/forest/forest3/mobile_forest3_bg.png);
    	}
    	#forest3 .forest3Wrap {
    		width: 99px;
    		height: 127px;
    		top: 300px;
    	}
    	#forest3 .forest3Wrap .forest3Tree {
    		width: 99px;
    		height: 127px;
    		background-image: url(../img/mobile/forest/forest3/mobile_forest3tree.png);
    	}
    	#forest3 .forest3Wrap .smallBird,
    	#forest3 .forest3Wrap .bigBird {
    		display: none;
    	}
  • 結果
    PCバージョン
    forest1

    forest2

    forest3

    バージョンの移動
    forest

  • 児童高(科学区間)
    <div id="science">
    	<div class="scienceWrap">
    
    		<div class="scienceLeftWrap">
    			<div class="gly"></div>
    			<img src="img/science/leftTitle.png" alt="자초,어성초,감초">
    		
    			<p>
    				자초 어성초 감초를 넣어서<br>
    				피부진정 및 항염 효과가 있답니다.
    			</p>
    		</div>
    
    		<div class="scienceCenterWrap">
    			<div class="purpleSteam"></div>
    			<div class="funnelBack"></div>
    			<div class="funnelFront"></div>
    		</div>
    
    		<div class="scienceRightWrap">
    			<div class="water"></div>
    			<img src="img/science/rightTitle.png" alt="글리세린,올리브유">
    		
    			<p>
    				빵의 표면을 촉촉하게 해주는<br>
    				글리세린과 오메가-9지방산이<br>
    				풍부한 올리브유를 넣어서<br>
    				보습 효과도 뛰어나답니다.
    			</p>
    		</div>
    
    	</div>
    </div>
  • style.css
    #science {
    	position: relative;
    	width: 100%;
    	height: 800px;
    	background-image: url(../img/science/science_bg.png);
    }
    #science .scienceWrap{
    	position: relative;
    	width: 1068px;
    	height: 655px;
    	margin: 0 auto;
    }
    #science .scienceWrap .scienceLeftWrap {
    	float: left;
    	width: 288px;
    	height: 100%;
    }
    #science .scienceWrap .scienceLeftWrap .gly {
    	width: 230px;
    	height: 192px;
    	background-image: url(../img/science/gly.png);
    	margin: 0 0 130px 55px;
    }
    /*img와 p태그 사이의 공백을 내기위한 방법 : p태그에 padding-top
    또는 img태그에 margin-bottom */
    #science .scienceWrap .scienceLeftWrap p,
    #science .scienceWrap .scienceRightWrap p {
    	color: #8e7577;
    	font-size: 18px;
    	line-height: 26px;
    	padding-top: 10px;
    }
    #science .scienceWrap .scienceCenterWrap {
    	position: relative;
    	float: left;
    	width: 488px;
    	height: 100%;
    }
    #science .scienceWrap .scienceCenterWrap .purpleSteam {
    	position: relative;
    	width: 241px;
    	height: 216px;
    	background-image: url(../img/science/grape.png);
    	left: 50%;
    	margin-left: -120px;
    }
    #science .scienceWrap .scienceCenterWrap .funnelBack {
    	position: absolute;
    	width: 488px;
    	height: 438px;
    	background-image: url(../img/science/funnelback.png);
    }
    #science .scienceWrap .scienceCenterWrap .funnelFront {
    	position: relative;
    	width: 485px;
    	height: 390px;
    	background-image: url(../img/science/funnelfront.png);
    	margin-top: 48px;
    }
    #science .scienceWrap .scienceRightWrap {
    	float: right;
    	width: 292px;
    	height: 100%;
    }
    #science .scienceWrap .scienceRightWrap .water {
    	width: 204px;
    	height: 191px;
    	background-image: url(../img/science/water.png);
    	margin-bottom: 130px;
    }
    animation.css
    #science .scienceWrap .gly {
    	animation: spinGly 1500ms linear infinite alternate;
    }
    @keyframes spinGly {
    	from { transform: rotate(0deg); }
    	to { transform: rotate(50deg); }
    }
    #science .scienceWrap .water {
    	animation: spinWater 1500ms linear infinite alternate;
    }
    @keyframes spinWater {
    	from { transform: rotate(0deg); }
    	to { transform: rotate(-50deg); }
    }
    mobile.css
    #science {
    		height: 580px;
    		background-image: url(../img/mobile/science/mobile_science_bg.png);
    	}
    	#science .scienceWrap {
    		overflow: hidden;
    		width: 360px;
    		height: auto;
    		top: 180px;
    	}
    	#science .scienceWrap .scienceLeftWrap {
    		width: 100px;
    	}
    	#science .scienceWrap .scienceLeftWrap .gly {
    		width: 76px;
    		height: 63px;
    		background-image: url(../img/mobile/science/mobile_gly.png);
    		margin: 0 0 10px 0;
    	}
    	#science .scienceWrap .scienceLeftWrap img,
    	#science .scienceWrap .scienceRightWrap img {
    		height: 15px;
    	}
    	#science .scienceWrap .scienceLeftWrap p,
    	#science .scienceWrap .scienceRightWrap p {
    		display: none;
    	}
    	#science .scienceWrap .scienceCenterWrap {
    		width: 160px;
    		height: 220px;
    	}
    	#science .scienceWrap .scienceCenterWrap .purpleSteam {
    		width: 80px;
    		height: 72px;
    		background-image: url(../img/mobile/science/mobile_grape.png);
    		margin-left: -40px;
    	}
    	#science .scienceWrap .scienceCenterWrap .funnelBack {
    		width: 173px;
    		height: 151px;
    		background-image: url(../img/mobile/science/mobile_hopperback.png);
    	}
    	#science .scienceWrap .scienceCenterWrap .funnelFront {
    		width: 160px;
    		height: 122px;
    		background-image: url(../img/mobile/science/mobile_hopperfront.png);
    		left: 50%;
    		margin: 20px 0 0 -80px;
    	}
    	#science .scienceWrap .scienceRightWrap {
    		width: 100px;
    	}
    	#science .scienceWrap .scienceRightWrap .water {
    		width: 67px;
    		height: 63px;
    		background-image: url(../img/mobile/science/mobile_water.png);
    		margin-bottom: 10px;
    		margin-left: 32px;
    	}
  • 結果
    PCバージョン

    バージョンの移動
  • 児童高実習(夜間1段)
    index.html
  • <div id="night1">
    	<div class="owl"></div>		
    	<div class="starWrap">
    		<div class="star1"></div>
    		<div class="star2"></div>
    		<div class="star3"></div>
    	</div>
    </div>
    style.css
    #night1 {
    	width: 100%;
    	height: 700px;
    	background-image: url(../img/oneday/night1/night1_bg.png);
    }
    #night1 .owl {
    	position: absolute;
    	width: 334px;
    	height: 571px;
    	background-image: url(../img/oneday/night1/owl.png);
    	margin-top: 50px;
    }
    #night1 .starWrap {
    	position: relative;
    	width: 750px;
    	height: 400px;
    	/*background-color: pink;*/
    	top: 150px;
    	margin-left: 600px;
    } 
    #night1 .starWrap .star1,
    #night1 .starWrap .star2,
    #night1 .starWrap .star3 {
    	position: absolute;
    	width: 53px;
    	height: 50px;
    	background-image: url(../img/oneday/night1/star1.png);
    }
    #night1 .starWrap .star1 {
    	margin-top: 350px;
    }
    #night1 .starWrap .star2 {
    	margin-left: 650px;
    }
    #night1 .starWrap .star3 {
    	margin: 250px 0 0 500px;
    }
    animation.css
    #night1 .starWrap .star1,
    #night1 .starWrap .star2,
    #night1 .starWrap .star3 {
    	animation: pulseStar 1s linear infinite alternate;
    }
    @keyframes pulseStar {
    	from { transform: scale(1); }
    	to { transform: scale(0.8); }
    }
    mobile.css
    #night1 {
    		position: relative;
    		height: 500px;
    		background-image: url(../img/mobile/oneday/night1/mobile_night1_bg.png);
    	}
    	#night1 .owl {
    		width: 88px;
    		height: 151px;
    		background-image: url(../img/mobile/oneday/night1/mobile_owl.png);
    		margin-top: 0;
    	}
    	#night1 .starWrap {
    		position: absolute;
    		width: 300px;
    		height: 157px;
    		background-image: url(../img/mobile/oneday/night1/mobile_star.png);
    		top: 300px;
    		margin-left: 50px;
    	}
    	#night1 .starWrap .star1,
    	#night1 .starWrap .star2,
    	#night1 .starWrap .star3 {
    		display: none;
    	}
  • 結果
    PCバージョン

    バージョンの移動
  • 2.学習内容の難点または未解決の問題


    位置によって2次元と3次元に分けられますが、レイアウトの構成が異なり、要素の位置を正確に配置するのは難しいです.

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


    位置2、3 D分割による解決

    4.勉強の心得


    位置区分とmarginを復習する必要があるような気がします