output element - by. UXKM

2025-05-16

요약 설명
<output> 요소는 사용자 입력이나 스크립트 계산 결과 등 동적으로 생성된 값을 화면에 표시할 때 사용하는 시맨틱 태그입니다.
주로 <input>, <select>, <button> 등의 폼 요소와 함께 사용되며, 계산기나 실시간 계산 결과, 선택에 따른 표시 값 등을 보여주는 데 적합합니다. for 속성을 사용하면 연관된 폼 요소들과의 관계를 명시할 수 있으며, 시각적으로는 일반 텍스트와 유사하지만 의미적으로 결과값이라는 역할을 명확히 표현해줍니다.
접근성과 구조적인 의미 전달을 위해 결과 표시가 필요한 경우에 유용합니다.

주요 역할 및 특징

계산 결과 또는 스크립트 처리 결과를 사용자에게 표시
사용자 입력에 따라 결과를 실시간으로 표시하는 영역으로 사용됩니다.
주로 JavaScript와 함께 사용됨
<output> 자체만으로 값을 표시하는 기능은 없으며, JavaScript를 통해 값을 변경해야 합니다.
for 속성을 사용하여 관련 입력 요소 지정 가능
for 속성을 사용하면 특정 <input> 요소와 연결하여 해당 요소의 계산 결과를 출력할 수 있습니다.
일반적으로 form 요소 내부에서 사용됨
<form> 내부에서 사용하면 name 속성을 지정하여 서버로 값을 전송할 수도 있습니다.

CSS 기본 값

<output> 요소는 기본적으로 인라인 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

							output {
								display: inline;
							}

기본 문법

							<!-- 기본 문법 -->
							<output name="result" for="num1 num2">0</output>

속성

`<output>` 속성 요약

속성명
설명

for

결과가 연결될 입력 요소들의 ID 목록 지정
name

서버에 전송될 때 사용될 키 이름
form

<form> 밖에 있을 때 특정 폼과 연결

[for] 선택 사항 <output for="값">

<output> 요소가 참조하는 입력 필드(<input>, <textarea>, <select> 등)의 id 값을 지정합니다.
for 속성을 통해 특정 입력 필드와 연결하여 연산 결과나 동적인 값을 표시할 수 있습니다.

								<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
									<input type="number" id="a"> +
									<input type="number" id="b"> =
									<output name="result" for="a b"></output> <!-- for 속성 지정 -->
								</form>

[name] 선택 사항 <output name="값">

<output> 요소의 이름을 설정하여, 폼 데이터로 전송될 때 식별할 수 있도록 합니다.
같은 폼 내에서 다른 출력 요소들과 구별하는 용도로 사용됩니다.

								<form action="/submit" method="post" oninput="result.value = parseInt(x.value) + parseInt(y.value)">
									<input type="number" id="x"> +
									<input type="number" id="y"> =
									<output name="sum" for="x y"></output> <!-- name 속성 지정 -->
									<button type="submit">제출</button>
								</form>

[form] 선택 사항 <output form="form 요소의 id">

<output> 요소의 form 속성에 <form> 요소의 id와 같은 값을 지정하여, <output> 요소가 <form> 요소 내부에 없더라도 <form>의 데이터로 제출되도록 설정할 수 있습니다.

								<form id="mathForm" oninput="calc.value = parseInt(a.value) + parseInt(b.value)">
									<input type="number" id="a"> +
									<input type="number" id="b">
								</form>

								<output id="calc" form="mathForm" name="result"></output> <!-- form 속성 지정 -->