소개
HTML <meter> 태그는 알려진 범위 내의 스칼라 측정을 표시하는 데 사용됩니다. 이는 스칼라 값뿐만 아니라 분수 값도 나타낼 수 있습니다.
이 랩에서는 HTML 에서 <meter> 태그를 구문 및 속성과 함께 사용하는 방법을 배우게 됩니다. 또한 <meter> 태그의 기능을 설명하는 기본적인 예제를 볼 수 있습니다.
참고:
index.html에서 코딩을 연습하고 Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
HTML 파일 설정
이 단계에서는 index.html이라는 HTML 파일을 만들고 기본 HTML 구조를 추가합니다.
<!doctype html>
<html>
<head>
<title>HTML Meter Tag Lab</title>
</head>
<body></body>
</html>
HTML 파일에 <meter> 태그 추가
이 단계에서는 <meter> 태그를 value, max, 및 min 속성과 함께 HTML 파일에 추가합니다.
<meter value="50" min="0" max="100"></meter>
<meter> 태그에 대한 레이블 추가
이 단계에서는 접근성을 향상시키기 위해 <meter> 태그에 레이블을 추가합니다.
<label for="meter">My Meter:</label>
<meter id="meter" value="50" min="0" max="100"></meter>
<meter> 태그에 최솟값 설정
이 단계에서는 낮은 값으로 간주해야 하는 범위를 지정하기 위해 low 속성을 추가합니다.
<label for="meter">My Meter:</label>
<meter id="meter" value="50" min="0" max="100" low="30"></meter>
<meter> 태그에 최댓값 설정
이 단계에서는 높은 값으로 간주해야 하는 범위를 지정하기 위해 high 속성을 추가합니다.
<label for="meter">My Meter:</label>
<meter id="meter" value="50" min="0" max="100" low="30" high="80"></meter>
<meter> 태그에 최적값 추가
이 단계에서는 게이지의 최적 값을 설정하기 위해 optimum 속성을 추가합니다.
<label for="meter">My Meter:</label>
<meter
id="meter"
value="50"
min="0"
max="100"
low="30"
high="80"
optimum="50"
></meter>
HTML 파일 마무리
이 단계에서는 <body> 및 <html> 태그의 닫는 태그를 추가하여 HTML 파일을 마무리합니다.
<!doctype html>
<html>
<head>
<title>HTML Meter Tag Lab</title>
</head>
<body>
<label for="meter">My Meter:</label>
<meter
id="meter"
value="50"
min="0"
max="100"
low="30"
high="80"
optimum="50"
></meter>
</body>
</html>
요약
이 Lab 에서는 알려진 범위 내에서 스칼라 측정값을 표시하기 위해 HTML <meter> 태그를 사용하는 방법을 배웠습니다. HTML 파일에 <meter> 태그를 추가하고 해당 속성을 사용하여 낮음, 높음 및 최적 값으로 간주해야 하는 값의 범위를 지정하는 방법을 살펴보았습니다. 또한 접근성을 높이기 위해 <meter> 태그에 레이블을 추가했습니다. 이제 HTML 문서에서 스칼라 측정값을 표시하기 위해 <meter> 태그를 사용할 수 있습니다.
