JavaScript / document.title로 브라우저 탭 제목 변경하기

document.title은 현재 문서의 제목을 읽거나 바꾸는 속성입니다. 값을 대입하면 브라우저 탭에 표시되는 제목과 문서의 <title> 요소 내용이 함께 바뀝니다. 현재 열린 문서에 대한 변경이므로 새로고침 후에도 유지할 제목은 HTML의 <title>에 작성하세요.

현재 제목 읽기

HTML 문서는 보통 <head>의 <title> 요소로 초기 제목을 정합니다. 스크립트에서 document.title을 읽으면 현재 제목 문자열을 얻습니다. 브라우저 개발자 도구의 콘솔에서도 확인할 수 있습니다.

// HTML: <title>상품 목록</title>
console.log(document.title); // '상품 목록' 

페이지 본문에 보이는 제목이나 <h1>과 문서 제목은 별개입니다. 탭 제목을 읽으려면 document.title을 사용하세요.

제목 바꾸기와 복원하기

속성에 문자열을 대입하면 현재 문서의 제목이 즉시 바뀝니다. 예를 들어 저장되지 않은 편집 상태를 탭 제목에 표시할 수 있습니다. 이 경우 기존 제목을 변수에 보관해 두면 저장 후 복원할 수 있습니다.

const originalTitle = document.title;
document.title = '편집 중 - ' + originalTitle;
console.log(document.querySelector('title').textContent);
// '편집 중 - '으로 시작하는 제목
document.title = originalTitle;

이 변경은 현재 문서의 DOM에 적용됩니다. 새로고침하면 서버에서 받은 HTML과 그 뒤에 실행되는 스크립트가 다시 제목을 결정합니다. MDN의 document.title 문서와 HTML title 요소 문서에서 두 대상의 관계를 확인할 수 있습니다.

전체 예제: 입력값으로 탭 제목 변경하기

다음 코드를 document-title.html로 저장하고 브라우저에서 엽니다. 제목을 입력해 버튼을 누른 뒤 브라우저 탭과 화면의 “현재 제목”을 비교하세요. 복원 버튼을 누르면 페이지가 처음 로드될 때 저장한 제목으로 돌아갑니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>문서 제목 바꾸기 실습</title>
</head>
<body>
<label for="new-title">새 문서 제목</label>
<input id="new-title" value="새 문서 제목">
<button id="apply" type="button">제목 바꾸기</button>
<button id="restore" type="button">원래 제목 복원</button>
<p id="current" aria-live="polite"></p>
<script>
const originalTitle = document.title;
const input = document.querySelector('#new-title');
const current = document.querySelector('#current');

function showTitle() {
  current.textContent = `현재 제목: ${document.title}`;
}

document.querySelector('#apply').addEventListener('click', () => {
  const title = input.value.trim();
  if (!title) {
    current.textContent = '비어 있지 않은 제목을 입력하세요.';
    return;
  }
  document.title = title;
  showTitle();
});
document.querySelector('#restore').addEventListener('click', () => {
  document.title = originalTitle;
  input.value = originalTitle;
  showTitle();
});
showTitle();
</script>
</body>
</html>

기본 입력으로 제목을 바꾸면 탭과 화면에 모두 “새 문서 제목”이 표시됩니다. 공백만 입력하면 제목은 바뀌지 않고 안내 문구가 나타납니다. 원래 제목 복원 버튼을 눌러 초기 상태로 되돌릴 수 있습니다. 실제 서비스에서는 사용자 입력을 제목에 넣을 때 길이와 표시할 내용도 검토하세요.