정답 키즈가오 night2 레이아웃 작업

그림 14-13 키즈가오 night2 디자인 결과물

말풍선은 정보성 이미지이므로 웹 접근성을 고려하여 <img> 태그를 사용합니다.

예제 소스 Exercise/14장/KidsGao/index.html

<div id="night2">
    <div class="moon"></div>
    <!-- 정보성 이미지는 <img> 태그를 사용합니다. -->
    <img class="night2Bubble" src="img/oneday/night2/night2bubble.png" alt
="하루 동안 숙성을 시키게 됩니다.">
    <div class="rightMoonTree"></div>
</div>

night2 공간 오른쪽 하단 끝에 나무가 배치되도록 absolute 속성값을 적용하고 right: 0과 bottom: 0을 적용합니다. 이 작업을 진행하기 위해 night2 공간에는 relative 속성값을 적용합니다. 그럼 night2 공간을 기준으로 rightMoonTree 영역이 오른쪽 아래에 배치됩니다.