본문 바로가기

Python_WEB/HTML

HTML5 - 190607 Basic Study 14(학습지 개별 과정 Form - CSS)

반응형

1. 학습지 개별 과정

ex15.html

progress.css


2. HTML 미리보기

2019년 학습지 개별 과정

학과 수업 진도율 : 현재 80% (2019년 6월)

개별 진도율

이름진도율
코난87%
뭉치54%
아유미90%
세모70%


3. HTML Code

<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="content-type" content="text/html">
<link rel="stylesheet" href="progress.css" type="text/css">
<title>성적 현황 확인</title>
</head>

<body>
<h2>2019년 학습지 개별 과정</h2>
<h3>학과 수업 진도율 : 현재 80% (2019년 6월)</h3>
<p>
<progress max="100" value="80">
</p>
<h3>개별 진도율</h3>
<table>
<colgroup sytle="text-align:center;">
<col style="width:20%;">
<col span="2" style="width:80%;">
</colgroup>
<thead>
<tr>
<th>이름</th>
<th colspan="2">진도율</th>
</tr>
</thead>
<tbody>
<tr>
<th>코난</th>
<td>
<meter min="0" max="100" value="87"></meter>
</td>
<td>87%</td>
</tr>
<tr>
<th>뭉치</th>
<td>
<meter min="0" max="100" value="54"></meter>
</td>
<td>54%</td>
</tr>
<tr>
<th>아유미</th>
<td>
<meter min="0" max="100" value="90"></meter>
</td>
<td>90%</td>
</tr>
<tr>
<th>세모</th>
<td>
<meter min="0" max="100" value="70"></meter>
</td>
<td>70%</td>
</tr>
</tbody>
</table>

</body>
</html>


4. CSS Code

@charset "utf-8";
/* CSS Document */
<style>
body{
margin:50px;
font:1em "맑은 고딕",Cambria,Georgia,sans-serif;
background-color:#FEEFFA;
}

h2{
color:#1212A2;
}

h3{
background:#AEC7E1;
font-size:20px;
font-weight:bold;
padding:10px;
}

table{
width:700px;
border-collapse:collapse;
}

thead th{
text-align:left;
background:#3A4856;
padding:10px;
color:#ffffff;
}

th, td{
padding:15px;
text-align:left;
background:#F3F5F7;
}

meter, progress{
width:80%;
height:25px;
}
</style>


반응형