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

    /********************
    *** science ***
    ********************/
    
    #science {
        position: relative;
        width: 100%;
        height: 800px;
        background-image: url(../img/science/science_bg.png);
    }
     
    #science .scienceWrap {  
        position: relative; /* scienceWrap 서랍장을 2차원, 3차원 특징으로 변경합니다. */ 
        width: 1066px;
        height: 611px;
        /* left,margin-left 속성의 중앙 정렬 공식으로 배치 작업을 진행합니다. */
        left: 50%;
        margin-left: -533px; 
    }
     
    #science .scienceWrap .scienceLeftWrap {
      float: left;  /* scienceWrap 서랍장을 기준으로 왼쪽 서랍장을 왼쪽 끝에 배치합니다. */
    }
    
    #science .scienceWrap .scienceLeftWrap .gly {
        width: 230px;
        height: 192px;
        background-image: url(../img/science/gly.png); /* 비커 이미지를 삽입합니다. */
    margin-bottom: 130px;  /* 비커 하단에 130px만큼 공백을 만듭니다. */
    margin-left: 55px;      /* 비커를 왼쪽에서 55px 떨어진 지점에 배치합니다. */
    }
    
    #science .scienceWrap .scienceLeftWrap p {
        color: #8E7577;
        font-size: 18px;
        line-height: 26px; /* 왼쪽 서랍장 안의 글자 위아래 간격을 26px로 조정합니다. */ 
        padding-top: 10px; /* 글자를 상단에서 10px 떨어진 지점에 배치합니다. */
    }
    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.