header와 footer 영역을 전체 공통으로 분리하여 사용하기(aka. 공통으로 노출되는 영역 만들기)
일반적으로 헤더와 푸터 영역은 전체 공통 영역이다.
개발자의 용어를 빌리자면 전역 태그, 글로벌 태그라고도 부른다.
전역/글로벌 이란 표현은 어디서든 공통적으로 사용할 수 있는 것을 말한다. 변수나, 속성, 태그가 여기에 해당된다.
아무튼 전체 공통으로 들어가는 요소이기 때문에 매번 같은 코딩을 복붙해도 되지만, 그러면 코드가 너무 길어진다.
그리고 유지보수에도 힘들어진다. 나중에 헤더 영역의 작은 글자 하나 바꾸려 해도, 전체 html을 수정해야 하는 경우가 생긴다.
그래서 보통 header와 footer는 따로 html화하여 관리한다.
그래야 GTM, GA4 같은 로그분석기 스크립트를 심을 때, 전체 공통으로 심을 수 있다.
(header나 footer html 파일 1개에만 스크립트를 심으면 전체 적용되기 때문이다. 이는 이미 전체 페이지에서 header.html, footer.html을 불러오는 함수가 있기 때문이다.)
고로 아래 파일과 같이 header와 footer를 나눴다.
그리고 모든 페이지에 다음과 같이 스크립트를 작성하면 된다.
container 영역에 원래 페이지에 나올 내용을 작성하면 되고, id값이 header인 곳과 footer인 곳은 공통으로 가져가야 한다.
<body>
<!-- header 영역 -->
<div id="header"></div>
<div class="container">
<!-- 다른 콘텐츠 영역 영역 -->
</div>
<!-- footer 영역 -->
<div id="footer"></div>
<!-- header, footer 불러오기 -->
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
})
</script>
</body>
함수는 위 스크립트처럼 마지막에 넣어도되지만, ready()나 onload()함수를 활용해 문서가 로드되었을 때, 특정 작업을 수행하라고 할 수 있다.
<script>
$(document).ready(function(){
$("#header").load("header.html");
}
window.onload = function(){
$("#footer").load("footer.html");
}
</script>
ready 함수와 onload 함수는 실행되는 시점에 차이가 있다.
ready()함수는 html문서의 DOM 구조가 완성된 이후에 실행되지만, onload()함수는 html에 포함된 모든 자원(이미지, 스타일시트 등 포함)이 로드된 이후에 실행된다.
그렇기 때문에 ready()함수가 이 경우는 적합하다.
onload()함수는 보통 이미지나 비디오 같은 자원을 로딩하는 작업에 적합하다.
고로 쓴다면 아래와 같이 쓰는 게 맞다.
<script>
$(document).ready(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
}
</script>
마찬가지로 body 영역에서 공통으로 노출되어야 하는 배너나 콘텐츠가 있다면, header와 footer처럼 만들면 된다.
1. body 안에 div로 영역 만들기.(특정 id값 설정 필수)
2. 함수로 해당 id값을 불러오도록 ready 함수 안에 load 메소드를 사용하기