color3 공간에는 깃발, 책과 인형이 놓인 선반, 로고, 주사위 이미지가 배치됩니다. 여기서 사용한 로고 이미지는 intro 공간에서 삽입한 로고 이미지와 다릅니다. intro 공간에서는 로고와 네 마리 동물 이미지를 따로 제작했지만 color3 공간에는 로고와 동물을 하나의 이미지로 제작했습니다.

color3 공간의 로고 또한 정보성 이미지이므로 <img> 태그를 사용합니다.

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

<!-- Color3 Section -->
<div id="color3">
    <div class="flag"></div>
    <div class="book"></div>
    <!-- 정보성 이미지는 <img> 태그를 사용합니다. -->
    <img class="logo" src ="img/color/color3/backlogo.png" alt ="키즈가오 회사 로고">
    <div class="dice"></div>
</div>

로고는 color3 공간을 기준으로 x축 중앙에 배치되도록 left와 margin-left 속성을 사용합니다. 주사위는 color3 공간을 기준으로 왼쪽 하단 끝에 배치되도록 absolute와 left와 bottom 속성을 적용합니다. 사전에 color3 공간에 relative 속성값을 적용해 둬야 합니다.