jQuery Mobile로 모바일 웹 사이트 만들기

콘텐츠

• 단일 HTML 파일에 여러 페이지를 코딩하는 방법
• 기술
• 대화 상자 및 전환을 사용하는 방법
• 사용할 수있는 전환
• 기술
• 버튼을 만드는 방법
• 기술
• 내비게이션 바를 만드는 방법
• 내비게이션 바에 HTML을 코딩하는 방법 :
• jQuery Mobile로 콘텐츠 형식을 지정하는 방법
• jQuery Mobile이 사용하는 기본 스타일
• 기술
• HTML 요소에 테마를 적용하는 방법
• 테마를 적용하는 두 가지 방법 :
• 기술
• 원근법

이것은 15 장에서 발췌 한 것입니다. Murach의 HTML5 및 CSS3 Zak Ruvalcaba와 Anne Boehm.

jQuery Mobile은 모바일 웹 사이트 개발에 사용할 수있는 무료 오픈 소스 크로스 플랫폼 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 기본 모바일 애플리케이션의 페이지처럼 보이고 느껴지는 페이지를 만들 수 있습니다.

jQuery Mobile은 현재 베타 테스트 버전으로 제공되지만이 버전은 이미 우수한 모바일 웹 사이트를 개발하는 데 필요한 모든 기능을 제공합니다. 결과적으로 즉시 사용을 시작할 수 있습니다. 또한이 버전이 지속적으로 향상 될 것으로 예상 할 수 있으므로 jQuery Mobile은 더 좋아질 것입니다.

이 기사에서는 모바일 웹 사이트의 페이지를 만드는 기본 기술을 배웁니다. 여기에는 대화 상자, 단추 및 탐색 모음의 사용이 포함됩니다.

단일 HTML 파일에 여러 페이지를 코딩하는 방법

화면 웹 사이트 용 웹 페이지를 개발하는 방식과 달리 jQuery Mobile을 사용하면 단일 HTML 파일에 여러 페이지를 만들 수 있습니다. 이것은 그림 15-7에 설명되어 있습니다. 여기에서 이러한 페이지에 대한 HTML과 함께 사이트의 두 페이지를 볼 수 있습니다. 놀라운 점은 두 페이지가 하나의 HTML 파일 내에 코딩된다는 것입니다.

각 페이지에 대해 data-role 속성 값으로 "page"를 사용하여 하나의 div 요소를 코딩합니다. 그런 다음 각 div 요소 내에서 각 페이지의 머리글, 콘텐츠 및 바닥 글에 대한 div 요소를 코딩합니다. 나중에 HTML 파일이로드되면 파일 본문의 첫 번째 페이지가 표시됩니다.

HTML 파일의 페이지 사이를 연결하려면 7 장의 그림 7-11에 표시된대로 자리 표시자를 사용합니다. 예를 들어이 예제의 첫 번째 페이지에있는 a> 요소는 사용자가 탭을 누르면 "#toobin"으로 이동합니다. 이 링크의 콘텐츠로 코딩 된 h2 또는 img 요소. 이것은 id 속성으로 "toobin"이있는 div 요소를 참조합니다. 즉, 링크를 누르면 독자가 파일의 두 번째 페이지로 이동합니다.

이 예에서는 두 페이지 만 표시하지만 단일 HTML 파일 내에 여러 페이지를 코딩 할 수 있습니다. 그러나 이미지, JavaScript 및 CSS 파일과 함께 모든 페이지가 단일 HTML 파일로로드된다는 점을 기억하십시오. 결과적으로 단일 파일에 너무 많은 페이지를 저장하면로드 시간이 과도 해집니다. 이 경우 페이지를 둘 이상의 HTML 파일로 나눌 수 있습니다.

하나의 HTML 파일 본문에있는 두 페이지에 대한 HTML :

div data-role = "page"> header data-role = "header"> h1> SJV Town Hall / h1> / header> section data-role = "content"> h3> 2011-2012 연사 / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 2011 년 10 월 19 일 / h4> img src = "images / toobin75.webp"alt = "Jeffrey Toobin"> / a>!-나머지 연사를위한 요소- -> / section> footer data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page"id = "toobin"> 헤더 data-role = "header"> h1> SJV Town Hall / h1> / header> section data-role = "content"> h3> The Supreme Nine : br> Black Robed Secrets / h3> img src = "images / toobin_court.cnn.webp"alt = "제프리 Toobin "> p> 비평가들의 극찬을받은 베스트셀러 i> The Nine :!-THE COPY CONTINUES-> / section> footer data-role ="footer "> h4> © 2011 / h4> / footer> / div>

기술

• jQuery Mobile을 사용할 때 각 페이지에 대해 별도의 HTML 파일을 개발할 필요가 없습니다. 대신 단일 HTML 파일의 body 요소 내에서 data-role 속성이 "page"로 설정된 각 페이지에 대해 하나의 div 요소를 코딩합니다.
• 각 div 요소에 대해 id 속성을 다른 페이지의 a> 요소에있는 href 속성이 액세스 할 수있는 자리 표시 자 값으로 설정합니다.

대화 상자 및 전환을 사용하는 방법

그림 15-8은 링크를 누를 때 열리는 대화 상자를 만드는 방법을 보여줍니다. 이를 위해 다른 페이지와 마찬가지로 대화 상자를 코딩합니다. 그러나 해당 페이지로 이동하는 a> 요소에서 "dialog"를 값으로 사용하여 data-rel 속성을 코딩합니다.

이 그림의 예에서 볼 수 있듯이 jQuery Mobile CSS 파일은 일반 웹 페이지와 다르게 대화 상자의 형식을 지정합니다. 기본적으로 대화 상자에는 흰색 전경 텍스트가있는 어두운 배경이 있으며 머리글과 바닥 글은 페이지 너비에 걸쳐 있지 않습니다. 또한 대화 상자의 헤더에는 사용자가 이전 페이지로 돌아가려면 탭해야하는 "X"가 있습니다.

다른 페이지 또는 대화 상자로 이동하는 a> 요소를 코딩 할 때 data-transition 속성을 사용하여이 그림의 표에 요약 된 6 개의 전환 중 하나를 지정할 수도 있습니다. 이러한 각 전환은 iPhone과 같은 모바일 장치에서 사용하는 효과를 모방하기위한 것입니다.

사용할 수있는 전환

페이지를 "팝"전환이있는 대화 상자로 여는 HTML :

a href = "# toobin"data-rel = "dialog"data-transition = "pop">

"페이드"전환으로 페이지를 여는 HTML :

a href = "# toobin"data-transition = "fade">

기술

• 에 대한 HTML 대화 상자 모든 페이지가 코딩되는 방식으로 코딩됩니다. 그러나 페이지로 연결되는 a> 요소에는 값으로 "dialog"가있는 data-rel 속성이 포함됩니다. 대화 상자를 닫으려면 사용자가 상자 헤더의 X를 탭합니다.
• 페이지 또는 대화 상자가 열리는 방식을 지정하려면 위 표의 값 중 하나와 함께 data-transition 속성을 사용할 수 있습니다. 장치가 지정한 전환을 지원하지 않는 경우 속성이 무시됩니다.
• 대화 상자의 스타일은 jQuery Mobile CSS 파일에 의해 수행됩니다.

버튼을 만드는 방법

그림 15-9는 버튼을 사용하여 한 페이지에서 다른 페이지로 이동하는 방법을 보여줍니다. 이를 위해 a> 요소에 대한 data-role 속성을 "button"으로 설정하면 jQuery Mobile이 나머지 작업을 수행합니다.
그러나 버튼에 대한 다른 속성도 설정할 수 있습니다. 예를 들어이 그림의 처음 두 개의 버튼처럼 두 개 이상의 버튼을 나란히 표시하려면 data-inline 속성을 "true"로 설정할 수 있습니다.

jQuery Mobile에서 제공하는 18 개의 아이콘 중 하나를 버튼에 추가하려면 data-icon 속성도 코딩합니다. 예를 들어,이 예제에서 세 번째 버튼은 "삭제"아이콘을 사용하고 네 번째 버튼은 "홈"아이콘을 사용합니다. 이러한 모든 아이콘은 기본 모바일 응용 프로그램에서 볼 수있는 아이콘처럼 보입니다. 참고로 이러한 아이콘은 페이지가 액세스해야하는 별도의 파일이 아닙니다. 대신 jQuery Mobile 라이브러리에서 제공합니다.

이 그림의 Yes, No 및 Maybe 버튼과 같이 두 개 이상의 버튼을 가로로 그룹화하려는 경우 데이터 역할 속성으로 "controlgroup"이있는 div 요소 내의 버튼에 대한 a> 요소를 코딩 할 수 있습니다. 데이터 유형 속성으로 "horizontal". 또는 버튼을 수직으로 그룹화하려면 데이터 유형 속성을 "수직"으로 변경할 수 있습니다.

버튼의 data-rel 속성을 "back"으로 설정하고 href 속성을 파운드 기호 (#)로 설정하면 버튼이 해당 버튼을 호출 한 페이지로 돌아갑니다. 즉, 버튼은 뒤로 버튼처럼 작동합니다. 이는 페이지 콘텐츠의 마지막 버튼으로 표시됩니다.

마지막 두 개의 버튼은 페이지의 바닥 글에 버튼이 어떻게 나타나는지 보여줍니다. 여기에서 아이콘과 텍스트는 검정색 배경에 흰색입니다. 이 경우 바닥 글의 클래스 속성이 "ui-bar"로 설정되어 바닥 글 내용 주위에 약간 더 많은 공간을 두어야 함을 jQuery Mobile에 알립니다. 이에 대한 자세한 내용은 그림 15-12에서 확인할 수 있습니다.

섹션의 버튼에 대한 HTML :

!-인라인 버튼의 경우 data-line 속성을 true로 설정합니다.-> a href = "#"data-role = "button"data-inline = "true"> 취소 / a> a href = "#"데이터 -role = "button"data-inline = "true"> OK / a>!-버튼에 아이콘을 추가하려면 data-icon 속성을 사용하세요.-> a href = "#"data-role = "button "data-icon ="delete "> 삭제 / a> a href ="# "data-role ="button "data-icon ="home "> Home / a>!-버튼을 그룹화하려면 div 요소를 뒤에 오는 속성-> div data-role = "controlgroup"data-type = "horizontal"> a href = "#"data-role = "button"data-icon = "check"> 예 / a> a href = "#"data-role = "button"data-icon = "arrow-d"> 아니요 / a> a href = "#"data-role = "button"> 미정 / a> / div>!-받는 사람 뒤로 버튼을 코딩하고 data-rel 속성을 뒤로 설정-> a href = "#"data-role = "button"dat-rel = "back"data-icon = "back"> 이전 페이지로 돌아 가기 / a >

바닥 글의 버튼에 대한 HTML :

footer data-role = "footer"> a href = "http://www.facebook.com"data-role = "button"data-icon = "plus"> Facebook에 추가 / a> a href = "http : //www.twitter.com "data-role ="button "data-icon ="plus ">이 페이지 트윗하기 / a> / footer>

기술

• 웹 페이지에 버튼을 추가하려면 데이터 역할 속성이 "버튼"으로 설정된 a> 요소를 코딩합니다.

내비게이션 바를 만드는 방법

그림 15-10은 웹 페이지에 탐색 모음을 추가하는 방법을 보여줍니다. 이를 위해 데이터 역할이 "navbar"로 설정된 div 요소를 코딩합니다. 이 요소 내에서 탐색 모음의 항목에 대한 a> 요소를 포함하는 li 요소를 포함하는 ul 요소를 코딩합니다. 그러나 a> 요소에 대해서는 data-role 속성을 코딩하지 않습니다.

탐색 모음에서 항목의 색상을 변경하기 위해이 예제의 코드에는 각 항목에 대한 data-theme-b 속성이 포함됩니다. 결과적으로 jQuery Mobile은 각 항목의 배경색을 기본값 인 검은 색에서 매력적인 파란색으로 변경합니다. 또한이 코드는 활성 버튼의 클래스 속성을 "ui-btn-active"로 설정하여 jQuery Mobile이 활성 버튼의 색상을 밝은 파란색으로 변경합니다. 이것은 jQuery Mobile에서 사용하는 형식을 변경하는 방법을 보여 주며, 다음에 대해 자세히 알아볼 것입니다.

내비게이션 바의 HTML :

header data-role = "header"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home"data-icon = "home"data-theme = "b "> 홈 / a> / li> li> a href ="# speakers "data-icon ="star "data-theme ="b "> 스피커 / a> / li> li> a href ="# contactus data- icon = "grid"data-theme = "b"> 문의 / a> / li> / ul> / div> / header>

내비게이션 바에 HTML을 코딩하는 방법 :

• 헤더 요소 내에 div 요소를 코딩합니다. 그런 다음 div 요소의 데이터 역할 속성을 "navbar"로 설정합니다.
• div 요소 내에서 각 링크에 대해 하나의 li 요소를 포함하는 ul 요소를 코딩하십시오.
• 각 li 요소 내에서 링크가 이동해야하는 페이지의 자리 표시자를 사용하는 href 속성으로 a> 요소를 코딩합니다. 그런 다음 데이터 아이콘 속성을 선택한 아이콘으로 설정합니다.
• 탐색 모음의 활성 항목에 대해 클래스 속성을 "ui-btn-active"로 설정하십시오.그러면이 항목의 색상이 탐색 모음의 다른 항목보다 더 밝아집니다.
• 또한 탐색 모음의 각 항목에 jQuery Mobile 테마를 적용하려면 data-theme 속성을 사용해야합니다. 그렇지 않으면 막대의 버튼이 나머지 헤더와 같은 색상이됩니다. 테마 적용에 대한 자세한 내용은 그림 15-12를 참조하십시오.

jQuery Mobile로 콘텐츠 형식을 지정하는 방법

이미 보셨 듯이 jQuery Mobile은 자체 스타일 시트를 기반으로 웹 페이지의 구성 요소를 자동으로 포맷합니다. 이제 jQuery Mobile에서 사용하는 기본 스타일을 조정하는 방법과 이에 대해 자세히 알아 봅니다.

jQuery Mobile이 사용하는 기본 스타일

그림 15-13은 jQuery Mobile이 일반적인 HTML 요소에 사용하는 기본 스타일을 보여줍니다. 모든 스타일에 대해 jQuery Mobile은 브라우저의 렌더링 엔진에 의존하므로 자체 스타일이 최소화됩니다. 이렇게하면로드 시간이 빨라지고 과도한 CSS가 페이지에 부과하는 오버 헤드가 최소화됩니다.

보시다시피 jQuery Mobile의 스타일은 매우 효과적이므로 자체 CSS 스타일 시트를 제공하여 스타일을 수정할 필요가 없습니다. 예를 들어, 순서가 지정되지 않은 목록의 항목 사이의 간격과 표 서식은 모두 허용됩니다. 또한 회색 배경의 검은 색 유형은 기본 모바일 애플리케이션의 형식과 일치합니다.

기술

• 기본적으로 jQuery Mobile은 페이지의 HTML 요소에 스타일을 자동으로 적용합니다. 이러한 스타일은 매력적일뿐만 아니라 브라우저의 기본 스타일을 모방합니다.
• 기본적으로 jQuery Mobile은 각 모바일 페이지의 왼쪽, 오른쪽, 위쪽 및 아래쪽에 약간의 패딩을 적용합니다.
• 기본적으로 링크는 일반 텍스트보다 약간 큽니다. 이렇게하면 사용자가 링크를 더 쉽게 탭할 수 있습니다.
• 기본적으로 링크에는 글꼴 색상으로 파란색 밑줄이 표시됩니다.

HTML 요소에 테마를 적용하는 방법

경우에 따라 jQuery Mobile에서 사용하는 기본 스타일을 변경해야합니다. 이미 그림 15-10의 탐색 모음에서 확인했습니다. 기본 스타일을 변경하려면 jQuery Mobile에서 제공하는 5 가지 테마를 사용할 수 있습니다. 이는 그림 15-12에 요약되어 있습니다. 여기서도 이러한 테마는 기본 모바일 애플리케이션의 모양을 모방하기위한 것입니다.

테마를 적용하는 한 가지 방법은 테마 문자를 값으로 사용하여 data-theme 속성을 코딩하는 것입니다. 그림 15-10의 탐색 모음에서 이것을 보았고이 그림의 두 번째 탐색 모음 코드에서이를 볼 수 있습니다. 여기서 data-theme 속성은 테마 "e"를 헤더에 적용하고 테마 "d"를 탐색 모음의 항목에 적용합니다.

테마를 적용하는 다른 방법은 요소의 클래스 속성을 테마를 나타내는 클래스 이름으로 설정하는 것입니다. 이것은 표 다음의 첫 번째 예에서 설명됩니다. 여기서 class 속성은 "ui-bar"및 "ui-bar- b"클래스를 div 요소에 적용하는 데 사용됩니다. 결과적으로 jQuery Mobile은 먼저 막대의 기본 스타일을 요소에 적용한 다음 b 테마를 해당 스타일에 적용합니다. 다음 페이지에서 이러한 유형의 스타일에 대한 다른 예를 볼 수 있습니다.

이 그림의 표에는 테마 e를 아껴 사용하는 것으로 나와 있습니다. 항목을 강조하는 데는 괜찮은 오렌지색을 사용하지만 다량으로는 매력적이지 않기 때문입니다. 이것은이 그림의 두 번째 머리글 및 탐색 모음으로 설명되며, 색상으로 볼 때 흔들리는 경향이 있습니다.

일반적으로 함께 잘 작동하는 기본 스타일과 처음 세 가지 테마를 유지하는 것이 가장 좋습니다. 그런 다음 더 필요하다고 생각 될 때 테마 d와 e로 실험 할 수 있습니다.

두 번째 헤더 및 탐색 모음의 HTML :

header data-role = "header"data-theme = "e"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home"data-icon = "home "data-theme ="d "> 홈 / a> / li> li> a href ="# speakers "data-icon ="star "data-theme ="d "> 스피커 / a> / li> li> a href = "# news"id = "news"data-icon = "grid"data-theme = "d"> 뉴스 / a> / li> / ul> / div> / header>

5 가지 jQuery Mobile 테마 :

테마를 적용하는 두 가지 방법 :

데이터 테마 속성 사용 :

li> a href = "# home"data-icon = "home"data-theme = "b"> 홈 / a> / li>

테마를 나타내는 클래스 속성 사용 :

div> 바 / div>

기술

• jQuery Mobile에 포함 된 5 가지 테마를 사용하여 HTML 요소의 기본 스타일을 적절하게 조정할 수 있습니다.
• jQuery Mobile 애플리케이션에서 고유 한 CSS 스타일 시트를 사용할 수 있지만 가능하면이를 사용하지 않아야합니다.

원근법

모바일 장치의 사용은 지난 몇 년 동안 극적으로 증가했습니다. 이 때문에 이러한 장치에서 사용하기 쉬운 웹 사이트를 디자인하는 것이 점점 더 중요 해지고 있습니다. 그것은 일반적으로 별도의 웹 사이트를 개발하는 것을 의미하지만, 이것은 인터넷에서 귀하의 존재를 유지하는 데 중요한 측면이 될 수 있습니다.

다행히도 jQuery Mobile의 출현으로 모바일 웹 사이트 구축 작업이 훨씬 쉬워졌습니다. 더 이상 모바일 웹 페이지가 제목, 단락, 링크 및 축소판 이미지가 포함 된 정적 페이지로 제한되지 않습니다. 이제 웹 개발자는 jQuery Mobile을 사용하여 네이티브 모바일 애플리케이션처럼 보이고 느껴지는 풍부한 기능의 웹 사이트를 구축 할 수 있습니다.