더북(TheBook)

마지막으로 scienceRightWrap 오른쪽 서랍장은 scienceLeftWrap 왼쪽 서랍장을 작업한 방식과 동일하게 진행합니다. 중앙 서랍장과 같은 선상에 위치하도록 float: right;을 적용하고 비커 이미지를 삽입한 다음 설명 글을 디자인합니다.

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

#science .scienceWrap .scienceRightWrap {
    float: right; /* 오른쪽 서랍장을 중앙 서랍장과 나란히 배치하기 위해 float: right;을 적용합니다. */
}

#science .scienceWrap .scienceRightWrap .water {
    width: 204px;
    height: 191px;
    background-image: url(../img/science/water.png); /* 비커 이미지를 삽입합니다. */
    margin-bottom: 130px; /* 비커 하단에 130px만큼 공백을 설정합니다. */
}

#science .scienceWrap .scienceRightWrap p {
    color: #8E7577;
    font-size: 18px;
    line-height: 26px; / 오른쪽 서랍장 안에 들어갈 설명 글의 위아래 간격을 26*px로 조정합니다. */
    padding-top: 10px;
}
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.