더북(TheBook)

예제 소스 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 떨어진 지점에 배치합니다. */
}
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.