진행상태를 나타내는 태그는 <progress>태그와 <meter>태그가 있다. <progress>태그의 경우 작업의 진행 상태를, <meter>태그의 경우 알려진 범위 내의 값에서 얼마나 사용되었는지를 나타내는 태그이다. 예를 들어 <progress>태그는 진행률 표시를 하는데 사용하고, <meter>태그의 경우 디스크 사용량, 투표율 등에 사용된다.
- <progress value="" max=""></progress>
- <meter value="" max=""></meter>
value의 경우 처음 로딩이 되었을 때의 상태를 설정할 수 있으며 max는 최대일 때의 수를 나타낸다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label>작업진행률:</label><progress value="50" max="100"></progress><br>
<label>디스크(D):</label><meter value="20" max="200"></meter>
</body>
</html>
'Frontend > HTML' 카테고리의 다른 글
| HTML5의 문서 구조화 (0) | 2024.07.07 |
|---|---|
| HTML에서 버튼을 만들어보자 (1) | 2024.06.30 |
| HTML에서 폼 요소를 사용해서 선택형 입력, 드롭다운 목록을 만들어보자 (0) | 2024.06.30 |
| HTML의 폼 요소를 사용해보자 (0) | 2024.06.30 |
| HTML 웹 페이지를 통해 사용자 입력을 받는 폼을 만들어 보자 (0) | 2024.06.29 |
| HTML 페이지 내에 다른 HTML을 출력해보자 (<iframe>태그) (0) | 2024.06.28 |
| HTML에서 표(table)를 만들어보자 (0) | 2024.06.27 |
| HTML의 <a>태그에 대해 알아보자 (0) | 2024.06.27 |