728x90
반응형
일반적으로 헤더와 푸터는 웹 페이지의 여러 부분에서 공통적으로 사용되므로, 반복적인 코드를 피하기 위해 외부 파일에서 불러와서 사용하는 것이 효율적입니다.
먼저, HTML 파일에서는 헤더와 푸터를 별도의 파일로 분리하고, 각 파일을 불러오는 코드를 작성합니다. 예를 들어, 헤더를 "header.html" 파일로 분리하고, 푸터를 "footer.html" 파일로 분리한 경우, 다음과 같은 코드를 작성할 수 있습니다.
header.html
<div class="header">
<h1>My Page</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
footer.html
<footer>
<div class="f-logo"><img src="./img/logo.png" alt="logo"></div>
<p class="copyright">ⓒ2022 page INC. All Rights Reserved</p>
</footer>
index.html
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<div id="header"></div>
<div id="content">
<p>This is the content of the page.</p>
</div>
<div id="footer"></div>
<script>
$(function() {
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</body>
</html>
jQuery 라이브러리를 사용하여 load() 메서드를 호출하고 있습니다. load() 메서드는 AJAX를 사용하여 지정된 파일을 비동기적으로 로드하고, 지정된 요소에 내용을 삽입합니다.
이렇게 분리된 헤더와 푸터는 여러 페이지에서 공통적으로 사용되므로, 수정이 필요한 경우 해당 파일만 수정하면 모든 페이지에서 변경된 내용이 적용됩니다. 또한 자바스크립트를 사용하여 동적으로 헤더와 푸터를 조작할 수도 있습니다.
728x90
반응형
'JS' 카테고리의 다른 글
| [javascript] javascript에서 배열에 같은 값을 추가 하지 않기 (0) | 2023.03.31 |
|---|---|
| [javascript] JavaScript를 사용하여 쿠키 생성 (0) | 2023.03.31 |
| [javascript] js 브라우저 뒤로가기 이벤트 발생 시키기 (0) | 2023.03.29 |
| [JS] 인터넷 연결 확인 (0) | 2023.03.22 |
| [jquery] checkbox 체크된 값 개수 가져오기 (0) | 2022.11.25 |
