예제 소스 Exercise/13장/KidsGao/css/style.css
/******************** *** Farm2 *** ********************/ #farm2 { width: 100%; /* farm2 공간의 너비는 브라우저 창의 너비(가변값)로 설정합니다. */ height: 850px; /* farm2 공간의 높이는 850px로 설정합니다. */ background-image: url(../img/farm/farm2/farm2_bg.png); /* farm2 공간의 배경 이미지를 삽입합니다. */ } #farm2 .leftRice2 { width: 250px; height: 850px; background-image: url(../img/farm/farm2/leftrice2.png); /* 레이아웃이 틀어지는 현상을 막고 싶다면 absolute, left: 0을 적용합니다. */ float: left; ➋ /* 왼쪽 벼를 왼쪽 끝에 배치합니다. */ } #farm2 .scarecrow{ position: absolute; ➊ /* 허수아비를 3차원 특징으로 변경합니다. */ width: 103px; height: 206px; background-image: url(../img/farm/farm2/scarecrow.png); /* 3차원 성격을 가진 absolute는 부모 자식 간의 마진 병합 현상이 일어나지 않습니다. */ margin: 200px 0 0 300px; } #farm2 .rightRice2 { width: 236px; height: 850px; background-image: url(../img/farm/farm2/rightrice2.png); /* 레이아웃이 틀어지는 현상을 막고 싶다면 absolute, right: 0을 적용합니다. */ float: right; ➌ /* 오른쪽 벼를 오른쪽 끝으로 배치합니다. */ }