예제 소스 Exercise/15장/KidsGao/css/style.css
/******************** *** Kitchen *** ********************/ #kitchen { position: relative; /* kitchen 공간을 2차원, 3차원 특징으로 변경합니다. */ width: 100%; height: 800px; background-image: url(../img/kitchen/kitchen_bg.png); }
#kitchen .leftPan { ➊ float: left; /* 조리기구를 왼쪽 끝에 배치합니다. */ width: 253px; height: 384px; background-image: url(../img/kitchen/pan.png); } #kitchen .rightPot { float: right; /* 냄비를 오른쪽 끝에 배치합니다. */ width: 243px; height: 132px; background-image: url(../img/kitchen/pot.png); }
#kitchen .steamWrap { position: relative; /* steamWrap 서랍장을 2차원, 3차원 특징으로 변경합니다. */ ➋ width: 483px; height: 457px; left: 50%; margin-left: -275px; top: -100px; /* leftPan과 rightPot 영역에 float 속성을 사용했으므로 clear 속성으로 float 속성의 기능을 해제합니다. */ clear: both; } #kitchen .steamWrap .steam { position: absolute; /* 스팀 기계를 3차원 특징으로 변경합니다. */ ➌ width: 479px; height: 457px; background-image: url(../img/kitchen/steam.png); z-index: 100; /* z축을 100으로 조정합니다. */ } #kitchen .steamWrap .bubble1 { /* 스팀 연기를 3차원 특징으로 변경합니다. */ ➍ width: 55px; height: 56px; background-image: url(../img/kitchen/bubble.png); margin-top: 230px; z-index: 50; /* z축을 50으로 조정합니다. */ } #kitchen .kitchenBubble { ➎ position: absolute; /* 말풍선을 3차원 특징으로 변경합니다. */ right: 0; /* kitchen 공간을 기준으로 오른쪽 끝에 배치합니다. */ top: 400px; /* kitchen 공간을 기준으로 상단에서 400px 떨어진 지점에 배치합니다. */ }