반응형
1. 학습지 개별 과정
ex15.html
progress.css2. 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>
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190608 Basic Study 16(CSS Basic 1) (0) | 2019.06.08 |
|---|---|
| HTML5 - 190607 Basic Study 15(SNS 공유 Meta 태그) (0) | 2019.06.07 |
| HTML5 - 190605 Basic Study 13(항공권 예매 폼) (0) | 2019.06.05 |
| HTML5 - 190605 Basic Study 12(드림위버 젠코딩) - Dreamweaver ZenCoding (0) | 2019.06.05 |
| HTML5 - 190604 Basic Study 11(사이트 가입 신청서) (0) | 2019.06.04 |
