더북(TheBook)

starWrap 서랍장을 원활하게 배치할 수 있도록 relative 속성값을 적용합니다. star1, start2, star3 영역은 별 이미지 하나를 사용해서 적용하고, 부모 자식 간에 발생하는 마진 병합 현상을 막기 위해 absolute 속성값을 사용합니다.

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

/********************
*** Night1 ***
********************/
#night1 {
    width: 100%;
    height: 700px;
    background-image: url(../img/oneday/night1/night1_bg.png); /* night1 공간의 배경 이미지를 삽입합니다. */
}

#night1 .owl {
    position: absolute; /* 부엉이를 3차원 특징으로 변경합니다. */
    width: 334px;
    height: 571px;
    background-image: url(../img/oneday/night1/owl.png);
    margin-top: 50px;
}

#night1 .starWrap {
    position: relative; /* starWrap 서랍장을 2차원, 3차원 특징으로 변경합니다. */
    width: 750px;
    height: 400px;
    top: 150px;
    margin-left: 600px;
}

#night1 .starWrap .star1,
#night1 .starWrap .star2,
#night1 .starWrap .star3 {
    position: absolute; /* 별을 3차원 특징으로 변경합니다. */
    width: 53px;
    height: 50px;
    background-image: url(../img/oneday/night1/star1.png);
}

#night1 .starWrap .star1 {
    margin-top: 350px; /* 첫 번째 별은 상단에서 350px 떨어진 지점에 배치합니다. */
}

#night1 .starWrap .star2 {
    margin-left: 650px; /* 두 번째 별은 왼쪽에서 650px 떨어진 지점에 배치합니다. */
}

#night1 .starWrap .star3 {
    margin: 250px 0 0 500px; /* 세 번째 별을 상단에서 250px, 왼쪽에서 500px 떨어진 지점에 배치합니다. */
}
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.