예제 소스 Exercise/15장/KidsGao/index.html
<!-- Kitchen Section --> <div id="kitchen"> <div class="leftPan"></div> ➊ <div class="rightPot"></div> <!-- steamWrap: 스팀기와 연기를 담는 서랍장 --> <!-- steamWrap --> <div class="steamWrap"> ➋ <div class="steam"></div> <div class="bubble1"></div> </div> <!-- 정보성 이미지는 <img> 태그를 사용합니다. --> <img class="kitchenBubble" src="img/kitchen/kitchenbubble.png" alt="숙성을 시킨 반죽을 잘 익혀 주면"> ➌ </div>
➊ 먼저 왼쪽과 오른쪽 상단에 조리기구를 넣을 영역으로 <div class="leftPan">, <div class="rightPot">을 생성합니다. ➋ <div class="steamWrap"> 서랍장에는 스팀기와 연기를 담습니다. ➌ ‘숙성을 시킨 반죽을 잘 익혀 주면….’ 말풍선 이미지는 정보성 이미지이므로 <img> 태그를 적용합니다.