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