이 예제에서는 왼쪽 나무와 오른쪽 말풍선을 배치하기 위해 float 속성을 사용했습니다. 지금까지 연습한 좌우 배치 공식을 활용하여 다른 방법으로도 배치해 보세요.
예제 소스 Exercise/13장/KidsGao/css/style.css
/******************** *** forest2 *** ********************/ #forest2 { width: 100%; height: 750px; background-image: url(../img/forest/forest2/forest2_bg.png); /* forest2 공간의 배경 이미지를 삽입합니다. */ } #forest2 .frog { position: absolute; /* 개구리를 3차원 특징으로 변경합니다. */ width: 153px; height: 257px; background-image: url(../img/forest/forest2/frog.png); margin: 50px 0 0 100px; /* 상단에서 50px, 왼쪽에서 100px 떨어진 지점에 배치합니다. */ } #forest2 .machineWrap2 { position: relative; /* 기계 서랍장을 2차원, 3차원 특징으로 변경합니다. */ width: 400px; height: 400px; top: 180px; /* 상단에서 180px 떨어진 지점에 배치합니다. */ left: 50%; margin-left: -180px; } #forest2 .machineWrap2 .machineBottom { position: absolute; /* 기계의 하단 부품을 3차원 특징으로 변경합니다. */ width: 374px; height: 162px; background-image: url(../img/forest/forest2/machinebottom.png); margin-top: 220px; z-index: 200; /* z축을 200으로 조정합니다. */ } #forest2 .machineWrap2 .machineLeft { position: absolute; /* 기계의 왼쪽 부품을 3차원 특징으로 변경합니다. */ width: 123px; height: 228px; background-image: url(../img/forest/forest2/machineleft.png); margin-top: 30px; z-index: 200; /* z축을 200으로 조정합니다. */ } #forest2 .machineWrap2 .machineRight { position: absolute; /* 기계의 오른쪽 부품을 3차원 특징으로 변경합니다. */ width: 123px; height: 248px; background-image: url(../img/forest/forest2/machineright.png); margin: 10px 0 0 260px; z-index: 200; /* z축을 200으로 조정합니다. */ } #forest2 .forestBubble { position: relative; /* 말풍선을 2차원, 3차원 특징으로 변경합니다. */ width: 365px; height: 220px; background-image: url(../img/forest/forest2/forestbubble.png); top: -100px; /* 상단에서 -100px 떨어진 지점에 배치합니다. */ float: right; /* 오른쪽 끝에 배치합니다. */ margin-right: 100px; /* 오른쪽에서 100px 떨어진 지점에 배치합니다. */ } #forest2 .forest2Tree { position: relative; /* 나무를 2차원, 3차원 특징으로 변경합니다. */ width: 304px; height: 282px; background-image: url(../img/forest/forest2/forest2tree.png); top: 50px; /* 상단에서 50px 떨어진 지점에 배치합니다. */ float: left; /* 왼쪽 끝에 배치합니다. */ }