➊ 왼쪽 서랍장 바로 옆에 배치되도록 float: left;을 적용합니다. ➋ 자주색 증기 이미지는 purpleSteam 영역에 적용하고 left와 margin-left 속성을 사용하여 중앙에 배치합니다.

➌ funnelBack 영역과 funnelFront 영역에는 깔때기 전체 이미지와 깔때기 앞면 이미지(hopperback.png, hopperfront.png)를 각각 삽입합니다. funnelBack 영역이 funnelFront 영역 뒤에 배치되도록 funnelBack 영역 안에는 absolute 속성값을 적용하고, funnelFront 영역에는 relative 속성값을 적용합니다. 이 작업은 형제간의 2차원, 3차원 특징을 응용한 방식입니다.

 

그림 14-4 중앙 서랍장 배치 결과