HTML Import to HTML use DOM
- Minwook Kang
- 2016년 4월 27일
- 2분 분량
DOM 을 이용하여 무엇을 할 수 있을까?
나는 서버사이드 언어를 사용하지 않고 HTML을 병합 하고싶다.
HTML과 CSS를 이용하여 메뉴를 구성 하였고 이러한 메뉴는 모든 HTML파일에
수기로 추가해야하는 번거로움, 수정의 번거로움, 관리의 번거로움!!!
이를 해결하기 위하여 서버사이드 랭귀지 처럼 Import를 할 수는 없을까! 에 대한
솔루션을 제공한다.
파일구성
index.html ....... index10.html
menu.html
loadMenu.js
menu.css
<파일간 구성 개념도1>
<파일간 구성 개념도2>
구현 설명
1. index.html 및 메뉴가 나와야하는 모든 파일
menu.html 을 임포트 한다.
loadMenu.js를 참조한다.
loadMenu.js의 함수인 loadMenu()를 호출한다.
2. menu.html
menu.css를 참조한다.
menu.css는 menu.html과 연동되어 메뉴를 프리젠테이션 하는 역활을 한다.
div태그와 class를 이용하며 메뉴를 만든다.
위의 1번과 2번을 만족하면 HTML, JAVASCRIPT , CSS 만으로
메뉴구성 및 효율적 관리를 위한 분리가 가능하다.
풀 소스는 아래와 같다.
----------------------------------------------------------------------
index.html
----------------------------------------------------------------------
<!DOCTYPE html> <html> <meta charset="utf-8"> <title>test</title> <head> <link rel="import" href="menu.html"> <script language='javascript' src="loadMenu.js"></script> </head> <body> <script>loadMenu();</script>
Link Rel="Import" href="filename.html" 을 이용한 메뉴 분리 <br><br> index2.html </body> </html>
----------------------------------------------------------------------
menu.html
----------------------------------------------------------------------
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="menu.css"/> </head> <body> <div class="menu"> <ul> <li><a class="active" href="index2.html">Home</a></li> <li><a href="index3.html">News</a></li> <li class="dropdown"> <a href="index4.html" class="dropbtn">Dropdown</a> <div class="dropdown-content"> <a href="index5.html">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> <li><a href="index3.html">WHO</a></li> </ul> </div> <h3>Dropdown Menu inside a Navigation Bar</h3> <p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body> </html>
----------------------------------------------------------------------
menu.css
----------------------------------------------------------------------
ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; }
li { float: left; }
li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }
li a:hover, .dropdown:hover .dropbtn { background-color: red; }
li.dropdown { display: inline-block; }
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }
.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content { display: block; }
----------------------------------------------------------------------
loadMenu.js
----------------------------------------------------------------------
function loadMenu() { var link = document.querySelector('link[rel="import"]'); var content = link.import;
// Grab DOM from warning.html's document. var el = content.querySelector('.menu');
document.body.appendChild(el.cloneNode(true)); }
Comments