자바스크립트 출력

티스토리 뷰

Front-End-Web/javascript

자바스크립트 출력

jsBae 2026. 7. 4. 15:03

1. 자바스크립트 출력의 의미

자바스크립트(JavaScript)에서 출력(output)은 코드의 실행 결과를 화면이나 콘솔에 나타내는 과정을 의미한다.
계산 결과, 문자열, 변수 값, 오류 확인용 메시지 등을 출력하여 프로그램이 어떻게 동작하는지 확인할 수 있다.

웹페이지에서 자바스크립트 출력은 다음과 같은 방식으로 이루어진다.

HTML 요소 안에 출력하기
HTML 문서에 직접 출력하기
알림창으로 출력하기
브라우저 콘솔에 출력하기
현재 웹페이지를 인쇄하기

자바스크립트는 innerHTML, innerText, document.write(), window.alert(), console.log() 등을 사용하여 데이터를 출력할 수 있다.

2. HTML 요소 안에 출력하기

2.1 innerHTML 사용하기

innerHTML은 HTML 요소의 내용을 변경할 때 사용한다.
먼저 document.getElementById()를 사용하여 HTML 요소를 찾고, 그 요소의 innerHTML 값을 변경한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>innerHTML 출력</title>
</head>
<body>
  <h1>JavaScript Output</h1>

  <p id="demo"></p>

  <script>
    document.getElementById("demo").innerHTML = "Hello JavaScript";
  </script>
</body>
</html>

위 코드에서 id="demo"인 요소는 처음에는 비어 있다.
자바스크립트는 document.getElementById("demo")를 사용하여 해당 요소를 찾고, innerHTML을 사용하여 내용을 넣는다.

실행 결과는 다음과 같다.

Hello JavaScript

innerHTML은 단순한 글자뿐 아니라 HTML 태그도 함께 넣을 수 있다.

<p id="demo"></p>

<script>
  document.getElementById("demo").innerHTML = "<strong>강조된 문장</strong>";
</script>

이 경우 태그가 HTML로 해석되어 굵은 글자로 출력된다. HTML 요소의 내용을 변경할 때 innerHTML을 사용할 수 있으며, HTML 태그를 포함한 내용도 처리할 수 있다.

2.2 innerText 사용하기

innerText는 HTML 요소 안에 순수한 텍스트(plain text)를 넣을 때 사용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>innerText 출력</title>
</head>
<body>
  <h1>JavaScript Output</h1>

  <p id="demo"></p>

  <script>
    document.getElementById("demo").innerText = "Hello JavaScript";
  </script>
</body>
</html>

실행 결과는 다음과 같다.

Hello JavaScript

innerText는 HTML 태그를 태그로 해석하지 않고 글자 그대로 출력한다.

<p id="demo"></p>

<script>
  document.getElementById("demo").innerText = "<strong>강조된 문장</strong>";
</script>

실행 결과는 다음과 같다.

<strong>강조된 문장</strong>

innerHTML은 HTML 요소를 변경할 때 사용하고, innerText는 텍스트만 변경할 때 사용한다.

3. HTML 문서에 직접 출력하기

3.1 document.write() 사용하기

document.write()는 HTML 문서에 직접 내용을 출력할 때 사용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>document.write 출력</title>
</head>
<body>
  <h1>JavaScript Output</h1>

  <script>
    document.write(5 + 6);
  </script>
</body>
</html>

실행 결과는 다음과 같다.

document.write()는 간단한 테스트용으로 사용할 수 있다. 그러나 HTML 문서가 모두 로드된 뒤 document.write()를 실행하면 기존 HTML 내용이 지워질 수 있다. 따라서 일반적인 웹페이지 제작에서는 주의하여 사용하여야 한다.

다음 예제는 버튼을 클릭할 때 document.write()를 실행한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>document.write 주의</title>
</head>
<body>
  <h1>기존 제목</h1>
  <p>기존 문단입니다.</p>

  <button onclick="document.write(5 + 6)">출력</button>
</body>
</html>

버튼을 클릭하면 기존의 <h1>과 내용이 사라지고 11만 남을 수 있다.
이러한 이유로 document.write()는 결과 확인용 또는 간단한 테스트용으로 제한하여 사용하는 것이 적절하다.

4. 알림창으로 출력하기

4.1 window.alert() 사용하기

window.alert()는 브라우저의 알림창에 데이터를 출력한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>alert 출력</title>
</head>
<body>
  <h1>JavaScript Output</h1>

  <script>
    window.alert(5 + 6);
  </script>
</body>
</html>

실행하면 브라우저에 알림창이 나타나고, 알림창 안에 다음 값이 표시된다.

window.alert()는 간단한 메시지를 사용자에게 보여줄 때 사용할 수 있다. 다만 알림창은 사용자가 확인 버튼을 누르기 전까지 화면 흐름을 멈추게 하므로, 자주 사용하면 사용자 경험을 방해할 수 있다.

window는 브라우저 환경에서 전역 객체(global object)로 사용된다. 따라서 window.alert()는 alert()로 줄여 쓸 수 있다.

<script>
  alert("안녕하세요.");
</script>

5. 브라우저 콘솔에 출력하기

5.1 console.log() 사용하기

console.log()는 브라우저 개발자 도구의 콘솔(console)에 값을 출력한다.
화면에 직접 보이는 출력은 아니지만, 코드가 제대로 실행되는지 확인할 때 자주 사용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>console.log 출력</title>
</head>
<body>
  <h1>JavaScript Output</h1>

  <script>
    console.log(5 + 6);
  </script>
</body>
</html>

브라우저 화면에는 11이 보이지 않는다.
결과를 확인하려면 개발자 도구를 열고 Console 탭을 확인하여야 한다.

console.log()는 디버깅(debugging)에 많이 사용된다. 변수 값, 함수 실행 여부, 조건문 흐름, 반복문 결과 등을 확인할 때 유용하다.

예를 들어 변수 값을 확인할 수 있다.

<script>
  const name = "홍길동";
  const age = 20;

  console.log(name);
  console.log(age);
</script>

콘솔 출력 결과는 다음과 같다.

홍길동
20

6. 현재 웹페이지 인쇄하기

6.1 window.print() 사용하기

window.print()는 현재 브라우저 창의 내용을 인쇄할 때 사용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>페이지 인쇄</title>
</head>
<body>
  <h1>JavaScript Output</h1>
  <p>이 페이지를 인쇄합니다.</p>

  <button onclick="window.print()">인쇄하기</button>
</body>
</html>

버튼을 클릭하면 브라우저의 인쇄 창이 열린다.
자바스크립트에는 일반적인 의미의 print 객체나 출력 장치 접근 기능이 따로 존재하지 않으며, 현재 창의 내용을 인쇄할 때 window.print()를 사용할 수 있다.

7. 출력 방법 비교

출력방법	사용코드	위치	용도
HTML 요소에 출력	innerHTML	웹페이지 요소 안	화면 내용 변경
텍스트만 출력	innerText	웹페이지 요소 안	순수 텍스트 변경
문서에 직접 출력	document.write()	HTML 문서	간단한 테스트
알림창 출력	window.alert() 또는 alert()	브라우저 알림창	간단한 안내 메시지
콘솔 출력	console.log()	개발자 도구 Console	디버깅, 값 확인
페이지 인쇄	window.print()	인쇄 창	현재 페이지 인쇄

종합 예제

다음 예제는 여러 출력 방법을 한 번에 비교한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Output 종합 예제</title>
</head>
<body>
  <h1>JavaScript Output</h1>

  <p id="htmlOutput"></p>
  <p id="textOutput"></p>

  <button onclick="showAlert()">알림창 출력</button>
  <button onclick="printPage()">페이지 인쇄</button>

  <script>
    document.getElementById("htmlOutput").innerHTML = "<strong>innerHTML 출력</strong>";
    document.getElementById("textOutput").innerText = "<strong>innerText 출력</strong>";

    console.log("콘솔에 출력된 메시지입니다.");

    function showAlert() {
      alert("알림창에 출력된 메시지입니다.");
    }

    function printPage() {
      window.print();
    }
  </script>
</body>
</html>

이 예제에서 innerHTML은 태그를 HTML로 해석하여 굵은 글자로 표시한다.
innerText는 태그를 글자 그대로 표시한다.
console.log()는 브라우저 화면이 아니라 개발자 도구의 Console 탭에 결과를 출력한다.
alert()는 알림창을 띄우고, window.print()는 현재 페이지의 인쇄 창을 연다.

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2026/07 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

multiking

티스토리 뷰