jQuery Mobile — rel="external" 외부 페이지 새 로드 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile — rel="external"
외부 페이지 새 로드

표준 HTML 속성으로 jQM의 ajax 처리를 우회

시작 오늘 분석할 코드

page2에서 page3으로 이동할 때 rel="external"을 붙여 전체 페이지 새 로드를 강제한다. 같은 효과를 내는 data-ajax="false"와 비교 학습용.

<div data-role="page" id="page2" data-title="페이지2"> <div data-role="header"><h1>두번째 페이지</h1></div> <div data-role="content"> <a href="page3-ex-link.html" rel="external">페이지3</a> </div> </div>

용어 용어 정리

rel="external""외부 사이트로 가는 링크" 표준 속성

jQM 인식jQM은 rel=external을 보면 ajax 안 씀

data-titlejQM이 페이지 제목으로 사용

표준 속성HTML 명세에 정의된 속성

---

1 rel 속성이란?

rel은 link/anchor 요소에서 "링크의 관계"를 나타내는 표준 HTML 속성이다. 검색엔진과 브라우저가 링크의 의도를 파악하는 데 쓰인다.

rel 값	의미
external	외부 사이트로 가는 링크
nofollow	검색엔진이 링크 따라가지 말 것
noopener	새 창 열 때 부모 창 정보 차단 (보안)
noreferrer	referrer 헤더 안 보냄 (개인정보)
stylesheet	link 태그에서 CSS 파일임을 표시

---

2 rel="external" vs data-ajax="false"

data-ajax="false"

jQM 전용 속성. 의도가 명시적이지만 다른 브라우저는 무시.

rel="external"

표준 HTML. SEO·접근성에 의미 있는 정보 추가. jQM도 인식.

※ 두 속성의 결과는 동일하지만 rel="external"이 더 추천. 표준 속성이라 다른 도구도 정보를 활용할 수 있음.

---

반응형

3 자주 하는 실수

실수	증상	해결
rel="external" 누락	외부 파일 ajax 로드 시 스타일 깨짐	외부 jQM 페이지 링크에 추가
일반 페이지에 ajax 적용	링크가 깨지거나 빈 화면	jQM 페이지가 아니면 external 추가
target="_blank"와 헷갈림	의도와 다른 동작	새 창 = _blank, 그냥 새 로드 = external

---

핵심 한 줄 요약

rel="external"표준 HTML — 외부 사이트 링크 표시

jQM 동작ajax 안 쓰고 일반 페이지 로드

vs data-ajax결과 같음 — rel이 표준이라 우선 추천

유사 relnofollow · noopener · noreferrer

Tags

#jQueryMobile #rel-external #rel속성 #data-ajax #외부링크 #nofollow #noopener #noreferrer #jQM #페이지로드 #모바일웹 #jQuery #웹표준 #웹개발 #HTML #티스토리

▼ 티스토리 태그 입력란 복사용

jQueryMobile, rel-external, rel속성, data-ajax, 외부링크, nofollow, noopener, noreferrer, jQM, 페이지로드, 모바일웹, jQuery, 웹표준, 웹개발, HTML, 티스토리