더북(TheBook)

예제 소스 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 속성이 따라와야 합니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.