공통 html을 다른 html파일에서 쓰기, html에 include하는 방법

기본 html로만 작업하다보면 header, footer등과 같이 모든 html에 똑같이 나오는걸 일일히 넣어줘야하나?라는 생각이 들기 시작할것임. 넣는거야 별거아닌데 나중에 한 html파일 20개정도 되는데 header에 뭔가 추가해야한다면 끔_찍... 이에 대한 방법(링크)은 여러가지가 있지만 그나마 뭔가를 안깔고 기본 내에서 할 수 있는거는 이게 제일 유용해서 작성함. 예전에는 php로 했었는뎅 암튼

 

 

파일 구조

파일 구조는 다음과 같음. 파일 구조는 뭐든 상관없음.

 

1. 공통적으로 만들 파일 따로 만들기

나같은 경우 header.html을 생성하여 <ul>이하 태그를 넣어뒀고, index.html에는 <header>까지만 써둠. 이제 자바스크립트로 <header>밑에 <ul>친구들을 넣을 것임.

 

2. script에서 불러와줌

const header = document.querySelector('header');

fetch('./src/component/header.html')
.then(res => res.text())
.then(data => header.innerHTML = data);

header.html, script.js는 둘다 src폴더 아래 어딘가에 있지만, fetch에서 불러오는 url은 메인을 기점으로 작성해야해서 저렇게 작성함(script.js가 기준이였다면 ../component/header.html였음)

 

끗.

 

아 근데 이거 로컬에서 돌리면(vscode에서 live-server이런걸로 localhost로 돌리는거 말고, 진짜 파일탐색기에서 html파일 더블클릭해서 켰을때ㅇㅇ) cors에러나는데, 나중에 깃허브나 어디 배포하면 같은 도메인 내에서 돌아가는거기때문에 에러 안생김