모바일 웹 앱에서 페이지의 이동에 대해 공부할 거예요.
페이지 간의 이동은 <a>태그 사용하여 지정할 수 있어요.
페이지 간의 이동은 크게 내부 링크와 외부링크로 이루어 져요.
내부 링크 (#ID) => 하나의 HTML 파일에 정의 된 페이지 간의 이동에 사용.
외부 링크 (파일경로) => 다른 파일에 정의된 페이지 이동에 사용.
내부링크의 예 : <a href=”#ID”>이동</a>
외부링크의 예 : <a href=”Filename.html”>이동</a>
이번에 사용한 링크는 외부 링크로 사용했어요.
외부 링크로 서로 다른 HTML 파일을 연결하였으니 페이지 간의 이동 효과를 알아봐야 겠죠?
페이지의 기본 이동은 Slide 애니메이션과 함께 진행되는데,
만약 팝업 다이얼로그(dialog)처럼 페이지 이동 효과를 주고 싶다면, <a>태그에 data-rel="dialog"속성을 추가하면 되요/
내부링크_슬라이드의 예 : <a href=”#ID” data-rel=”dialog”>열기</a>
외부링크_슬라이드의 예 : <a href=”Filename.html” data-rel=”dialog”>열기</a>
팝업 다이얼로그로 페이지를 열게 되면 기본적으로 닫기 버튼이 Header bar 왼쪽에 자동으로 생성됩니다.
닫기 버튼은 누를 경우, 팝업 페이지는 닫히게 되고 이전의 페이지로 돌아가게 되죠.
때문에 팝업 다이얼로그로 열리는 페이지는 Header bar를 정의하는 <div data-role=”header>가 있어야 하는 것이죠!
팝업 다이얼로그 이동 외의 기본 이동은 이전 페이지로 돌아가는 Back버튼이 자동으로 생성되지 않기 때문에 이전 페이지로 이동하고 싶다면 data-rel=”back” 속성을 가진 <a>태그를 추가하면 됩니다. 이 속성은 주어진 <a>태그의 href 속성은 무시되므로 어떤 값을 넣어도 의미가 없으며, 뒤로 가기에만 충실히 실행되게 되요.