210714 개발일지

1) 학습한 내용

*forest3*

-index.html

<div id="forest3">
	<div class="forest3Wrap">
		<div class="forest3Tree"></div>
		<div class="smallBird"></div>
		<div class="bigBird"></div>	
	</div>		
</div>

- style.css

#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

#forest3 .forest3Wrap .smallBird 
	{animation: spinSmallBrid 1000ms linear infinite alternate;}

@keyframes spinSmallBrid 
	{from {transform: rotate(0deg);}

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

#forest3 .forest3Wrap .bigBird 
	{animation: spinbigBrid 1000ms linear infinite alternate;}

@keyframes spinbigBrid 
	{from {transform: rotate(-10deg);}

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

- mobile.css

 	#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,
 	#forest2 .forest3Wrap .bigBird {display: none;}

* science *
- index.html

<div class="scienceRightWrap">

	<div class="water"></div>
	<img src="img/science/rightTitle.png" alt="글리세린,올리브유">
    <p>
	빵의 표면을 촉촉하게 해주는<br>
	글리세린과 오메가-9 지방산이<br>
	풍부한 올리브유를 넣어서<br>
	보습 효과도 뛰어나답니다.
	</p>		
</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;}

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

#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: 222px;}

	#science .scienceWrap .scienceCenterWrap .purpleSteam 
    	{width: 80px;
	height: 71px;
	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/science/mobile_water.png);

	margin-bottom: 10px;
	margin-left: 32px;}

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

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

#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: 308px;
	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;}

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

분량이 많아서 조금 따라가기 힘들지만 어렵지는 않다.

3)해결방법 작성

강의를 잘 따라 가는것

4)학습 소감

이제 절반했다는게 놀랍다.. ㅎ
영상은 2시간분량이지만 돌려보고 적고 하다보면 두배는 더 드는거같다. 그래도 해놓은거 보면 뿌듯하다.