21.07.14

Today I Learn

<div id="forest1">
        <div class="leftTree"></div>
        <div class="treeWrap">
            <div class="rabbit1"></div>
            <div class="rabbit2"></div>
            <div class="rightTree"></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>




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



    <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

#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 left right botteom은 자기가 주도해서 움직인다는 걸 기억하기! 
    */
    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 {
    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;
    /* 버섯이지미때문에 machineLeft이미지보다 높이가 20px 더 큼 */
    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;
}



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



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

/* 
3개의 서랍장 넓이의 합이 scienceWrap 넓이를 벗어나면 안된다. 
벗어나면 줄바꿈 현상이 일어남
*/
#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;
}




#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

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





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



#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

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



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





    #science {
        height: 580px;
        background-image: url(../img/mobile/science/mobile_science_bg.png);
    }
    
    
    #science .scienceWrap {
        overflow: hidden;
        width: 360px;
        /* 
        만약 자식 요소가 있으면 자식 요소의 높이값으로 맞추겠다 
        하지만 현재 자식요소들이 float 속성을 사용하고 있기때문에
        부모의 높이값에 영향을 줄 수 없다.
        그래서 overflow: hidden; 을 적용함
        그러면 자식요소의 높이값이 부모에게 영향을 줄 수 있다.
        */
        height: auto;
    
        top: 180px;

        /* PC 버전에서 margin: 0 auto;를 적용중이라 뺌 */
        /* margin-left: -180px; */
    }

    /* 
    PC 버전의 CSS 때문에 왼쪽으로 전부 쏠려있지만
    개발자도구에서 정상적으로 적용된 것을 확인함 
    */
    #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;
    }



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

Review