HTML의 <output> 태그는 계산이나 사용자 입력의 결과값을 화면에 표시할 때 사용하는 요소입니다. 주로 <form> 태그 내에서 자바스크립트와 함께 활용되며, 실시간으로 계산 결과를 보여주는 데 유용합니다.
<output> 태그의 주요 속성
<output> 태그에서 사용할 수 있는 주요 속성은 다음과 같습니다.
| 속성 | 값 | 설명 |
|---|---|---|
| for | 요소 ID 목록 | 계산에 입력값을 제공한 요소들의 ID 목록을 지정합니다. 즉, 어떤 요소들이 계산 결과에 기여했는지 나타냅니다. |
| form | 폼 ID | <output> 요소가 속한 폼을 지정합니다. 이 속성을 사용하면 폼 외부 어디에나 output 요소를 배치할 수 있습니다. |
| name | 이름 | 해당 요소의 이름을 지정합니다. 자바스크립트에서 결과값을 참조하거나 폼 제출 시 데이터로 전송될 때 사용됩니다. |
사용 예제
아래 코드는 두 입력값을 더한 결과를 실시간으로 표시하는 예제입니다. 슬라이더와 숫자 입력 필드의 값이 변경되면 oninput 이벤트를 통해 계산이 수행되고, 그 결과가 <output> 태그에 출력됩니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML Output Tag</title>
</head>
<body>
<form oninput = "result.value = parseInt(a1.value)+parseInt(a2.value)">
<input type = "range" name = "a1" value = "0" /> +
<input type = "number" name = "a2" value = "5" /> <br />
The output is: <output name = "result"></output>
</form>
</body>
</html>정리
<output> 태그는 단순히 텍스트를 표시하는 <span>이나 <p> 태그와 달리, 폼 요소와 연동되어 계산 결과를 의미론적으로 표현한다는 점에서 차별화됩니다. 스크린 리더 등 보조 기술도 이 요소를 결과값으로 인식하기 때문에 웹 접근성 측면에서도 유리합니다. 계산기, 가격 견적기, 슬라이더 기반 시뮬레이터 등을 만들 때 적극적으로 활용해 보시기 바랍니다.