Day 13 - 키즈가오 실습 2

SUN·2021년 7월 14일
0

1. 학습 내용

6. Forest 1 만들기

HTML

<div id="forest1">
  <div class="leftTree"></div>

    <div class="treeWrap">
      <div class="rightTree"></div>
      <div class="rabbit1"></div>
   <div class="rabbit2"></div>
 </div>
</div>
-오른쪽 영역 나무와 움직이는 토끼들을 묶어준다.

style.css

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

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

animation.css

#forest1 .treeWrap .rabbit1 {
animation: spinRabbitOne 1000ms linear infinite alternate;}

@keyframes spinRabbitOne {
from {transform: rotate(0deg);}
to {transform: rotate(15deg);}}

#forest1 .treeWrap .rabbit2 {
animation: spinRabbitTwo 1000ms linear infinite alternate;}

@keyframes spinRabbitTwo {
from {transform: rotate(10deg);}
to {transform: rotate(0deg);}}

- 1초동안 무한 왕복해라 10도를  고개 까딱까딱

mobile.css

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

	top: 200px;}

#forest1 .rabbit1,
#forest1 .rabbit2 {
	display: none;}

#forest1 .treeWrap .rightTree {
	width: 68px;
	height: 129px;
	background-image: url(../img/mobile/forest/forest1/mobile_righttree.png);}
    
    - 배경과 왼쪽 오른쪽 나무를 모바일 크기의 이미지로 다시 입력하고 
    오른쪽 나무에 토끼들이 포함되어 있으므로 토끼들을 없애준다.

7. forest2 만들기

HTML

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

style.css

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

	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: 200;}

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

animation.css

#forest2 .machineWrap2 .machineLeft {
animation: moveLeft 1s linear infinite alternate;}
- 1초동안 무한으로 왕복

@keyframes moveLeft {
from {left: 30px}
to {left: 0}}
왼쪽 30px부터 0까지 움직이기

#forest2 .machineWrap2 .machineRight {
animation: moveRight 1s linear infinite alternate;}

@keyframes moveRight {
from {left: -30px}
to {left: 0}}

mobile.css

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

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

8. Forest3 만들기

HTML

  <div id="forest3">
      <div class="forest3Tree"></div>
      <div class="smallBird"></div>
      <div class="bigBird"></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: 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

#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 .smallBird {
	display: none;}

9. science

HTML

        <div class="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>

- science > scienceWrap > leftWrap, centerWrap, RightWrap
각 Wrap 앞에 요소들이 존재
img는 정보가 들어가야하기 때문에 img로 사진을 나타낸다.

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 {
color: #8e7577;
font-size: 18px;
line-height: 26px;

padding-top: 10px;}
- 글자의 크기와 색상 , 글자 간격을 설정하고 패딩탑으로 위 사진과 간격 조절

#science .scienceWrap .scienceCenterWrap {
position: relative;

float: left;
width: 488px;
height: 100%;}

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

#science .scienceWrap .scienceRightWrap p {
color: #8e7577;
font-size: 18px;
line-height: 26px;

padding-top: 10px;}

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

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

- 1.5초 동안 무한 왕복/ 50도 정도 기울이기/ 같은 모양, 같은 속도

mobile.css

	#science {
	height: 580px;
	background-image: 	url(../img/mobile/science/mobile_science_bg.png);}

#scinece .scienceWrap {
	overflow: hidden; 
   -float을 사용한 자식이 부모의 값의 영향을 주지 못하지만 
   이것을 사용하면 값의 영향을 줄 수 있다.
	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/mobile/science/mobile_water.png);

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

10. night1 만들기

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;

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);}}
- 원래 사이즈에서 80% 줄어들었다가 커짐

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: 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. 학습 소감

홈페이지를 만드는데 이렇게 많은 노력과 정성이 들어간다는 것을 깨달았다.

profile
SUN
안녕하세요!
이전 포스트

DAY 12 - 키즈 가오 실습 1편

다음 포스트

Day 14. 키즈가오 실습 3

0개의 댓글

관련 채용 정보