[HTML] button, output, progress, meter 태그

<button> 태그 - 버튼 넣기

---

<button> 태그로 submit이나 reset의 버튼을 만들 수 있다.

 

속성

속성 값	설명
submit	폼을 서버로 전송한다.
reset	폼에 입력한 내용을 초기화시킨다.
button	버튼 형태만 만들 뿐 자체 기능은 없다.

 

<input> 태그와 <button> 태그의 차이점

<button> 태그는 태그 이름에서 알 수 있듯이 화면 낭독기에 그 역할을 정확하게 전할 수 있다. 즉 웹접근성에 더 좋다는 것이다. 

또한 <button> 태그를 사용한 버튼에는 콘텐츠를 포함할 수 있기 때문에 아이콘을 추가할 수 있고 CSS를 이용해 원하는 형태로 꾸밀 수 있다.

 

form에서 버튼을 만들 때는 웹접근성을 위해 <button> 태그로 만드는 것이 좋을 것 같다.

 

<output> 태그 - 계산 결과

---

입력하는 값이 계산 결과라는 것을 브라우저에 알려준다.

output 태그를 사용하면 output으로 묶인 부분이 일반 텍스트가 아니라 계산의 결과 값이라는 점을 웹 브라우저가 정확히 인식할 수 있다.

 

See the Pen by seyoungjoy (@seyoungjoy) on CodePen.

 

<progress> 태그 - 진행 상태 보여주기

---

작업 진행 상태를 나타낼 때 사용하는 태그.

 

속성

value - 작업 진행 상태

max - 작업 최대값

 

See the Pen by seyoungjoy (@seyoungjoy) on CodePen.

 

<meter> 태그 - 값이 차지하는 크기 표시하기

---

<progress> 태그를 사용했을 때와 결과화면이 같지만 사용해야하는 상황이 다르다.

 

<progress>태그, <meter>태그 차이점

<progress>태그는 진행 상황을,

<meter> 태그는 전체 크기 중에서 얼마나 차지하는지를 표현할 때 사용한다.

 

예를 들어 하드 디스크 전체 용량 중 현재 얼마나 사용했는지,

전체 유권자 중에서 몇 명이 투표했는지 등

지정된 범위 내에서 해당 값이 어느 정도 차지하고 있는지를 표현한다.

 

속성

min, max - 범위의 최솟값과 최댓값을 나타낸다. 값을 정하지 않으면 0과 1로 간주한다.

value - 범위 내에서 차지하는 값을 나타낸다.

low - "이 정도면 낮다."라고 할 정도의 값을 지정한다.

high - "이 정도면 높다."라고 할 정도의 값을 지정한다.

optimum - "이 정도면 적당하다"라고 할 정도의 범위를 지정한다. optimum 값이 high 값보다 크다면 value 값이 클수록 좋고 optimum 값이 low 값보다 작다면 value 값이 작을수록 좋다.

 

See the Pen by seyoungjoy (@seyoungjoy) on CodePen.