학습내용

<div id="night2">
            <div class="moon"></div>
            <img class="night2Bubble" src="img/oneday/night2bubble.png" alt="하루동안 숙성을 시키게 됩니다.">

            <div class="rightMoonTree"></div>
        </div>
        
        <div id="morning>
            
            <div class="sun"></div>
            <div class="leftPine"></div>
            <div class="rightPine"></div>

        </div>
        
        <div id="kitchen">

            <div class="leftPan"></div>
            <div class="rightPot"></div>

            <div class="steamWrap">
                <div class="steam"></div>
                <div class="bubble1"></div>
            </div>
            
            <img class="kitchenBubble" src="img/kitchen/kitchenbubble.png" alt="숙성을 시킨 반죽을 잘 익혀주면">

        <div id="color1">
            <div class="penguin"></div>
            <img class="color1Bubble" src="img/color/color1/color1bubble.png" alt="말랑말랑 키즈가오 완성">
        </div>

#night2 {
    position: relative;

    width: 100%;
    height: 800px;
    background-image: url(../img/oneday/night2/night2_bg.png);
}

#night2 .moon {
    width: 135px;
    height: 135px;
    background-image: url(../img/oneday/night2/moon.png);
}

#night2 .night2Bubble {
    position: absolute;

    margin: 300px 0 0 80px;
}

#night2 .rightMoonTree {
    position: absolute;

    width: 243px;
    height: 588px;
    background-image: url(../img/oneday/night2/moontree.png);

    right: 0;
    bottom: 0;
}


#night2 .moon {
    animation: moveMoon linear 10s infinite;
}

@keyframes moveMoon {
    from {
        margin-left: -135px;
    }
    to {
        margin-left: 110%;
    }
}


#night1 .starWrap .star1,
#night1 .starWrap .star2,
#night1 .starWrap .star3 {
    display: none;
}

#night2 {
    height: 620px;
    background-image: url(../img/mobile/oneday/night2/mobile_night2_bg.png);
}

#night2 .moon {
    width: 40px;
    height: 40px;

    background-image: url(../img/mobile/oneday/night2/mobile_moon.png);

    margin-top: 0;
}

#night2 .night2Bubble {
    width: 127px;

    left: 50%;
    margin: 300px 0 0 -67px;
}

#night2 .rightMoonTree {
    width: 70px;
    height: 173px;
    background-image: url(../img/mobile/oneday/night2/mobile_moontree.png);

    top: 70px;
    bottom: initail;
}


#morning .sun {
    animation: moveSun linear 10s 1500ms infinite;
}

@keyframes moveSun {
    from {
        margin-left: -131px;
    }
    to {
        margin-left: 110%;
    }
}


#morning {
    height: 720px;
    background-image: url(../img/mobile/oneday/morning/mobile_morning_bg.png);
}

#morning .sun {
    width: 33px;
    height: 32px;
    background-image: url(../img/mobile/oneday/morning/mobile_sun.png);
}

#morning. leftPine {
    width: 48px;
    height: 81px;
    background-image: url(../img/mobile/oneday/morning/mobile_leftpine.png);
}

#morning. rightPine {
    width: 77px;
    height: 149px;
    background-image: url(../img/mobile/oneday/morning/mobile_rightpine.png);

    top: 220px;
}

#kitchen {
    position: relative;

    width: 100%;
    height: 800px;
    background-image: url(../img/kitchen/kitchen_bg.png);
}

#kitchen .leftPan {
    float: left;

    width: 253px;
    height: 384px;
    background-image: url(../img/kitchen/pan.png);
}

#kitchen .leftPot {
    float: left;

    width: 243px;
    height: 132px;
    background-image: url(../img/kitchen/pot.png);
}

#kitchen .steamWrap {
    position: relative;

    width: 483px;
    height: 457px;
    background-color: yellow;

    left: 50%;
    margin-left: -275px;
    top: 0;

    clear: both;
}

<!-- 곡선작업이 생각보다 까다로워서 복사해옴 -->
#kitchen .steamWrap .bubble1 {
    animation-name: bubble;
    animation-duration: 1000ms;
    animation-delay: 0ms;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transform-origin: 0 0;
  }
  @keyframes bubble {
    0% {transform:translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    100% {transform:translate(-97px, -203px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  }html::after { content: url(https://ga-beacon.appspot.com/UA-42910121-1/stylie?pixel); position: absolute; left: -999em; }
  

#kitchen {
    height: 800px;
    background-image: url(../img/mobile/kitchen/mobile_kitchen_bg.png);
}

#kitchen .leftPan {
    width: 52px;
    height: 78px;
    background-image: url(../img/mobile/kitchen/mobile_pan_bg.png);
}

#kitchen .rightPot {
    width: 73px;
    height: 38px;
    background-image: url(../img/mobile/kitchen/mobile__pot.png);
}

#kitchen .steamWrap {
    width: 300px;
    height: 300px;
    margin-left: -150px;
    background-color: yellow;

    top: 0;
}

#kitchen .steamWrap .steam {
    width: 222px;
    height: 184px;
    background-image: url(../img/mobile/kitchen/mobile_steam.png);

    left: 50px;
    top: 100px;
    margin: 0 0 0 -140px;
}


#kitchen .steamWrap .bubble1 {
    display: none;
}

#kitchen .kitchenBubble {
    width: 143px;
    left: 50%;

    margin: -320px 0 0 -70px;
}

이용사이트

• http://sisikiller.dothome.co.kr/

• https://jeremyckahn.github.io/stylie/

어려운점

• 짜놓은 것을 그대로 옮기는 과정에서 코드를 그냥 따라적는 방법이 과연 효율이 있는 것인지 의문이 듦.

• 그대로 따라가면서도 이게 왜 이렇게 되는지 100% 이해가 안됨

• CSS부분을 3 페이지로 나누어 적는데 왔다갔다 하면서 헷갈리기 시작함
  코드 중간에 주석표시로 나누는 것은 별로인지 생각하면서 봄. 코드가 길면 보수나 수정시 나누어진 코드를 찾을 때 어떤 방식이 더 효율적인지 아직은 잘 모르겠음

해결방법

• 복습말고 따로 방법이 없음

• 짜놓은 그대로 따라가는걸 동시에 하지 않고 코드를 일단 적어놓고 혼자 천천히 보는게 도움이 됨

학습소감

• 이렇게 학습하면서 혼자 해보라고 했을 때, 과연 제대로 할 수 있을지 의문이 듦.