관람등급 표를 만들어보겠습니다.
위의 관람등급을 비슷하게 따라 만들어보겠습니다.
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. 결과물
이렇게 관람등급을 만들었습니다 !
'HTML & CSS' 카테고리의 다른 글
| [HTML][CSS] display 속성 - block, inline, inline-block (0) | 2020.12.21 |
|---|---|
| [HTML][CSS] 수성아트피아 리페어 페이지 만들기 과제 (0) | 2020.12.19 |
| [HTML][CSS] 리트리버 소개 과제 - float: left; (0) | 2020.12.18 |
| [HTML] 절대경로, 상대경로 - 이미지 경로 표기법 (0) | 2020.12.17 |
| [html] table(테이블) 태그 이용해서 표 만들기 -tr,td,th (0) | 2020.12.15 |