소개
<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 요소를 사용하여 웹사이트에서 계산 결과 또는 기타 결과를 표시할 수 있습니다.
