html/css 독학하기

output

토픽 html/css 독학하기 > html사전

설명

The output (<output>) element represents the result of a calculation.

<output> 요소는 계산한 결과값을 보여주는 요소이다. 예를 들어 사용자로부터 값을 여러 개 입력받고, 더하거나 빼는 등의 계산을 한다고 하자. 이때 사용자가 값을 입력하거나 마우스로 값을 바꾸면, 그때마다 계산한 결과값이 바뀌면서 표시된다. w3schools.com에서 제공하는 예를 눈으로 직접 봐 보자. 

Usage Context

Permitted content Phrasing content
Tag omission Must have both a start tag and an end tag.
Permitted parent elements  
Normative document HTML5, section 4.10.15

속성

이 엘리먼트는 전역속성을 지원한다.

for

A list of IDs of other elements, indicating that those elements contributed input values to (or otherwise affected) the calculation.

계산에 사용되는 다른 HTML 요소들의 ID 목록. 이 속성에 명시된 HTML 요소들이 입력값을 제공하거나 입력값에 영향을 미침으로써 계산에 사용됨을 명시한다. 

 

form

The form element that this element is associated with (its "form owner"). The value of the attribute must be an ID of a form element in the same document. If this attribute is not specified, the output element must be a descendant of a form element. This attribute enables you to place output elements anywhere within a document, not just as descendants of their form elements.

form 속성은 <output> 요소의 소유자인 <form>을 가리킨다. form속성의 값은 <form>요소의 id값인데, 이 <form>요소는 <output>요소와 반드시 같은 문서 내에 있어야 한다. form 속성이 특정되지 않은 경우에, <output>요소는 반드시 <form>요소의 하위에 위치해야 한다. form 속성을 특정하지 않는다는 의미는 <output>태그 안에 form속성을 명시해주지 않는 것을 의미한다. form 속성을 특정해준 경우, <output>요소를 반드시 <form>요소의 하위에 위치시키지 않아도 된다. 문서 내의 어느 곳에든 위치시켜도 된다. 

name

The name of the element.

<output>요소의 이름을 가리키는 속성이다.

 

예제

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
0<input type="range" id="b" value="50" />100 +<input type="number" id="a" value="10" /> =
<output id="result" for="a b"></output>
</form>

예제 출력화면

 

DOM Interface

This element implements the HTMLOutputElement interface. <output> 요소는 HTMLOutputElement 인터페이스를 구현한다.

호환성

Desktop
기능 구글크롬 파이어폭스Gecko) 인터넷 익스플로러 Opera Safari
기본적인 지원 10 4.0 (2.0)   11 nightly
Mobile
기능 안드로이드 파이어폭스 모바일(Gecko) 인터넷 익스플로러 모바일 오페라 모바일 사파리 모바일
기본적인 지원   4.0 (2.0)      

참고

댓글

댓글 본문
  1. engfordev
    검토과정에서 주고받은 댓글 (도저히 아까워서 일단 요기 남겨둡니다~)
    ** form 속성 부분에 관해서
    >>(문구를 좀 다듬어봤습니다. 어떤가요@_@. 뒷부분에 <input>요소와 type 속성에 대한 내용은 원문에 없고, 실험해본결과 <label> 태그와도 동작을 하고 <input> 요소의 text type에서도 동작을 하기 때문에 삭제하는 것이 좋을 것 같습니다.)
    >(문구 다듬어주신 것, 좋은데요!! 뒷 부분 내용은 빼도 될 것 같아요 ㅎㅎ 1차번역자께서 range와 number 등을 쓰셨는데, 그걸 살려보려고 마음데로 집어넣다가 너무 나간 것 같아요 ^^;; )
    >> form 속성의 값을 써주지 않은 경우에는(form="" 식으로 값을 써주지 않은 경우로 해석될 우려가 있습니다. "form 속성이 특정되지 않은 경우에는"으로 바꾸는것이 어떨까요),
    >훔.. 요 부분은 잘 이해가 안되요.. form은 어떤 어떤 요소의 ID이기 때문에, form="a" 이런 식으로 써주어야 하는 것 아닐까요? 그래서 form="a"라고 form 속성의 값을 써주지 않으면.. 이라고 표현했던 거에요. 어케 생각하시나요? ^^
    >>그러니까, <output form="form_id"></output> 이런 식으로 써야하는건데, 다음처럼 <form><output></output> form 요소 내부에 위치하면서 생략이 될 수도 있다는거니까요, 1차번역처럼 "form 속성의 값을 써주지 않은 경우에는" 이라고 하면 <output form=""> 이라고 오해되지 않을까 생각이 되서 쓴 것이었습니다. form 속성의 값을 써주지 않는 것이 아니라 form 속성 자체가 없는 경우여야하니까요.
    ** 예제에 관해서..
    >>이건 조금 흥미로운 것인데요. 위의 설명에서 for 속성은 계산에 사용되는 요소들의 ID 목록이라고 명시해놓고는, 예제에서는 name 속성을 사용하고 있습니다.(w3school도 마찬가지입니다) 실무에서는 name보다는 중복되지 않는 id 속성을 사용을 권장했었는데 제가 잘못알고 있는건가요? 예제를 id로 수정해도 잘 동작하므로 명시된대로 id를 사용하는 것이 더 좋을 것 같습니다.
    > 훗.. 정말 그렇네요? ㅎㅎ id 이전에는 name을 많이 썼었나부죠? ㅎㅎ 설명해주신 것 읽으면서 끄덕끄덕 거렸어요. 예제를 id로 수정하면 될 것 같아요~ 테스트도 해보시고.. 꼼꼼하시다는~ 고맙습니다 ^^</output></form></label>
    답글
  2. engfordev
    잘 해주셨습니다!!
    1. form 부분에서요..
    저는 의미를 이렇게 이해했어요.
    >> form은 <output>요소의 소유자인 <form>을 가리킨다.
    그리고 요 설명 부분에서 출력요소와 출력값은 <output> 요소라고 써주면 어떨까요? ^^
    2. for 부분..
    일단 앞부분은..
    for은 계산에 필요한 입력값을 갖는 요소들의 ID의 목록을 가리킨다.
    로 이해했고요.
    고 뒷부분은 무슨 의미인지 잘 이해가 안 가네요~ 다시 함 생각해볼게요~
    3. 출력화면 캡쳐로 넣어주신 거, 좋은데요? ^^
    수고하셨습니다~</output></form></output>
    답글