[학원 과제] 관람 등급 화면 만들기

결과물

이미지 스프라이트를 사용하여 관람 등급 이미지를 추가했다.

 

HTML에서는 아래와 같이 작성했다.

    <div id="wrap">
        <div id="contents">
            <div>
                12세이상 관람가
                <div class="age12"></div>
            </div>
            <div>
                15세이상 관람가
                <div class="age15"></div>
            </div>
            <div>
                청소년 관람불가
                <div class="age19"></div>
            </div>
            <div>
                 전체 관람가
                <div class="all"></div>
            </div>
        </div>
    </div>

wrap으로 큰 틀을 만들고 아래에 div 태그로 나누었다.

 

CSS에선 아래와 같이 작성했다.

/*이미지 공통 속성들*/
.age12, .age15, .age19, .all {
        background-image: url(./img/sp_rank.png);
        background-repeat: no-repeat;
        margin-right: 5px;
        margin-left: 5px;
        width: 18px;
        height: 18px;
        float: left;
}
    #wrap {
        width: 800px;
        height: 60px;
        border-style: ridge;
    }
    #contents {
        width: 600px;
        height: 30px;
        float: right;
        margin-top: 30px;
    }
    /*각 관람등급 설정*/
    #contents>div {
        width: 130px;
        height: 30px;
        display: inline;
        float: left;
        margin-left: 10px;
        margin-right: 10px;
        padding-top: 5px;
        box-sizing: border-box;
    }
    /*이미지 좌표*/
    .age12 {
        background-position: 0px 0px;
    }
    .age15 {
        background-position: -30px 0px;
    }
    .age19 {
        background-position: -93px 0px;
    }
    .all {
        background-position: -154px 0px;
    }

분명 더 나은 방법이 있을 테지만 지금의 나로선 이게 최선인 것 같다.

오늘 하루는 이것보다 더 나은 방법이 있는지 계속 생각해봐야겠다.