HTML 계산 결과: Output 태그 사용법 배우기

소개

<output> 태그는 HTML5 에서 새롭게 도입된 컨테이너 요소입니다. 웹사이트/앱에서 계산 결과를 표시하는 데 일반적으로 사용됩니다.

이 단계별 랩에서는 HTML 을 사용하여 <output> 태그로 결과 placeholder 를 만드는 방법을 배웁니다.

참고: index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

HTML Output 태그 추가

컴퓨터에 index.html이라는 HTML 파일을 생성합니다.

HTML 파일의 body 섹션에 <output> 태그를 추가합니다.

<body>
  <h1>결과 placeholder</h1>
  <output></output>
</body>

Input 요소 추가

output 요소에서 결과를 생성하는 데 사용할 수 있는 텍스트 상자 또는 버튼과 같은 입력 요소를 생성합니다. output 요소와 입력 요소 간의 관계를 설명하는 for 속성을 정의합니다.

<body>
  <h1>결과 placeholder</h1>
  <input type="text" id="number1" />
  <input type="text" id="number2" />

  <button onclick="calculateResult()">계산</button>

  <output for="number1 number2"></output>
</body>

JavaScript 함수 작성

사용자 입력을 기반으로 결과를 생성하는 JavaScript 함수를 작성합니다.

<script>
  function calculateResult() {
    // 사용자가 입력한 값 가져오기
    var num1 = document.getElementById("number1").value;
    var num2 = document.getElementById("number2").value;

    // 연산 결과 저장
    var result = parseInt(num1) + parseInt(num2);

    // output 요소에 결과 표시
    document.querySelector("output").value = result;
  }
</script>

HTML 과 JavaScript 를 작성한 후, 웹 브라우저에서 HTML 파일을 열고 결과 placeholder 를 테스트합니다.

입력 필드에 두 개의 숫자를 입력하고 "계산" 버튼을 클릭합니다. 이 숫자들의 합이 output 요소에 표시되어야 합니다.

요약

축하합니다. HTML 을 사용하여 <output> 태그로 결과 placeholder 를 성공적으로 만들었습니다. 이 랩에서는 입력 요소를 추가하고 사용자 입력을 기반으로 결과를 생성하는 JavaScript 함수를 작성하는 방법을 배웠습니다. output 요소를 사용하여 웹사이트에서 계산 결과 또는 기타 결과를 표시할 수 있습니다.