HTML5-CSS/output.html at master · ViGilanteAF/HTML5-CSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>OutPut</title>
  </head>
  <body>
    <form oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">
      <input type="number" name="num1" value="0" />+
      <input type="number" name="num2" value="0"></input>
      =<output name="result" for="num"></output>
    </form>
    <ul>
        <li>
            <label>10초 남음</label>
            <!-- 전체 60초 중 50초 진행-->
            <progress value="50" max="60"></progress>
        </li>
        <li>
            <label >진행률 30%</label>
            <progress value="30" max="100"></progress>
        </li>
        <li>
            <label>점유율 0.8</label>
            <!-- 전체 크기 1을 기준으로 0.8만큼 차지합니다.-->
            <meter value="0.8"></meter>
        </li>
        <li>
            <label>사용량 64%</label>
            <!--전체 100 중에서 64만큼 차지합니다.-->
            <meter min="0" max="100" value="64"></meter>
        </li>
        <li>
            <label>트래픽 초과</label>
            <meter min="1024" max="10240" low="2048" high="8192" value="9216"></meter>
        </li>
        <li>
            <label>적절한 트래픽</label>
            <!--전체 1 중에서 현재 0.5를 차지하고 있으며 적정도를 0.8로 설정했습니다.-->
            <meter value="0.5" optimum="0.8"></meter>
        </li>
    </ul>
  </body>
</html>