HTML & CSS

[html][css] 관람등급 만들기 - div,span,table,display

권군이 2020. 12. 16. 16:36

관람등급 표를 만들어보겠습니다.

따라 만들 표

위의 관람등급을 비슷하게 따라 만들어보겠습니다.

1. html

바깥 줄을 나타내기 위해 전체를 table로 묶어주었습니다.

div와 span으로 공과 글자를 만들었습니다.

<!DOCTYPE html>
<html lang="ko"> 
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="./css/test02.css">
</head>

<body>
    <table>
        <tr>
            <td>
            
            <div id="div1">
                12
            </div>

                <span>
                    12세이상 관람가

                </span>

            <div id="div2">
                15
            </div>

                <span>
                    15세이상 관람가

                </span>

            <div id="div3">
                청불
            </div>

                <span>
                    청소년 관람불가
                </span>

            <div id="div4">
                전체
            </div>

                <span id="span4">
                    전체관람가

                </span>
            </td>

        </tr>
        

    </table>
    
</body>
</html>

2. css

div는 block속성이기때문에 나란히 배치가 안되고 아래로 내려갑니다.

이것을 diplay: inline-block; 으로 inline-block속성을 바꿔주어 나란히 배치가 되도록 했습니다.

#div1{
    color:rgb(217,236,248);
    width: 23px;
    height: 23px;
    background:rgb(34,162,220);
    border-radius: 70%;
    display: inline-block;
    padding-right: 5px;
    padding-top: 4.5px;
    margin-right: 2px;
    font-size: 15px;
 
}

#div2{
    color:rgb(217,236,248);
    width: 23px;
    height: 23px;
    background:rgb(239,161,38);
    border-radius: 70%;
    display: inline-block;
    padding-right: 5px;
    padding-top: 4.5px;
    margin-left: 20px;
    margin-right: 2px;
    font-size: 15px;
   
}

#div3{
    color:rgb(217,236,248);
    width: 23x;
    height: 23px;
    background:rgb(202,33,38);
    border-radius: 70%; 
    display: inline-block;
    padding-left: 2px;
    padding-right: 2px;
    padding-top:4px;
    margin-left: 20px;
    margin-right: 2px;
    font-size: 13px;
   
   
}

#div4{
    color:rgb(217,236,248);
    width: 24px;
    height: 24px;
    background:rgb(63,164,73);
    border-radius: 70%; 
    display: inline-block;
    padding-left: 2px;
    padding-right: 2px;
    padding-top:4px;
    margin-left: 20px;
    margin-right: 2px;
    font-size: 12px;
  
}

table{

    text-align: right;
    border: 1.5px solid rgb(209,211,213);
    width: 970px;
    height: 60px;

}

div{
    font-weight: 600;
}

span{
    font-size: 20px;
    
}

#span4{
    margin-right: 20px;
}

3. 결과물

결과물

이렇게 관람등급을 만들었습니다 !