말랑말랑제리스타일
HTML 파일 소스 나누기 두가지 방법(부트스트랩) 본문
일반적으로 html, css, 자바스크립트를 이용해서 코딩하는 경우 html 파일은 나누기가 힘든 경우가 많습니다. 그러나 공통된 헤더를 사용하거나 부트스트랩 내비게이션 바를 유지한 채 페이지 내부의 일부 영역만 바꾸는 경우 html 파일을 나누는 것이 코드 관리에 훨씬 유리한 경우가 많습니다. 이런 경우 사용 가능한 두 가지 방법을 정리해 봅시다.
부트스트랩 내비게이션 바로 body의 변경 영역만 이동하는 방법
일반적으로 블로그 같은 내용만 바꾸는 사이트의 경우 사용해 볼 수 있는 방법입니다.
사이트를 이동하는 것처럼 body 영역의 html만 바꾸는 방식으로 부트스트랩 내비게이션 바 영역을 그대로 두고 내부 페이지의 html 요소만 바꾸는 방법이죠.
먼저 부트스트랩의 내비게이션 바만 만들어 둔 index.html 파일이고 내비게이션 바의 a 태그에 Page 1, Page 2라는 ID를 달아줬습니다.
index.html 파일
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href = "#" id = "Page1">Page1</a>
<a class="nav-link" href = "#" id = "Page2">Page2</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Page3</a>
</div>
</div>
</div>
</nav>
<div id="content">
</div>
<script src="app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>부트스트랩에서 내비게이션을 복사해서 만든 거라 메뉴에 ID를 붙인 것 외에 특별한 건 없습니다.
그리고 내부에 들어갈 html 내용은 page1.html, page2.html 두 개 파일에 분산해서 간단히 작성했습니다.
그 외에는 bootstrap의 css와 자바스크립트를 끌어오는 영역이 있고 미리 만들어 둔 app.js와 style.css 파일을 포함해 뒀는데 style.css는 아무것도 안 할 거니까 일단 없어도 됩니다.
마지막으로 page1.html, page2.html 파일을 보여줄 곳은 div 영역이고 id를 content라고 붙여뒀습니다.
page1.html 파일, page2.html 파일
page1.html 파일과 page2.html 파일에는 간단한 h1 태그 하나씩만 들어있습니다.
<h1>this is page 1</h1><h1>this is page 2</h1>각각 html1.html 파일과 html2.html 파일입니다.
보시다시피 특별한 게 없죠.
app.js 자바스크립트 파일로 html 이동 구현
이제 app.js 자바스크립트 파일로 html 이동을 구현할 건데요.
정확히는 이동하는 것처럼 구현을 할 겁니다.
Page1 = document.querySelector('#Page1');
Page2 = document.querySelector('#Page2');
content = document.querySelector('#content');
content.innerHTML = '<object type="text/html" data="Page1.html"></object>'
Page1.addEventListener('click', function() {
content.innerHTML = '<object type="text/html" data="Page1.html"></object>'
});
Page2.addEventListener('click', function() {
content.innerHTML = '<object type="text/html" data="Page2.html"></object>'
});Page1, Page2에 각각 ID를 이용해서 index.html 내비게이션 바에 있던 버튼을 가져옵니다.
그리고 page1.html과 page2.html을 번갈아서 보여줄 content div 영역도 ID를 이용해서 가져옵니다.
다음으로 각각 클릭 이벤트를 달아줄 건데, Page1과 2 각각의 click 이벤트로 만들어서 innerHTML 요소로 각각 Page.html 파일을 가져올 겁니다.
<object type="text/html" data="html파일명.html"></object>이렇게 다른 html 파일의 요소를 가져오기 위해서 object 태그를 사용할 수 있습니다.
이걸 바로 content 영역에다가 넣어주는 거죠.
여기까지 작업이 끝나고 index.html 파일을 크롬 등 웹브라우저에 띄워보면 내부 html 요소만 바뀌는 것을 볼 수 있습니다.
상당히 간단하죠.
iframe을 활용해서 html 나누는 방법
두 번째 방법은 iframe을 활용해서 html을 나누는 방법입니다.
page1.html 파일과 page2.html 파일은 따로 손대지 않고 index.html 파일을 약간 바꿔줍니다.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href = "#" id = "Page1">Page1</a>
<a class="nav-link" href = "#" id = "Page2">Page2</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Page3</a>
</div>
</div>
</div>
</nav>
<div id="content">
<iframe src="page1.html" width="100%" height="100%" frameborder="0" id="iframe"></iframe>
</div>
<script src="app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>content div 내부에 iframe이라는 html 요소를 하나 더 만들어줍니다.
width와 height 비율은 원본 비율로 해주고 frameborder는 외부 테두리인데 0으로 맞춰주고 ID를 iframe으로 달아줬습니다.
app.js 파일로 iframe의 src 변경
iframe을 사용하는 경우 app.js 파일은 약간 더 간결해질 수 있습니다.
Page1 = document.querySelector('#Page1');
Page2 = document.querySelector('#Page2');
iframe = document.querySelector('#iframe');
Page1.addEventListener('click', function() {
iframe.src = 'Page1.html';
});
Page2.addEventListener('click', function() {
iframe.src = 'Page2.html';
});iframe 영역의 src만 각각의 html로 바꿔주면 되는 거죠.
이 방법이 간편하고 더 많이 알려진 방법이긴 한데 영역을 innerHtml로 바꾸는 것보다는 많이 잡아먹는 단점이 있습니다.
이렇게 innerHtml 요소를 이용하는 방법과 iframe을 이용하는 방법, 두 가지로 html 파일을 나누는 방법을 소개해드렸는데요.
추가로 Jquery를 이용하는 방법도 있지만 개인적으로 Jquery를 잘 안 쓰기 때문에 일단은 제외했습니다.
뭐 어떤 방법이든 html 요소를 나누어서 관리하는 쪽이 효율적이라면 이런 방식으로 나누어 관리할 수 있습니다.
'프로그래밍 > 웹코딩(html&JS)' 카테고리의 다른 글
| 어떤 npm을 설치해야될지 고민될 때 유용한 사이트 (0) | 2023.10.06 |
|---|---|
| 리액트 5.0 이상 버전 사용시 "webpack < 5 used" 에러 조치 방법 (0) | 2023.10.05 |
| 깃허브 코파일럿 자바스크립트 한 달 사용 후기 (0) | 2023.08.17 |
| 웹사이트 만들기부터 무료 배포까지 30분만에 뚝딱 (0) | 2023.07.13 |
| 구름 IDE에서 React 프로젝트 생성하고 실행 (0) | 2023.06.23 |
