예제 소스 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 떨어진 지점에 배치합니다. */ }