더북(TheBook)

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

/********************
*** Intro ***
********************/
#intro {……}
#intro .introWrap {……}
#intro .introWrap .logo {
    position: absolute; /* 로고를 3차원 특징으로 변경합니다. */
    width: 760px;
    height: 516px;
    background-image: url(../img/intro/logo.png);
    z-index: 100; /* z축을 100으로 조정합니다. */
}

#intro .introWrap .lion {
    position: absolute; /* 사자를 3차원 특징으로 변경합니다. */
    width: 161px;
    height: 161px;
    background-image: url(../img/intro/lion.png);
    margin: 80px 0 0 30px; /* 상단에서 80px, 왼쪽에서 30px 떨어진 지점에 배치합니다. */
}

#intro .introWrap .rabbit {
    position: absolute; /* 토끼를 3차원 특징으로 변경합니다. */
    width: 105px;
    height: 129px;
    background-image: url(../img/intro/rabbit.png);
    margin: 90px 0 0 580px;
}

#intro .introWrap .bear {
    position: absolute; /* 곰을 3차원 특징으로 변경합니다. */
    width: 112px;
    height: 105px;
    background-image: url(../img/intro/bear.png);
    margin: 310px 0 0 560px;
    z-index: 200; /* z축을 200으로 조정합니다. */
}

#intro .introWrap .monkey {
    position: absolute; /* 원숭이를 3차원 특징으로 변경합니다. */
    width: 85px;
    height: 93px;
    background-image: url(../img/intro/monkey.png);
    margin: 310px 0 0 50px;
    z-index: 200; /* z축을 200으로 조정합니다. */
}
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.