<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
display: inline-block;
background-color: rebeccapurple;
width: 660px;
}
span{
display: inline-block;
padding-top: 4px;
}
.ball{
width:40px;
height:40px;
border-radius: 90%;
color: white;
box-sizing: border-box;
}
.num{
font-size: 20px;
padding-left: 9px;
}
.kr{font-size: 15px;
padding-left: 6px;
padding-top: 10px;
}
</style>
</head>
<body>
<div>
<span class="ball num" style="background-color: blue;"><b>12</b></span>
<span><b>12세이상 관람가</b></span>
<span class="ball num" style="background-color: orange;"><b>15</b></span>
<span><b>15세이상 관람가</b></span>
<span class="ball kr" style="background-color: red;"><b>청불</b></span>
<span><b>청소년 관람불가</b></span>
<span class="ball kr" style="background-color: green;"><b>전체</b></span>
<span><b>전체관람가</b></span>
</div>
</body>
</html>
'리스트 연습' 카테고리의 다른 글
| 5대 건강식품 소개 (0) | 2023.02.28 |
|---|---|
| 리트리버 소개 페이지 (0) | 2023.02.28 |
| 미국립 약물 중독 연구소 표 (0) | 2023.02.22 |