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

그림 15-3 키즈가오 color1 디자인 결과물

color1 공간은 펭귄과 ‘말랑말랑 키즈가오 완성!’이라는 글자 이미지만 적용하면 됩니다. ‘말랑말랑 키즈가오 완성!’이라는 글자 이미지는 정보성 이미지이므로 웹 접근성을 고려하여 <img> 태그를 사용합니다.

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

<!-- Color1 Section -->
<div id="color1">
    <div class="penguin"></div>
    <!-- 웹 접근성을 고려하여 alt 속성값을 꼭 입력합니다. -->
    <img class="color1Bubble" src="img/color/color1/color1bubble.png" alt=
"말랑말랑 키즈가오 완성">
</div>

펭귄과 글자 이미지는 relative 속성값을 적용하여 배치 작업을 진행합니다. 펭귄은 top과 left 속성, 글자 이미지는 float와 margin 속성을 사용합니다. 지금까지 배운 정렬 방법 중 자신에게 익숙한 방법이 있다면 그 방법을 적용해도 괜찮습니다.