왕진 블로그
document.write() —
문서에 직접 출력하기
자바스크립트를 배울 때 가장 먼저 만나는 코드 중 하나다. <script> 태그 안에서 document.write()를 세 번 호출해 화면에 글자와 태그를 직접 찍어낸다. 짧지만 그 안에 "스크립트 태그", "객체", "메서드", "HTML 문자열 해석"이라는 자바스크립트의 핵심 개념이 모두 들어있다.
document.write() 활용
Welcome!
2 + 5 는
7 입니다.브라우저 화면에는 원본 코드의 <h3> 제목과 구분선(<hr>) 아래로, 스크립트가 실행되면서 새로 만든 "Welcome!" 제목, "2 + 5 는"이라는 줄, 그리고 노란 형광펜으로 강조된 "7 입니다."가 이어서 출력된다. 즉 자바스크립트가 실행되면서 HTML 문서 뒤쪽에 내용을 계속 덧붙인 것이다.
HTML은 원래 태그를 해석해서 화면을 그리는 역할만 한다. "이 줄부터는 코드를 계산하고 실행해라"라는 지시를 브라우저에게 따로 알려주지 않으면, 브라우저는 그냥 글자로 받아들일 뿐이다. <script>는 그 경계선이다. 이 태그 안에 들어간 내용은 HTML 파서가 아니라 자바스크립트 엔진에게 넘겨져서, 위에서부터 아래로 한 줄씩 순서대로 실행된다.
<hr> 다음, 즉 body의 중간에 있다. 그래서 브라우저는 거기까지의 HTML(제목, 구분선)을 먼저 화면에 그린 다음, 그 지점에서 자바스크립트를 실행한다.브라우저는 페이지를 열자마자, 지금 화면에 그려지고 있는 HTML·CSS 문서 전체를 자바스크립트가 다룰 수 있도록 하나의 "객체"로 포장해 둔다. 그 객체의 이름이 바로 document다. 우리가 let document = ...처럼 직접 만든 변수가 아니라, 브라우저가 페이지를 켜는 순간 이미 만들어서 건네주는 전역 객체라는 점이 핵심이다.
document.write("문자열")은 괄호 안에 넣은 문자열을 현재 문서, 그 실행 시점의 위치에 그대로 추가한다. 다른 언어의 print나 출력 함수와 비슷하게 생각하면 이해가 쉽다. 이번 코드처럼 write()를 여러 번 호출하면, 호출된 순서 그대로 화면에 이어서 붙는다.
write()는 넘겨받은 문자열을 단순한 "글자"가 아니라 브라우저가 해석해야 할 HTML 조각으로 취급해서 문서 흐름에 흘려 넣는다. 그래서 문자열 안에 <h3>, <br>, <mark> 같은 태그 문자열이 들어있으면, 화면에는 꺾쇠 기호가 그대로 찍히는 게 아니라 실제 제목·줄바꿈·강조로 렌더링된다.
글자 그대로
<h3>Welcome!</h3>가 보여야 한다렌더링한다 — 태그가 "살아난다"
자바스크립트가 브라우저 안에서 동작할 때는 document, window, console 같은 여러 객체를 브라우저가 미리 만들어서 건네준다. 그래서 개발자는 "화면 문서를 다루는 기능"을 처음부터 새로 만들 필요 없이, 이미 준비된 document 객체의 write() 메서드를 곧바로 꺼내 쓰기만 하면 된다. 원본 코드의 주석에 나온 "객체가 미리 준비되어있는 거예요"라는 말이 바로 이 뜻이다.
- 객체를 직접 만들지 않아도, 브라우저가 실행 환경에 필요한 객체를 미리 넣어둔다
- 이런 객체를 "호스트 객체"라고 부르기도 한다
- 덕분에 document.write() 처럼 짧은 코드로도 바로 화면 출력이 가능하다
document.write는 문서가 아직 만들어지는 중(파싱 중)일 때는 그 지점에 자연스럽게 이어쓰기가 되지만, 브라우저가 페이지 로딩을 이미 다 끝낸 뒤에 호출하면 상황이 완전히 달라진다. 이 시점의 write 호출은 "기존 문서를 지우고 새 문서를 여는 것"으로 처리되어, 지금까지 화면에 있던 내용이 통째로 사라지고 write에 넘긴 내용만 남는다.
setTimeout 안에서 document.write를 호출하면, 클릭하는 순간 페이지 전체가 하얗게 지워지고 write한 글자만 남는 사고가 난다.같은 document.write("안녕") 한 줄이어도, 그게 언제 실행되느냐에 따라 결과가 정반대다. 브라우저의 문서 상태를 시간 순으로 따라가 보자.
document.write는 개념을 익히기엔 좋지만, 문서 전체 흐름에 영향을 주고 위치를 세밀하게 지정하기 어려우며 로드 후 호출 시 파괴적이라는 이유로 실무에서는 거의 쓰지 않는다. 대신 특정 요소를 골라 그 안에 내용을 채우는 요소.innerHTML, 또는 노드를 하나씩 만들어 붙이는 createElement / appendChild 같은 DOM API를 사용한다.
화면에 무언가를 그려 넣는 방법은 여러 가지다. 셋 다 "HTML을 화면에 반영"하지만, 어디에 어떻게 반영되는지가 다르다. 왜 실무가 document.write를 떠나 뒤쪽 두 방법으로 옮겨갔는지 표로 정리하면 분명해진다.
| 방법 | 반영 대상 | 로드 후 사용 | 주 용도 |
|---|---|---|---|
document.write() |
문서 전체 흐름 | 위험 — 문서를 덮어씀 | 학습·초기 로딩 중 간단 출력 |
요소.innerHTML |
지정한 요소 내부만 | 안전 | 특정 영역 내용 통째로 교체 |
createElement() |
새 노드를 만들어 원하는 위치에 붙임 | 안전 | 정밀한 DOM 조립·동적 UI |
위치를 콕 집을 수 없고, 로드 후엔
페이지를 통째로 날려 버린다.
로드 후에도 문제없고,
동적 화면 갱신의 기본기다.
학습은 왼쪽에서 시작하지만, 실무의 무게중심은 오른쪽으로 이동한다. document.write로 개념을 잡고, 곧바로 innerHTML·DOM 조작으로 넘어가는 것이 자연스러운 순서다.
| 실수 | 증상 | 해결 |
|---|---|---|
| 페이지 로드 완료 후(클릭, setTimeout 등) document.write 호출 | 화면 전체가 하얗게 지워지고 write 내용만 남음 | innerHTML이나 DOM API로 교체 |
| 문자열 안 따옴표 처리를 잘못함 | 문자열이 중간에 끊겨 SyntaxError 발생 | 큰따옴표·작은따옴표를 구분해서 쓰거나 이스케이프(\") 사용 |
| script 태그를 head에 두고 write 남발 | 아직 body가 없어 원하는 위치에 출력이 안 됨 | body 안 원하는 위치에 두거나 로드 이후 실행되게 함 |
| write를 여러 줄로 잘게 쪼개 반복 호출 | 코드 가독성 저하, 어디서 뭐가 붙는지 추적 어려움 | 문자열을 변수(템플릿 리터럴)로 모아 한 번에 write |
| <br>, <mark> 같은 태그를 빼먹고 순수 텍스트로만 씀 | 줄바꿈·강조가 전혀 적용되지 않음 | 출력하려는 태그 문자열을 정확히 포함해서 넘기기 |
| 여는 태그만 쓰고 닫는 태그를 빠뜨림 (예: <h3>만) | 이후 내용까지 그 태그에 휩쓸려 서식이 깨짐 | <h3>…</h3>처럼 여닫기 짝을 문자열 안에서 맞추기 |
핵심 한 줄 요약
Tags
'php' 카테고리의 다른 글
| Canvas 드래그 그리기 완전 정리 (0) | 2026.07.15 |
|---|---|
| JavaScript 알까기 게임 - 랜덤 배치와 타이머 완전 정리 (0) | 2026.07.15 |
| JavaScript innerHTML · this — 내용 교체와 이벤트 대상 완전 정리 (0) | 2026.07.15 |
| JavaScript document 객체 — location·URL·readyState 완전 정리 (0) | 2026.07.15 |
| MySQL SUM 컬럼곱 — 가격×수량 합산 집계 완전 정리 (0) | 2026.07.15 |
댓글