더북(TheBook)

이 예제에서는 왼쪽 나무와 오른쪽 말풍선을 배치하기 위해 float 속성을 사용했습니다. 지금까지 연습한 좌우 배치 공식을 활용하여 다른 방법으로도 배치해 보세요.

예제 소스 Exercise/13장/KidsGao/css/style.css

/********************
*** forest2 ***
********************/
#forest2 {
    width: 100%;
    height: 750px;
    background-image: url(../img/forest/forest2/forest2_bg.png); /* forest2 공간의 배경 이미지를 삽입합니다. */
}

#forest2 .frog {
    position: absolute; /* 개구리를 3차원 특징으로 변경합니다. */
    width: 153px;
    height: 257px;
    background-image: url(../img/forest/forest2/frog.png);
    margin: 50px 0 0 100px; /* 상단에서 50px, 왼쪽에서 100px 떨어진 지점에 배치합니다. */
}

#forest2 .machineWrap2 {
    position: relative; /* 기계 서랍장을 2차원, 3차원 특징으로 변경합니다. */
    width: 400px;
    height: 400px;
    top: 180px; /* 상단에서 180px 떨어진 지점에 배치합니다. */
    left: 50%;
    margin-left: -180px;
}

#forest2 .machineWrap2 .machineBottom {
    position: absolute; /* 기계의 하단 부품을 3차원 특징으로 변경합니다. */
    width: 374px;
    height: 162px;
    background-image: url(../img/forest/forest2/machinebottom.png);
    margin-top: 220px; 
    z-index: 200; /* z축을 200으로 조정합니다. */
}

#forest2 .machineWrap2 .machineLeft {
    position: absolute; /* 기계의 왼쪽 부품을 3차원 특징으로 변경합니다. */
    width: 123px;
    height: 228px;
    background-image: url(../img/forest/forest2/machineleft.png);
    margin-top: 30px;
    z-index: 200; /* z축을 200으로 조정합니다. */
}

#forest2 .machineWrap2 .machineRight {
    position: absolute; /* 기계의 오른쪽 부품을 3차원 특징으로 변경합니다. */
    width: 123px;
    height: 248px;
    background-image: url(../img/forest/forest2/machineright.png);
    margin: 10px 0 0 260px;
    z-index: 200; /* z축을 200으로 조정합니다. */
}

#forest2 .forestBubble {
    position: relative; /* 말풍선을 2차원, 3차원 특징으로 변경합니다. */
    width: 365px;
    height: 220px;
    background-image: url(../img/forest/forest2/forestbubble.png);
    top: -100px; /* 상단에서 -100px 떨어진 지점에 배치합니다. */
    float: right; /* 오른쪽 끝에 배치합니다. */
    margin-right: 100px; /* 오른쪽에서 100px 떨어진 지점에 배치합니다. */
}

#forest2 .forest2Tree {
    position: relative; /* 나무를 2차원, 3차원 특징으로 변경합니다. */
    width: 304px;
    height: 282px;
    background-image: url(../img/forest/forest2/forest2tree.png);
    top: 50px; /* 상단에서 50px 떨어진 지점에 배치합니다. */
    float: left; /* 왼쪽 끝에 배치합니다. */
}
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.