document.title 속성이란?
JavaScript에서 document.title 속성은 현재 HTML 문서의 제목(title)을 읽거나 새로운 값으로 설정할 때 사용합니다. 이 속성은 브라우저 탭에 표시되는 제목과 직접 연결되어 있으며, 페이지 로딩 후에도 동적으로 변경할 수 있다는 점이 큰 장점입니다.
예를 들어, 사용자가 새로운 콘텐츠를 열거나 알림이 도착했을 때 탭 제목을 실시간으로 바꾸는 기능을 구현할 수 있습니다.
기본 사용 예제
다음 코드를 실행하면 document.title 속성으로 현재 문서의 제목을 가져와 화면에 출력하는 과정을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Demo Title</title>
</head>
<body>
<script>
var x = document.title;
document.write("Our Title: " + x);
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 브라우저 화면에 다음과 같이 출력됩니다.
Our Title: Demo Title
문서 제목 변경하기
document.title 속성은 값을 읽어오는 것뿐만 아니라 새로운 문자열을 할당하여 제목을 변경할 수도 있습니다.
// 문서 제목 변경
document.title = "새로운 페이지 제목";
이처럼 간단한 한 줄의 코드만으로 브라우저 탭의 제목이 즉시 업데이트되므로, SPA(싱글 페이지 애플리케이션)에서 페이지 전환 시 제목을 갱신하는 용도로 널리 활용됩니다.