* header footer를 include하는 제이쿼리 load메서드
header footer 만들고 index.html에 include 하기
// header.html
<header>
<h1>header</h1>
</header>
// footer.html
<footer>
<h1>footer</h1>
</footer>
절대경로, 제이쿼리 load()메서드는 서버환경에서만 돌아간다.
vscode에서 live server == 서버환경
윈도우 탐색기에서 더블클릭 == 로컬
// index.html
<body>
<div class="container">
<!-- header include -->
<div class="header-include"></div>
<section>
<h1>section</h1>
</section>
<!-- footer include -->
<div class="footer-include"></div>
</div>
<script>
$('.header-include').load('header.html', function() {
$('header h1').click(function() {
alert('hi');
});
});
$('.footer-include').load('footer.html');
</script>
</body>
</html>
<script>
$('.header-include').load('header.html', function() {
$('header h1').click(function() {
alert('hi');
});
});
$('.footer-include').load('footer.html');
$('header h1').click(function() {
alert('Hello');
});
</script>
// $('header h1').click(function() {
// alert('Hello');
// });
마지막줄은 실행이 안된다. header h1은 header.html안에 있고
load()가 실행되면 html css만 로드되고 끝나서 alert()가 실행되지 않는다.
// 콜백함수 로 작성하기
콜백은 다른함수가 실행을 끝낸 뒤 실행되는 callback되는 함수를 말한다.
$('.header-include').load('header.html', function() {
$('header h1').click(function() {
alert('hi');
});
// index.css
* {
box-sizing: border-box;
}
.container {
background-color: #fff;
text-align: center;
}
header,
footer {
height: 100px;
line-height: 100px;
background-color: teal;
}
section {
background-color: gold;
height: calc(100vh - 200px);
line-height: calc(100vh - 200px);
font-size: 1.5em;
}스크롤이 안생기게 하려면 전체height에서 header footer 100px씩 빼야 한다.
'Web > Java Script' 카테고리의 다른 글
| [js 독학백서] 기초 문법 part. 2 ( 조건문, 반복문, 함수) (0) | 2021.12.23 |
|---|---|
| [js 독학백서] 기초 문법 part. 1 ( 변수, 타입, 연산자 ) (0) | 2021.12.22 |
| [ Wow js ] 스크롤하면 시작되는 애니메이션 (0) | 2021.08.10 |
| 인라인 자바스크립트 - onclick even (0) | 2021.07.23 |
| jquery - 오디오 볼륨 조절 (0) | 2021.07.20 |