html을 쭉 작성하다보면, 페이지별로 공통적인 부분이 존재한다.
이를 따로 파일화 하는 것을 모듈화 라고 한다.
따로 파일로 빼서 , 공통부분은 그 파일을 참조해서 만들어라 라고 하는 것이다.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-compatible" content="chrome=1,IE=edge">
<script type="text/javascript" src="/../js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function () {
$("#header").load("/../html/menu.html", function () {
//페이지 별로 다른 메뉴 css 적용도 가능
document.getElementById("sub_nav").classList.add("show");
});
})
</script>
</head>
<body>
<div id='header'></div> // 이 부분에 import 한 menu가 들어가게 되는 것이다.
<article>
<div class="contents"> 내용 </div>
</article>
</body>
자주 사용하게 되어 따로 빼둔 html파일은 menu.html 이다.
html에 header라는 id로 div를 만들어 둔다. (menu.html)이 들어가게 될 구멍이라고 보면 된다.
$(document).ready(function() {
-> 페이지가 로딩 되면 실행하라 라는 함수이므로, 로딩과 동시에 menu.html을 심으세요@!!
라는 뜻이라고 생각하면 된다.
'programming' 카테고리의 다른 글
| [Web] css 한 줄에 여러가지 색깔 넣기 (0) | 2022.01.17 |
|---|---|
| [Web] ajax로 불러온 요소(element)에 접근하기 (0) | 2022.01.12 |
| [Python] 아나콘다 가상환경 이름 바꾸기(Change the name of the virtual env in Anaconda) (0) | 2022.01.11 |
| [Python] 아나콘다 32비트 가상환경 만들고 파이참에서 사용하기 (Making 32bit Python in Anaconda & Using virtual env in Pycharm) (0) | 2022.01.10 |
| [Python] 네이버 이미지 크롤링하기 (0) | 2022.01.04 |
