이번에는 scienceCenterWrap 중앙 서랍장을 배치하겠습니다.
예제 소스 Exercise/14장/KidsGao/css/style.css
#science .scienceWrap .scienceCenterWrap { float: left; ➊ /* 중앙 서랍장을 왼쪽 서랍장 옆에 배치하기 위해 float: left;을 적용합니다. */ } #science .scienceWrap .scienceCenterWrap .purpleSteam { position: relative; /* 자주색 증기를 2차원, 3차원 특징으로 변경합니다. */ width: 241px; height: 216px; background-image: url(../img/science/grape.png);
left: 50%; ➋ margin-left: -120px;
z-index: 100; /* z축을 100으로 조정합니다. */ }
/* 첫 번째 형제는 3차원 */ ➌ #science .scienceWrap .scienceCenterWrap .funnelBack { position: absolute; /* 깔때기 전체 이미지를 3차원 특징으로 변경합니다. */ width: 488px; height: 438px; background-image: url(../img/science/hopperback.png); margin-top: -45px; } /* 두 번째 형제는 2차원 */ #science .scienceWrap .scienceCenterWrap .funnelFront { position: relative; /* 깔때기 앞면 이미지를 2차원, 3차원 특징으로 변경합니다. */ width: 485px; height: 390px; background-image: url(../img/science/hopperfront.png); margin-top: 5px; margin-left: 2px; }