<button> 태그
<button> 태그는 태그 이름 그대로 버튼을 생성하는 태그이다.
<input> 태그에서 type 속성 값으로 'submit', 'reset', 'button'을 지정하는 것과 같은 모양의 버튼이 생성된다.
그렇다면 굳이 <button> 태그를 만들어서 사용하는 이유는 무엇일까? <button> 태그가 <input> 태그와 구별되는 장점들을 살펴보면서 그 이유를 살펴보자.
<button> 태그의 장점
- <button> 태그를 사용하여 버튼을 생성하면 태그 이름이 'button'이므로 화면낭독기가 버튼의 존재를 명확히 알 수 있다는 장점이 있다.
- <button> 태그는 콘텐츠를 포함할 수 있기 때문에 버튼 안에 아이콘 등을 추가하거나 CSS 효과를 적용할 수도 있다.
아마도 이러한 장점들 때문에 <input> 태그 대신 <button> 태그를 통해 버튼을 생성하는 것 같다.
<output> 태그
<output> 태그는 폼 내의 계산 결과를 출력할 수 있도록 지정하는 요소이다.
<form> 태그의 oninput 이벤트를 이용한다.
oninput 이벤트란 onchange 이벤트와 유사한 이벤트로, 사용자가 태그 내의 데이터를 변경하거나, 어떤 계산에 의해 태그 내의 데이터가 변경되었을 때 발생하는 이벤트이다.
oninput 이벤트와 onchange 이벤트의 차이점
- oninput 이벤트 - 태그 내의 데이터가 변경된 직후 발생
- onchange 이벤트 - 데이터가 변경된 태그가 포커스를 잃을 때 발생
oninput 속성 안에 있는 parseInt(num1.value)의 의미는 'name' 속성 값이 num1인 태그의 'value' 속성 값을 정수형으로 바꾸겠다는 의미입니다.
정수형으로 변환하는 이유는 'value' 속성 값이 문자형(String)이므로 '+' 연산을 수행하는데 문제가 되기 때문에
정수형으로 변환한 후에 연산하기 위함입니다.
<progress> 태그
<progress> 태그는 특정 작업의 진행 상태를 나타내기 위한 태그이다.
시작은 0을 기준으로 하며 지정된 최대값까지의 진행 상황을 그래픽으로 표현한다.
주로, 파일을 복사하거나 다운로드 할 때의 진척도를 알려주기 위해 많이 사용되는 유용한 요소이다.
작업 진행 상황을 동적으로 표현하고자 한다면 자바 스크립트와 같은 다른 언어와 연동해서 사용해야 한다.
<meter> 태그
<meter> 태그는 일정 범위 안의 측정 값이나 분포 비율 등을 나타낼 때 사용하는 태그이다.
<progress> 태그와 용도는 거의 유사하지만, 동적인 진행 상황을 주로 표현하는 <progress> 태그와는 달리 <meter> 태그는 정적인 진행 상황을 표현하기 위해 사용한다.
