미터, 프로그래스 태그 차이
오늘은 간단한 HTML을 설명하려고 합니다.
progress는 흔히 사용하는 태그입니다.
진행률 나타낼때 참 좋죠.
그런데 meter라는 태그도 progress와 너무 비슷합니다.
그래서 오늘은 이 두가지의 HTML 차이를 알아보려 합니다.
결론부터 말하면
progress : 진행율을 나타내기 위해, 동적 데이터
meter : 현재 점수나 범위를 나타낼때, 정적데이터
▼ 아래 소스를 크롬에서 확인하면
<html>
<head>
<title>meter 태그와 progress 태그 </title>
</head>
*당신의 수학점수는?<br>
90점-> <meter value="90" min="0" max="100">90</meter>
<br>
*현재 프로젝트 완성률은 <br>
70%-> <progress id="progressID" value="70" max="100"></progress>
</html>
<head>
<title>meter 태그와 progress 태그 </title>
</head>
*당신의 수학점수는?<br>
90점-> <meter value="90" min="0" max="100">90</meter>
<br>
*현재 프로젝트 완성률은 <br>
70%-> <progress id="progressID" value="70" max="100"></progress>
</html>
▼ 아래처럼 보입니다. 특이점은
progress 태그는 눈금이 보이죠? 앞으로 뭔가 더 진행될거 같으 느껴집니다. 동적으로 보이고
meter 태그는 정적으로 보입니다.
▼하지만 익스플로러에서는 조금 다릅니다.
우선 meter 태그는 디자인 없이 text속성의 값만이 보이고 progress는 크롬처럼 눈금이 없는 모양새네요
익스 때문에 한국에서는 구분없이 progress를 통일해서 쓰게 되고 있습니다.
마무리
이제는 익스가 호환성 문제가 많네요
'IT_Developers > HTML' 카테고리의 다른 글
| HTML - 동적으로 추가된 input 값이 결과에서 받아지지 않을때 (17) | 2018.04.12 |
|---|---|
| meta - X-UA-Compatible 태그 / 익스플로러 호환성 (0) | 2018.01.30 |
| Front- 프론트엔드 디자인 무료 공개소스 / codepen.io (0) | 2018.01.11 |
| CSS - 엑셀 다운로드 출력시 셀서식 지정 (0) | 2017.07.05 |
| HTML - 프레임(frame)으로 홈페이지 구동하기 예제 (0) | 2017.07.05 |
댓글