728x90
우선 크게 생각한다.
2개로 나누면 관람가 아이콘과 관람가 설명이다.
html파일을 만들면 wrap으로 감싸고 그안에 서클을 추가한다.
<!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">
<link href='./css/style.css' type='text/css' rel='stylesheet' />
<title>등급 분류</title>
</head>
<body>
<div id="wrap">
<div id="age12">
<b>12</b>
</div>
12세이상 관람가
<div id="age15">
<b>15</b>
</div>
15세이상 관람가
<div id="age19">
<b>청불</b>
</div>
청소년 관람불가
<div id="all">
<b>전체</b>
</div>
전체관람가
</div>
</body>
</html>wrap에는 12세이상 관람가, 15세이상 관람가 등등 글자 설정이 먹힌다.
그러면 css폴더를 생성하고 스타일 css파일을 생성해보자
#wrap {
width: 800px;
height: 50px;
text-align: center;
background-color: #663399;
float: left;
font-size: 20px;
}
#age12 {
width: 50px;
height: 50px;
color: white;
background-color: #1E90FF;
border-radius: 100%;
text-align: center;
font-size: 16px;
box-sizing: border-box;
display: inline-block;
padding-top: 15px;
}
#age15 {
width: 50px;
height: 50px;
color: white;
background-color: #FFA500;
border-radius: 100%;
text-align: center;
font-size: 16px;
box-sizing: border-box;
display: inline-block;
padding-top: 15px;
}
#age19 {
width: 50px;
height: 50px;
color: white;
background-color: #FF0000;
border-radius: 100%;
text-align: center;
font-size: 16px;
box-sizing: border-box;
display: inline-block;
padding-top: 15px;
}
#all {
width: 50px;
height: 50px;
color: white;
background-color: #008000;
border-radius: 100%;
text-align: center;
font-size: 16px;
box-sizing: border-box;
display: inline-block;
padding-top: 15px;
}
wrap 설정을 보자
width: 800px;(전체 가로크기 설정)
height: 50px;(전체 세로크기 설정)
text-align: center;(텍스트 정렬 중간)
background-color: #663399;(배경색)
float: left;(생성된것은 왼쪽으로 붙여 정리하기)
font-size: 20px;(글자크기)
동그라미 등급분류를 만들어야 한다.
각각의 뜻을 알아보자
width: 50px;(가로크기 설정)
height: 50px;(세로크기 설정)
color: white;(텍스트 색상 흰색)
background-color: #1E90FF;(배경색)
border-radius: 100%;(둥글게 깍기)
text-align: center;(텍스트 정렬 중간)
font-size: 16px;(텍스트 크기 설정)
box-sizing: border-box;(테두리의 크기로 크기 설정)
display: inline-block;(크기를 지정하려면 있어야함)
padding-top: 15px;(위로 끌어 올리기)
728x90
'프로그래밍 > Web [HTML]' 카테고리의 다른 글
| 폰트 편 - 간단하게 설정하자 (0) | 2022.12.02 |
|---|---|
| 체크 박스 편 - 모양만 만듭니다. (0) | 2022.12.02 |
| 아이콘 편 (0) | 2022.12.02 |
| margin 편 (0) | 2022.12.01 |
| Visual Studio Code - 설치방법 (0) | 2022.11.26 |