더북(TheBook)

farm3 공간의 디자인 작업은 machineWrap 서랍장과 서랍장 안에 넣을 이미지 여섯 개를 중심으로 살펴보겠습니다.

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

/********************
*** Farm3 ***
********************/
#farm3 {
    width: 100%;  /* farm3 공간의 너비는 브라우저 창의 너비(가변값)로 설정합니다. */
    height: 850px; /* farm3 공간의 높이는 850px로 설정합니다. */
    background-image: url(../img/farm/farm3/farm3_bg.png); /* farm3 공간의 배경 이미지를 삽입합니다. */
}

#farm3 .farm3Window{
    position: absolute; /* 창문을 3차원 특징으로 변경합니다. */
    width: 247px;
    height: 169px;
    background-image: url(../img/farm/farm3/window.png);
    margin: 100px 0 0 100px; /* 상단에서 100px, 왼쪽에서 100px 떨어진 지점에 배치합니다. */
}

#farm3 .machineWrap {
     /* 기계를 감싸는 서랍장을 2차원, 3차원 특징으로 변경합니다. */
    width: 600px;
    height: 455px;
    top: 150px; /* 상단에서 150px 떨어진 지점에 배치합니다. */
    /* left, margin-left 속성의 중앙 정렬 공식으로 배치 작업을 진행합니다. */
    left: 50%;
    margin-left: -285px;
}
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.