1) 학습한 내용

    <div class="treeWrap">
        <div class="rightTree"></div>
        <div class="rabbit1"></div>
        <div class="rabbit2"></div>
    </div>

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

}

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

#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 .treeWrap .rabbit1,
#forest1 .treeWrap .rabbit2 {
    display: none;
}

#forest1 .treeWrap .rightTree {
    width: 68px;
    height: 129px;
    background-image: url(../img/mobile/forest/forest1/mobile_righttree.png);
}

animation효과 토끼 두마리 고개 좌우로 움직임

• forest(2) 부분

    <img class="forestBubble" src="img/forest/forest2/forestbubble.png" alt="기계를 통해서 쌀을 고운 가루로 만든답니다.">
    <div class="forest2Tree"></div>

#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: 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-left: 100px;

}

#forest2 .forest2Tree { float: left; position: relative;

width: 304px;
height: 282px;
background-image: url(../img/forest/forest2/forest2tree.png);

top: 50px;

}

#forest2 .machineWrap2 .machineLeft { animation: moveLeft 1000ms linear infinite alternate; }

@keyframes moveLeft { from {left: 30px;} to{left: 0px;} }

#forest2 .machineWrap2 .machineRight { animation: moveRight 1000ms linear infinite alternate; }

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

#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;
     /*background-color: yellow;*/

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

img경로에 주의를 하며서 작성

소스코드가 길어짐에 따라 틀린부분을 찾기가 쉽지않으므로 오타에 주의를 하자

br태그 : 줄바꿈

• forest(3) 부분

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

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

}

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

}

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

animation효과로 새가 좌우로 움직인다.

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

#science { position: relative;

width: 100%;
height: 800px;
background-image: url(../img/science/science_bg.png);

}

#science .scienceWrap { position: relative;

width: 1068px;
height: 655px;
/*background-color: yellow;*/

margin: 0 auto;

}

#science .scienceWrap .scienceLeftWrap { float: left; width: 288px; height: 100%; /background-color: blue;/ }

#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%;
/*background-color: pink;*/

}

#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%; /background-color: gray;/ }

#science .scienceWrap .scienceRightWrap .water { width: 204px; height: 191px; background-image: url(../img/science/water.png);

margin-bottom: 130px;

}

#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;
     /*margin-left: -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;
 }

funnelBack보다 funnelFront이미지가 앞에 위치

animation효과로는 양쪽의 비커들이 움직인다.

• night1 부분

    <div class="owl"></div>

    <div class="starWrap">
        <div class="star1"></div>
        <div class="star2"></div>
        <div class="star3"></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;
/*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; }

#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-color: pink;*/
     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;
}

animation효과로는 별의 크기가 달라진다. 2) 학습내용 중 어려웠던 점 매니저분들이 볼때는 아 ㅋ 뭐 누워서 떡먹기네 겠지만 저한테는 진짜 하나부터 열까지 다 어려워서 죽는 줄 알았씁니다 3) 해결 방법 이제와서 든 생각인데 이거는 그냥 재능이 타고나야 가능하지 않나 싶어요 아무리 강의영상 보면서 복습한대도 제 머리로는 인되는데요??? 4) 학습소감 절 들어가고싶네요 정말 이거 들으면서 제 머리털이 다 빠지고 빡빡이가 된 기분을 느꼈구요 뭐이리 어려운건지 제 머리로는 도저히 이해를 못하겠지만 복습하고 또 복습할게요 돈 벌어야죠... 네.....

• 상단 첫화면

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

/* Default CSS */ html, body { margin: 0; padding: 0; }

body { overflow-x: hidden; }

h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }

button { border: none; background-color: transparent; }

.clearfix { clear: both; }

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

#intro .introWrap { position: relative;

width: 720px;
height: 516px;
/*background-color: yellow;*/

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

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;

}

#intro .introWrap .bear { position: absolute;

 width: 122px;
 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;

} 상단 첫화면에 대한 소스코드

스크롤에 따라서 어떤 이벤트가 발생하는 기능을 패럴랙스

overflow-x: hidden 브라우저 x축을 벗어나는 object를 안보이게함

background-color: transparent 배경 컬러 투명하게함

button은 기본값으로 테두리를 가지고 있음

.clearfix { clear: both; } float을 사용시 일어나는 height 버그를 지워주는 속성

z-index 일종의 기준점 100으로 값을 주었을때 100보다 작으면 z축으로 뒤로 100보다 크면 앞으로

z-index사용하지 않은 position: absolute 영역이라면 z-index가 0이라 생각

#intro .introWrap 에서 position: relative을 사용한 이유는 첫번째는 중앙정렬을 하기 위함 두번째는 부모의 position상태에 따라서 3차원적인 특징이 적용된 자식의 top, left, bottom, right 좌표기준점이 달라지는데 부모를 기준점으로 두기에 훨씬

어떤 공간안에 background-image를 사용할때 기본적으로 repeat효과를 가지고 있어 빈공간을 매울려고 하는 속성이라 image작업을 할때에는 image의 크기에 맞춰 공간을 설정하는것이 좋다. 단, 배경에 깔리는 image는 달리 설정함

실무 tip : 만약 디자인 작업을 해야한다면, 이미지 사이즈를 숫자 5나, 짝수 사이즈로 떨어지게 작업하는것이 일반적이다. 그이유는 5, 짝수 이외의 애매한 사이즈로 작업할시에 레이아웃 구조가 정확하게 배치가 되지않기때문

• animation 부분

4가지동물이 움직이고 하단의 잠자리가 갈로질러 지나가는 모습

/* 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: spinBear 1000ms 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%;
}

animation 좌표값은 앞선 position값의 영향을 받음

화면 바깥으로 사라지는 기능은 %로 나타냄

overflow-x: hidden 웹사이트작업시 기본값으로 넣어준다.가로스크롤 방지

• mobile부분

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

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

} mobile부분은 기존에 주었던 동물과 잠자리의 animation효과가 없어지게함

display 노출을 담담하는 역할도 수행

background-repeat: no-repeat 를 잘활용하여 불필요한 이미지 작업을 줄임

• 농부 부분

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

/* 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: relative;

top: 250px;
left: 150px;

}

#farm1 .farmSpeechWrap .farmSpeech { color: #895c2f; font-size: 18px; line-height: 27px; }

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

그라데이션은 가급적 넣지않는것이 좋다.

text-align 글자,inline 요소를 중앙정렬 시킬때 쓰는 속성. 글자,inline 요소에만 영향을 끼침

• 농부 하단 부분

/* 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;

}

/* Farm2 */ #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;
}

} float을 사용한이유는 두이미지가 만나기전에 mobile버전으로 변할꺼기 때문에 사용

• 농작물 기계 부분

    <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" art="기계를 통해서 쌀알이 딱딱한 껍질을 벗어 냅니다.">

/* 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;
/*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;

}

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

/* Farm3 */ #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;
    1) 학습한 내용 

2) 학습내용 중 어려웠던 점 그냥 전체가 다 어려웠ㅇ는데요????????? 3) 해결 방법 아무리 복습을 한다해도 이걸 다 할 수 있을지는 모르겠네요.. 4) 학습소감 분량이 점점 무슨 그 뭐야 어휘력이 부족해서 뭐라 표현을 못허ㅏ겠네요 네.. 분량이 많아져서 머릿속이 터질 거 같아서 진짜 미치;ㄹ거같아요

미디어쿼리 모바일 버전 : 320px768px 미만 태블릿버전 : 768px1024px 미만 PC버전 : 1024px ~

미디어쿼리 주의점

1. PC버전 CSS를 모바일버전에선 다르게 적용 PC버전 CSS코드 즉 미디어쿼리 바깥쪽에서 작성된 CSS코드를 매번 확인하면서 변경해야한다 안 그러면 미디어쿼리 바깥에 있는 백그라운드컬러가 그대로 미디어쿼리 안 쪽에 상속된다. (이것이 번거롭다면 PC, 모바일 CSS파일을 따로 만든다.)

2. 반드시 넣어줘야 하는 메타태그코드 viewport / width-deivce-width, viewport : 웹사이트를 접속하는데 이용되는 기기 화면 width-deivce-width : 웹사이트 위드값을 디바이스의 위드값으로 적용 initial-scale=1.0 : 비율은 항상 1.0 유지

orientation: portrait : 스마트폰 사용시 세로모드 orientation: landscape : 스마트폰 사용시 가로모드 display: none;을 사용해서 원하는 정보를 원하는 기기에 보여줄 수 있다.

미디어쿼리 코드 적용방법 3가지.

1. @media (min-width: 320px) and (max-width: 539px) (실무에서 가장 많이 사용)
2. 모바일 버전용 파일 따로 만들기 (mobile.css) <.!DOCTYPE html> <.html> <.head> <.meta charset="utf-8"> <.link rel="stylesheet" type="text/css" href="css/style.css"> <.link rel="stylesheet" type="text/css" href="css/mobile.css"> <./head> <.body> <./body> <./html>
3. style 태그 사용 <.style media="(min-width: 300px) and (max-width: 700px)"> body { background-color: red; } <,/style> 2) 학습내용 중 어려웠던 점 별게 다 어렵고 어렵네요 집가고싶어요 3) 해결 방법 복습을 해도 모르겠으면 역시 실전 아니겠어요? 4) 학습소감 분량이 적어보인다는 것은 제가 몸이 아파서 잘 못 적었기 때문이죠.

무브박스 <.!DOCTYPE html> <.html> <.head> <.meta charset="utf-8"> <.link rel="stylesheet" type="text/css" href="css/style.css">

<./head> <.body>

<.div class="move-box">