08-1 원페이지 사이트 만들기

원페이지 사이트는 하나의 사이트를 한 화면에 담는 사이트이다. 페이스북이나 인스타그램처럼 화면을 스크롤해도 계속해서 이전 내용을 불러와 한화면에 보여주는 사이트가 대표적이다

원페이지 사이트는 필요한 내용이 한페이지 안에 다 들어 있어야 한다 그래서 전체 콘텐츠의 양이 많지 않을 때 적합한 레이아웃이다

CSS를 사용해 원페이지 사이트 만들기

• scroll.js 플러그인을 사용해 만든 예시

부드러운 스크롤을 위해 많이 사용하는 플러그인 중 하나에 scrollTo.js 가 있다

이 플러그인을 사용하려면 jQuery 파일과 플러그인 파일을 연결 한 후 다음 소스를 </body> 태그 앞에 삽입하면 된다

<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.scrollTo.min.js"></script>

jQuery 플러그인을 사용해 원 페이지 사이트 만들기

Smint 플러그인

네비게이션의 id를 topNavi로 지정했다면 다음과 같은 문장으로 실행할 수 있다

<script>
	$('#topNavi').smint();
</script>

one page scroll 플러그인

<div id="page">
	<section> </section>
	<section> </section>
	<section> </section>
	<section> </section>
	<section> </section>
</div>	

위와 같은구조로 구정된 경우 </body> 태그 앞에 다음 소스를 넣어주면 스크롤이 가능한 원페이지 사이트를 만들 수 있다

<script>
	$(#page).onepage_scroll();
</script>

fullPage.js 플러그인

플러그인 다운로드 하기 > github.com/alvarotrigo/fullPage.js

원페이지 사이트에서는 화면을 스크롤하면서 내용을 살펴볼 수 있지만, 내비게이션이 있으면 원하는 내용으로 바로 이동할 수 있어서 편리하다

플러그인을 사용하지 않고도 HTML의 앵커를 사용해서 한페이지 안에서 이동하는 메뉴를 만들 수 있다