페이지 이동에 대한 설명 추가 > jquery

페이지 이동에 대한 설명 추가

작성일 15-07-09 12:00

페이지 정보

작성자서방님 조회 126회 댓글 0건

본문

첫 페이지를 만들고 설명할게 좀 있어서 따로 이야기 하겠다 했는데 그걸 지금 설명 하겠다.

사실 난 설명 하는거 별로 안좋아 하는데.. 이건 설명 하고 넘어가야 할 것 같다.

우선 jquerymobile이 작동하는 방식에 대해서 앞에서 말했다. div 를 이동하는 방식 이라고... (혹자는 ajax 형태로 어쩌고 저쩌고 하는데 개인적으로는 그냥 div 에 id 주고 앵커 이용해서 왔다갔다 하는 방식으로 선택된 id의 div 외에는 모두 hidden 처리 해 버리는 방식이라고 생각 함.. 그게 이해하기 더 편함)

설명하려니 점점 더 복잡해 지는 듯... 이궁.. 역시 아는 것과 알려주는 것은 전혀 별개..

자 우선 제일 처음에 만든 소스에 대해서 먼저 설명 하자면 ...

이러쿵저러쿵(위에,앞에 다 설명 했음 이해 안되면 다시 읽어 보시고...)

이고..

이게 jquerymobile의 기본이자 유일한 방식임...

그럼 우리가 만든 페이지 나누기 방식은 어떻게 되는 것이냐

이 부분 때문에 혹자가 이야기 하는 ajax 어쩌고 저쩌고가 나오는 것이다.

페이지를 나누면 코드는 앞에서 봤던 대로인데, 이걸 jquerymobile녀석이 어떻게 만들어 버리는지를 알아야 할 것이다.

(드림위버cs5.5의 도움을 받았다. ㅋㅋ)

우선 처음 페이지가 열리면 코드는 다음과 같다(꼭 똑같지는 않아도 대충 이렇다는 정도만...)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js" type="text/javascript"></script>
</head>
<body>

<div data-role="page" id="page">
    <div data-role="header">
        <h1>Page one</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview">
            <li><a href="page2.html">Page Two</a></li>
            <li><a href="page3.html">Page Three</a></li>
            <li><a href="page4.html">Page Four</a></li>
        </ul>
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

</body>
</html>

그럼 링크들이 있잖여... 링크를 클릭 한 다음의 코드는(Page Two 링크를 클릭 하겠다.)

<div data-role="page" id="page2">
    <div data-role="header">
        <h1>Page Two</h1>
    </div>
    <div data-role="content">
        Content
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

</body>
</html>

이런식으로 내부적으로 만들어 버린다.

주소창의 주소를 보면 좀 신기한 부분이 있다.

index.html#page2.html

이런식으로 주소가 되어 있을 것이다. 분명 링크는 page2.html 인데 주소에는 엥커가....

이유는 앵커태그(a) 에 대해서 jquerymobile이 먼저 선작업을 해 버린 뒤에 클릭 순간 page2.html를 읽어서 <div data-role="page" ~~~></div> 부분의 내용을 가져와서 현재페이지(index.html)에 삽입 시켜 버리는 방식을 취한다. 그런뒤에 앵커 처리 해서 이동 시키는 방식으로 만들어 버리는 것... 즉 어떻게 만들던지 지가 원하는 방식으로 내부적으로 조작을 해 버린다는 것이다.

그리고 되돌아 가는 기능을 만들어 주지 (좌상단 보면 back 버튼이 만들지도 않았는데 생겨 있는게 보일 것임)

다시 index.html로 돌아가서 Page Four 을 클릭 해보면 만들어지는 코드는

<div data-role="page" id="page4">
    <div data-role="header">
        <h1>Page Four</h1>
    </div>
    <div data-role="content">
        Content
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

처럼 될 것이다. 보면 앞에 클릭했던 page2.html의 코드가 그대로 남아 있는 것을 알 수 있을 것이다..

이런 식으로 클릭하는 순간 새로운 코드를 삽입 하며, 앞에 클릭했던 코드는 그대로 남아 있게 되는것이다.

(*실제로는 훨~~~씬 복잡한 코드가 된다.. 그리고 위 사항은 웹브라우저의 소스보기로는 확인 불가능 하다..*)

이런 내용을 왜 설명 하느냐...

작업을 하다 보면 주의해야 하는 것 2가지가 있기 때문이다.

우선 첫번째는

수정 작업을 하고 올려 놨는데 확인하려고 보면 안바뀌어 있는 경우가 있다.

이유는 한번 클릭하면 내부적으로 코드를 가지고 있어서 다시 클릭 할때는 이미 만들어져 있는 코드로 이동 하기 때문이다.

그리니 새로 작업 한 내역이 있을 때는 index.html 페이지에서 새로고침 한번 해준 뒤에 링크를 클릭 해 봐야 한다.

그리고 두번째는 (이게 설명을 장황하게 한 정말 중요한 이유다.)

각 페이지에서 데이터를 가져올때 <div data-role="page" ~~~></div>의 것만 가져온다는 것이다.

그런데 뭐? 하는 사람이 있을텐데 그렇게 생각 하고 작업 하면.. 왜이래? 하는 상황을 얼마 안가 경험하게 될 것이다.

작업을 하다 보면 각 페이지에 별도로 적용 시키는 css 가 있을 것이다.

그래서 Page Three에만 적용시킬 css 내역이 있어서 page3.html 상단 head 부분에 <link href="/css/page3.css" /> 형태로 넣었다 하자 (javascript도 마찬가지) 그리고 index.html 을 열어서 Page Three 링크를 클릭 했다. 하지만 원하는 대로 보여지지가 않는 것이다. 이유는 page3.html 에 있는 <link href="/css/page3.css" /> 이 부분을 jquerymobile 녀석이 가져오지를 않아서 그렇게 된 것이다. 말했듯 body 부분의 <div data-role="page" ~~~ ></div> 이부분만 쏙쏙 골라서 가져오기 때문이다.

그럼 해결책은 무엇인가.. 뭐 간단하다.. index.html 페이지에 넣어 주는 것이다...

혹시 <div data-role="page" ~~~ ><link href="/css/page3.css" />.....</div> 이런 식으로 넣어주면 안되느냐 하는 사람도 있을지 모르겠는데... 페이지를 ajax로 처리 할때는 css와 js 파일은 다시 로드 시키지 않는다. 그러니 코드가 있어도 로드되지 않아 적용이 안되는 것이다. (css 와 js 파일은 페이지가 처음 로드 될때만 로드 된다.)

그리니 페이지에서 필요한 것이 아니라 사이트에서 필요한 css와 js 파일은 index.html에서 모두 로드 시켜야 한다.

이정도 설명 하면 눈치 빠른 사람은 그럼 index.html 을 제외한 다른 페이지들은 다른 코드 하나도 안쓰고 <div data-role="page" ~~~ ></div> 이부분만 있어도 되겠네.. 라고 생각 할 수도 있겠다.. 물론 정답이다.. 하지만 그 페이지만 따로 떼어서 확인 하거나, 링크를 걸어 주면 .... 대박 ㅋㅋ 그래서 페이지 마다 제대로 갖춘 형태를 취하는 것이 좋다.

그리고 페이지 이동 방식에 대해서 설명을 했으니 자바스크립트에 어느정도 숙달된 사람의 경우 onload 방식은 어떻게 사용 하느냐고 물어 볼 수 있을 텐데. 그 부분에 대해서는 차차 설명 하겠다. 아직 자바스크립트 넣어서 뭘 하는 것 없으니까..

이정도면 이해 가는지?

글을 쓰는 사람들이 대단하다는.... 앞에서도 말했듯 내가 아는 것과 남을 알게 하는 것은 완전 별개의 문제인듯 싶다.

정 이해가 안간다면 하는 수 없다.. 그냥 외워라.. 사이트 전체에 필요한 css 파일은 index.html 에 넣어야 한다. 라고..

댓글목록

등록된 댓글이 없습니다.