고정 헤더 영역
상세 컨텐츠
본문
728x90
반응형
SMALL
안녕하세요! 오늘은 자바스크립트를 이용하여 HTML 문서의 제목(title)을 변경하는 방법을 배운 내용을 정리해보려고 합니다. document 객체를 활용하는 방법을 중심으로 설명해볼게요.
1. HTML과 JavaScript의 연결
HTML과 JavaScript는 서로 연결되어 있으며, JavaScript를 사용하면 HTML 요소를 동적으로 변경할 수 있습니다.
이번에 배운 내용 중 중요한 포인트는 HTML 문서의 제목(title)을 변경할 수 있다는 점입니다.
HTML 파일의 기본 구조를 보면 <title> 태그를 이용해 제목을 설정하는 것을 알 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Momentum</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>위 코드에서 <title> 태그의 내용은 "Momentum"으로 설정되어 있습니다.
하지만, JavaScript를 사용하면 이 제목을 변경할 수 있습니다!
2. JavaScript를 이용한 제목 변경
자바스크립트에서 문서(HTML 파일)에 접근하기 위해 document 객체를 사용합니다.
document.title을 변경하면 웹페이지의 제목이 실시간으로 변경됩니다.
document.title = "Hello! everyone";위 코드를 실행하면 브라우저 탭의 제목이 'Hello! everyone'으로 변경됩니다.
즉, document.title을 이용하면 페이지 제목을 쉽게 동적으로 바꿀 수 있습니다.
3. 실습: 버튼 클릭 시 제목 변경하기
자바스크립트를 활용해 버튼을 클릭할 때 제목이 변경되도록 만들어볼 수도 있습니다.
🔹 HTML 코드
<button id="changeTitleBtn">제목 변경</button>🔹 JavaScript 코드
document.getElementById("changeTitleBtn").addEventListener("click", function() {
document.title = "New Title!";
});위 코드를 실행하면 버튼을 클릭할 때마다 문서 제목이 'New Title!'로 변경됩니다.
이를 활용하면 다양한 동적 웹페이지를 만들 수 있습니다.
오늘 배운 내용을 정리하면:
✅ document.title을 이용하면 HTML 문서의 제목을 JavaScript로 변경할 수 있다.
✅ HTML과 JavaScript는 서로 연결되어 있으며, JavaScript를 통해 HTML을 조작할 수 있다.
✅ document 객체를 활용하면 HTML의 다양한 요소를 변경할 수 있다.
728x90
반응형
LIST
'공부 > WEB' 카테고리의 다른 글
| 자바스크립트 이벤트 리스너 심화: window 객체 활용하기 (1) | 2025.02.16 |
|---|---|
| 자바스크립트 이벤트 리스너(Event Listener) 기초 배우기 (1) | 2025.02.16 |
| 자바스크립트 If 조건문 기초: 나이에 따라 술을 살 수 있을까? (1) | 2025.02.09 |
| 자바스크립트 함수에서 return 사용하기 (0) | 2025.02.08 |
| 자바스크립트 함수(Function) 기초 배우기 (1) | 2025.02.02 |
