예제 소스 Exercise/15장/KidsGao/index.html
<!-- Color2 Section --> <div id="color2"> <div class="horse"></div> <!-- 왼쪽 하단의 콘텐츠 서랍장 --> <div class="color2Wrap"> <!-- 정보성 이미지에는 <img> 태그를 사용합니다. --> <img class="color2Bubble" src="img/color/color2/color2bubble.png" alt ="색상을 선택해 보세요."> <!-- 버튼 세 개를 담는 서랍장 --> <div class="btn-wrap"> <button class="red"></button> <button class="yellow"></button> <button class="blue"></button> </div> <p class="color2Comment"> 아이가 원하는 색상을 직접 만들며 색감을 스스로 발달시킵니다. <br> 색이 잘 섞이므로 누구나 쉽게 다양한 색을 만들 수 있습니다. </p> </div> </div>
color2 공간의 horse 영역은 float 속성을 사용하여 배치합니다. horse 영역 아래에는 color2Wrap 서랍장이 위치하도록 clear 속성을 사용합니다. 다시 한 번 강조하지만 바늘과 실처럼 float 속성을 사용할 때는 반드시 clear 속성이 따라와야 합니다.