➊ 먼저 배치 작업을 원활하게 하기 위해 farm1 공간에는 relative 속성값을 적용합니다. farm1 공간 안의 자식은 브라우저 창의 너비를 줄이면 이미지와 설명 글 공간이 서로 겹칩니다. 따라서 3차원 특징을 가진 absolute 속성값과 2차원과 3차원 특징을 모두 가진 relative 속성값을 적절히 활용하면서 배치 작업을 진행합니다.

➋ ➌ 양쪽 벼는 브라우저 창의 너비를 줄이더라도 항상 레이아웃을 유지해야 하므로 float 속성 대신 absolute 속성값과 right 속성을 적용합니다(intro 공간에서 좌우에 구름을 배치했던 공식을 적용하면 됩니다).

➍ .farmSpeechWrap 서랍장은 부모 자식 간에 발생하는 마진 병합 현상을 막기 위해 top 속성과 left 속성으로 배치 작업을 진행합니다. top 속성 대신 margin-top 속성을 적용하면 마진 병합 현상이 발생합니다.

 

그림 13-2 farm1 실행 결과