프론트엔드/HTML

HTML 40 <meter> 태그와 <progress> 태그

스펀지연구소 2021. 4. 3. 14:50

Document

학습량그래프

홍민성: 60 out of 100
송지효: 22%
이민정: 20%

작업진행율

초기작업: 22%
중간작업: 77%
다음작업: 98%
<!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>
</head>
<body>
  <form>
    <h3>학습량그래프</h3>
    홍민성: <meter min="0"max="100"optimum="50"value="60">60 out of 100</meter><br>
    송지효: <meter low="0.3"hign="0.5"value="0.22">22%</meter><br>
    이민정: <meter low="0.25"high="0.75"optimum="0.8"value="0.2">20%</meter>
    <p></p>
    <h3>작업진행율</h3>
    초기작업: <progress value="22"max="100"title="진행율">22%</progress><br>
    중간작업: <progress value="0.77"max="1">77%</progress><br>
    다음작업: <progress value="0.98"max="1">98%</progress><br>
  </form>
</body>
</html>
저작자표시 비영리 변경금지 (새창열림)