progress와 meter를 구분해 사용하기

이번 단계에서 배울 내용

<progress>는 다운로드나 강좌처럼 진행 중인 작업이 얼마나 끝났는지 보여 줍니다. <meter>는 점수나 사용량처럼 정해진 범위 안의 측정값을 보여 줍니다.

둘 다 value에 현재 값을 작성합니다. progress는 max로 완료 기준도 알려 줍니다.

예시

아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다.

<progress value="3" max="10">3/10 완료</progress>
<meter value="72" min="0" max="100">72점</meter>

해야 할 일

강좌 진행률 60%는 <progress>, 퀴즈 점수 85점은 <meter>로 표시하세요. 각 요소에 문제에서 정한 id와 현재 값을 지정합니다.

완성 조건

• course-progress라는 id의 <progress>를 한 개 만듭니다.
• quiz-score라는 id의 <meter>를 한 개 만듭니다.
• 강좌 진행률의 value는 60입니다.
• 강좌 진행률의 max는 100입니다.
• 퀴즈 점수의 value는 85입니다.
• 페이지 제목을 <h1>부터 순서대로 사용합니다.
• 진행률과 점수에 각각 무엇을 나타내는지 알려 주는 label이 있습니다.

작업 방법

1. 에디터에서 index.html을 엽니다.
2. TODO 주석이 있는 부분을 중심으로 코드를 수정합니다.
3. 미리보기에서 결과를 확인한 뒤 제출합니다.

별도의 입력값은 없습니다.

에디터에 준비된 index.html을 열고, 문제에서 안내하는 HTML 요소와 속성을 추가하거나 수정하세요. 브라우저 미리보기로 작성한 결과를 확인할 수 있습니다.

별도의 출력값은 없습니다.

수정한 index.html이 브라우저에서 정상적으로 열리고, 아래의 완성 조건을 모두 만족하면 됩니다.

도움말: 진행 중인 과정은 progress, 이미 측정된 점수는 meter라고 구분하세요.