HTML Page 이동

5월 18~19일 해커톤 행사(SDF 2015) 멘토로 참여했다.

여러 질문들이 많았지만 생각나는 것 몇가지들을 공유하고자 한다.

그 중 하나가 page이동 관련이었다.

많은 분들이 page이동을 구현하기 위해 page마다 HTML파일을 만들었다.

그리고 a태그 href속성을 이용하여 page이동을 하였다.

근데 내가 생각할 땐 이럴경우 많아지는 html파일들을 비롯해 불필요한 resource들이 많아진다.

그래서 추천한게 <div>태그에 id값을 주어 하나의 page로 만들어 사용하는 것이다.

예를들어

<div id="page1">

    //page1 

</div>

<div id="page2">

    //page2

</div>

하나의 HTML파일안에서 위처럼 두개의 div 태그를 사용한다.

그리고 style에서 display 속성값을 "block" 혹은 "none"  값을 주어 div태그를 숨기거나 표시한다.

이런 방식으로 page이동을 하면서 한가지 더

page navigation관리만 해주는 것이다.

dinamic으로는 다음과 같이 할 수 있다.

document.querySelector("#page1").style.display = "block";