이번에는 scienceCenterWrap 중앙 서랍장을 배치하겠습니다.

    예제 소스 Exercise/14장/KidsGao/css/style.css

    #science .scienceWrap .scienceCenterWrap {
        float: left;  /* 중앙 서랍장을 왼쪽 서랍장 옆에 배치하기 위해 float: left;을 적용합니다. */
    }
    
    #science .scienceWrap .scienceCenterWrap .purpleSteam {
        position: relative; /* 자주색 증기를 2차원, 3차원 특징으로 변경합니다. */
        width: 241px;
        height: 216px;
        background-image: url(../img/science/grape.png);
    
    left: 50%;          
    margin-left: -120px;
        z-index: 100; /* z축을 100으로 조정합니다. */
    }
     
    /* 첫 번째 형제는 3차원 */    
    #science .scienceWrap .scienceCenterWrap .funnelBack { 
        position: absolute; /* 깔때기 전체 이미지를 3차원 특징으로 변경합니다. */
        width: 488px;
        height: 438px;
        background-image: url(../img/science/hopperback.png);
        margin-top: -45px;
    }
    
    /* 두 번째 형제는 2차원 */
    #science .scienceWrap .scienceCenterWrap .funnelFront {
        position: relative; /* 깔때기 앞면 이미지를 2차원, 3차원 특징으로 변경합니다. */
        width: 485px;
        height: 390px;
        background-image: url(../img/science/hopperfront.png);
        margin-top: 5px;
        margin-left: 2px;
    }
    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.