열정과 게으름 사이

html에 인클루드 하기 본문

공부 메모/javaScript

html에 인클루드 하기

현냥이 2021. 10. 25. 17:13

 

 

헤더 수정 할때 마다 반복되는 복붙.....

실무에서도 이러지는 않을 텐데. 그누보드만 봐도 아닌데 했지만.

미처 방식을 알지 못했었으나. 교수님이 수업시간에 쓱 지나가듯 하신 말.

'실무에서는 인클루드해서 쓰지 이렇게 안써요.'

아! 인클루드.

그날 와서 검색해 보고 찾은 방법은 바닐라자바스크립트, 제이쿼리, php,

php도 복붙하면 되기는 하겠지만,

일단은 제이쿼리로 한 페이지라 제이쿼리로 인클루드를 해봤다.

1. 단계

<header> ~ </header>

<footer>~</footer>

부분을  잘라서 각각 새로운 header.html,  footer.html 파일로 만들어 준다.

(나같은 경우는 헤더는 사이드 메뉴도 반복되기 때문에 사이드 메뉴까지 잘라서 새 파일을 만들어 줬다.)

 

2. 단계

  • HTML
 <div data-include1="header" id="header"></div><!--헤더 인클루드-->
 <div data-include2="sideView" id="sideView"></div><!--사이드 메뉴 인클루드-->
 
 <body>
 </body>
 <div data-include3="footer" id="footer" class="clearfix"></div><!--푸터 인클루드-->

 

잘라낸 자리 그 자리로 받아서 들어와야 하니까, 그 자리에 이렇게 박스를 만들어 준다.

 

3. 단계

    <script>
        $(function(){
          var includes1 = $('[data-include1="header"]');
          var includes2 = $('[data-include2="sideView"]');
          var includes3 = $('[data-include3="footer"]');
          jQuery.each(includes1, function(){
             $(this).load('header.html');
          });
          jQuery.each(includes2, function(){
            $(this).load('sideView.html');
          });
          jQuery.each(includes3, function(){
            $(this).load('footer.html');
          });
        });
     </script>

 

</head>전이나 </body>전에 제이쿼리 함수를 불러온다.

 

 

이 글을 참고 했다.

http://daplus.net/javascript-html-%ED%8C%8C%EC%9D%BC%EC%97%90-%EB%8B%A4%EB%A5%B8-html-%ED%8C%8C%EC%9D%BC-%ED%8F%AC%ED%95%A8/

반응형
저작자표시 비영리 변경금지

'공부 메모 > javaScript' 카테고리의 다른 글

자바스크립트 링크 /새 창 크기  (0) 2021.11.06
javascript 자식 노드 추가,삭제,복사  (0) 2021.11.03
시간 줄어드는 타이머 만들기  (0) 2021.10.21
다른페이지로 연결하기  (0) 2021.10.13
자바스크립트 버튼 이벤트  (0) 2021.07.08
'공부 메모/javaScript' Related Articles more
Comments