➊ leftPan과 rightPot 영역은 각각 float: left;과 float: right;을 적용하여 왼쪽 끝과 오른쪽 끝에 배치했습니다. ➋ steamWrap 서랍장에는 relative 속성값을 적용하여 안전장치를 미리 걸어 둡니다. ➍ steam과 bubble1 영역은 z-index 속성을 사용하기 위해 absolute 속성값을 적용하여 배치 작업을 진행합니다. ➎ kitchenBubble 영역은 배치 작업을 쉽게 하기 위해 absolute, right, top 속성을 사용합니다.
잠 깐 만 요
margin-top 속성을 사용할 경우
kitchenBubble 영역에서 top 속성이 아닌 margin-top 속성을 사용하면 어떻게 될까요? kitchen Bubble이 만들어지는 최초 위치를 기준으로 좌표가 설정되므로 다음과 같이 레이아웃이 틀어집니다.
