starWrap 서랍장을 원활하게 배치할 수 있도록 relative 속성값을 적용합니다. star1, start2, star3 영역은 별 이미지 하나를 사용해서 적용하고, 부모 자식 간에 발생하는 마진 병합 현상을 막기 위해 absolute 속성값을 사용합니다.
예제 소스 Exercise/14장/KidsGao/css/style.css
/******************** *** Night1 *** ********************/ #night1 { width: 100%; height: 700px; background-image: url(../img/oneday/night1/night1_bg.png); /* night1 공간의 배경 이미지를 삽입합니다. */ } #night1 .owl { position: absolute; /* 부엉이를 3차원 특징으로 변경합니다. */ width: 334px; height: 571px; background-image: url(../img/oneday/night1/owl.png); margin-top: 50px; } #night1 .starWrap { position: relative; /* starWrap 서랍장을 2차원, 3차원 특징으로 변경합니다. */ width: 750px; height: 400px; top: 150px; margin-left: 600px; } #night1 .starWrap .star1, #night1 .starWrap .star2, #night1 .starWrap .star3 { position: absolute; /* 별을 3차원 특징으로 변경합니다. */ width: 53px; height: 50px; background-image: url(../img/oneday/night1/star1.png); } #night1 .starWrap .star1 { margin-top: 350px; /* 첫 번째 별은 상단에서 350px 떨어진 지점에 배치합니다. */ } #night1 .starWrap .star2 { margin-left: 650px; /* 두 번째 별은 왼쪽에서 650px 떨어진 지점에 배치합니다. */ } #night1 .starWrap .star3 { margin: 250px 0 0 500px; /* 세 번째 별을 상단에서 250px, 왼쪽에서 500px 떨어진 지점에 배치합니다. */ }