HTML 파일 분리하기

HTML include

1. 링크를 클릭하면 나오는 자바스크립트 코드 복사, include.js 파일을 만든다.

2. html을 나누어 분리한다.

3. index.html에 아래의 코드를 넣어 분리한 파일들을 조합한다.

<div w3-include-html="content.html"></div>

 

 

 

<그림설명>

 

https://www.w3schools.com/howto/howto_html_include.asp

How To Include HTML

 

 

< 발견한 문제 >

 

1.

 

작업 폴더에서 index.html을 클릭해 웹페이지를 실행시켜보면 vscode의 라이브서버에서 띄운 화면과 다르게 파일들이 제대로 뜨지 않는다. 콘솔창을 띄어보니 아래와 같은 오류가 뜬다.

display.html#:1 Access to XMLHttpRequest at 
'file:///C:/Users/H/Desktop/%EB%8C%80%EA%B5%AC%EB%AF%B8%EC%88%A0%EA%B4%80/%EB%8C%80%EA%B5%AC%EB%AF%B8%EC%88%A0%EA%B4%80/pages/header_sub.html' 
from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

 

HTML include 를 실행시키기 위해서는 별도의 서버가 필요하기 때문이다.

(vscode에서는 무리없이 실행되는건 vscode가 가상의 서버를 만들어서 띄우기 때문에 오류가 발생하지 않았던 것)

 

그래서 파일질라에 파일들을 업로드 후 홈페이지를 띄우면 정상적으로 작동된다.

 

 

2.

 

breadcrumbs nav 를 만들기 위해 자바스크립트파일을 include 했는데 먹히지가 않음.

살펴보니 모든 js파일이 먹히지 않는듯. 왜 안되는지 모르겠음.