학습내용

키즈가오 사이트 실습(2)

HTML

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

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

• 숲 나무 부분

CSS

#forest {
    width: 100%;
    height: 1050px;
    background-image: url(../img/forest/forest1/forest1_bg.png);
}

#forest1 .leftTree {
    position: absolute;

    width: 445px;
    height: 1200px;
    background-color: url(../img/forest/forest1/.leftTree.png);

    left: ;
}

#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(10def); }
    to { transform: rotate(0def);}
}

• 숲 토끼부분과 애니메이션

숲 2

HTML

<div id="forest2"></div>
            <div class="frog"></div>
            <div class="machineWrap2">
                <div class="machineBottom"></div>
                <div class="machineRight"></div>
                <div class="machineLeft"></div>
            </div>

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

CSS

#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(../forest/forest2/.machineBottom.png);

    margin-top: 220px;
    
    z-index: 200;
}

#forest2 .machineWrap2 .machineLeft {
    position: absolute;

    width: 123px;
    height: 228px;
    background-image: url(../forest/forest2/.machineleft.png);

    margin-top: 30px;
    
    z-index: 200;
}

#forest2 .machineWrap2 .machineRight {
    position: absolute;

    width: 123px;
    height: 248px;
    background-image: url(../forest/forest2/.machineRight.png);

    margin: 10px 0 0 260px;
    
    z-index: 200;
}

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

• 숲의 말풍선과 기계위치장치와 애니메이션

forest 3

HTML

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

css

/* Forest3 */

#forest3 {
    width: 100%;
    height: 600px;
    background-image: url(../forest/forest3/forest3_bg.png);
}

#forest2 .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(../forest/forest3/forest3tree.png);
}

#forest3 .forest3Wrap .smallBird {
    position: absolute;
    
    width: 40px;
    height: 35px;
    background-image: url(../forest/forest3/bird_sm.png);

    top: 120px;
    left: 125px;
}

#forest3 .forest3Wrap .bigBird {
    position: absolute;
    
    width: 83px;
    height: 80px;
    background-image: url(../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);
    }
}

science

HTML

        <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="puruleSteam"></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>   

css

#science {
    position: relative;

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

#science .scienceWrap {
    position: relative;
    
    width: 1068px;
    height: 665px;
    /* 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: 192;
    background-image: url(../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 .scienceCentertWrap {
    position: relative;
    float: left;
    width: 488px;
    height: 100%;
    /* background-color: pink; */
}

#science .scienceWrap .scienceCenterWrap .purpleSteam {
    position: relative;
    
    width: 241px;
    height: 216;
    background-image: url(../science/grape.png);

    left: 50%
    margin-left: -120px;
}

#science .scienceWrap .scienceCenterWrap .funnelBack {
    position: absolute;
    
    width: 488px;
    height: 438;
    background-image: url(../science/funnelback.png);
}

#science .scienceWrap .scienceCenterWrap .funnelFront {
    position: relative;
    
    width: 485px;
    height: 390;
    background-image: url(../science/funnelfront.png);

    margin-top: 48px;
}

#science .scienceWrap .scienceRightWrap {
    float: right;
    width: 292px;
    height: 100%;
    /* background-color: gray; */
}

#science .scienceWrap .scienceRightWrap .water {
    width: 204px;
    height: 191;
    background-image: url(../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);}
}

night

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>

css

#night1 .starWrap {
    position: relative;

    width: 750px;
    height: 400px;
    /* background-color: pink;*/

    top: 150px;
    margin-left: 600px;
}

#ngiht1 .starWrap .star1,
#ngiht1 .starWrap .star2,
#ngiht1 .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;
}

#ngiht1 .starWrap .star1,
#ngiht1 .starWrap .star2,
#ngiht1 .starWrap .star3 {
    animation: pulseStar 1s linear infinite alternate;
}

@keyframes pulseStar {
    from { transform: scale(1); }
    to { transform: scale(0.8); }
}

모바일 페이지를 PC와 코드가 거의 비슷하나 display 나 hidden등의 몇가지 코드 사용, 다른 주소를 사용하여 달라짐

어려운점

• 홀로 해결할 수 있을지 계속 의문이 듦, 학습활용이 너무 많아서 힘듦

• 모바일페이지 전환은 이해했으나 애니메이션의 세밀한 각도와 움직임은 아직 어렵게 느껴짐, 모바일과 PC 코드가 거의 같으나 비슷함

• position 과 일전에 학습했었던 block, float 영역에 대한 이해가 더 필요하다고 느낌

해결방법

• 천천히 해나가더라도 복습하는 것이 필요하다 생각함

학습소감

• 실제 페이지를 만드는 실습을 했지만 여전히 홈페이지 개발과 구성을 어떻게 짜서 실제 코드로 옮기는지 생각해보니 어렵게 느껴짐