콘텐츠
- 01. 바 (.ui-bar-?)
- 02. 콘텐츠 블록 (.ui-body-?)
- 03. 버튼 및 목록보기 (.ui-btn-?)
- 04. 견본 혼합 및 일치
- 05. 사이트 전체 활성 상태
- 06. 기본 아이콘
- 07. 커스텀 테마 생성 및 사용
- 08. ThemeRoller는 무엇입니까?
- 09. ThemeRoller 사용
- 10. 미리보기
- 11. 색상
- 12. 검사관
- 13. 도구
- 14. Notekeeper를위한 테마 만들기
- 15. 테마 내보내기
- 필요한 지식 : HTML, 일부 CSS 및 JavaScript
- 요구 사항 : 좋아하는 HTML 편집기와 브라우저 만 있으면됩니다.
- 프로젝트 시간 : 두 시간
- 지원 파일
Packt Publishing에서 발행 한 jQuery Mobile Web Development Essentials의 11 장에서 발췌 한 내용입니다.
jQuery Mobile의 테마는 개발자가 사용하기 쉽고 간단하지만 배후에서는 매우 정교합니다. 운 좋게도 자신을 위해 수행되는 모든 작업을 알아야 할 때가 거의 없습니다. 그러나 작동 방식을 이해하는 데 약간의 시간을 할애 할 가치가 있습니다.
기본적으로 jQuery Mobile은 5 가지 색상 견본으로 구성된 테마 세트와 함께 제공되며, 각 견본은 A-E의 문자와 연결됩니다. 테마는 거의 모든 요소에 자유롭게 적용 할 수있는 일련의 기본 CSS 클래스를 포함하며 너비, 높이, 테두리 반경, 그림자에 대한 전역 설정을 포함합니다. 개별 견본에는 색상, 글꼴 등에 대한 특정 정보가 포함되어 있습니다.
F-Z에서 5 개의 원본 견본에 추가 견본을 추가하거나 원하는대로 원래 견본을 대체하거나 재정의 할 수 있습니다. 이 시스템은 총 26 개의 서로 다른 견본을 허용하여 테마 색상, 스타일 및 패턴의 가능한 조합을 수백만 가지로 허용합니다. 원하는 테마의 문자와 함께 data-theme 속성을 추가하여 jQuery Mobile 테마를 선택한 요소에 적용합니다.
개발자는 일반적으로 스타일을 적용 할 때 데이터 테마 속성 방법을 사용하도록 선택하지만보다 세분화 된 제어를 위해 CSS 클래스 이름을 페이지 요소에 직접 연결할 수도 있습니다. 이러한 유연성을 허용하는 몇 가지 기본 접두사가 있습니다.
01. 바 (.ui-bar-?)
막대 접두사는 일반적으로 머리글, 바닥 글 및 중요도가 높은 기타 영역에 적용됩니다.
02. 콘텐츠 블록 (.ui-body-?)
콘텐츠 블록은 일반적으로 단락 텍스트가 발생할 것으로 예상되는 영역에 적용됩니다. 그 색상은 텍스트 색상에 대해 최대 가독성을 보장하는 데 도움이됩니다.
03. 버튼 및 목록보기 (.ui-btn-?)
버튼과 목록보기는 jQuery Mobile 라이브러리에서 가장 중요한 두 가지 요소이며 팀이 시간을내어 올바르게 작동했음을 안심할 수 있습니다. .ui-btn 접두사에는 up, down, hover 및 active 상태에 대한 스타일도 포함됩니다.
04. 견본 혼합 및 일치
jQuery Mobile의 테마에 대한 좋은 점 중 하나는 달리 지정하지 않는 한 자식 요소가 부모로부터 상속된다는 것입니다. 즉, 머리글 또는 바닥 글 표시 줄에 자체 데이터 테마 속성이없는 버튼을 배치하면 해당 버튼은 상위 항목과 동일한 테마를 사용합니다. 사악한 어?
또한 하나의 견본을 사용하여 요소를 배치하고 다른 견본을 사용하여 요소의 하위를 배치하는 것도 완벽하게 허용되며 권장됩니다. 이렇게하면 요소가 더 눈에 띄거나 앱의 다른 부분 또는 개발자가 선택한 이유와 일치하는 데 도움이 될 수 있습니다. 가능하고 더 쉽습니다. 헤더 표시 줄 안에 버튼 (또는 기타 요소)을 배치하고 자체 데이터 테마 속성을 지정하기 만하면됩니다.
05. 사이트 전체 활성 상태
jQuery Mobile은 또한 모든 요소에 전역 활성 상태를 적용합니다. 이 활성 상태는 버튼, 양식 요소, 탐색 및 현재 선택되어 있음을 표시해야하는 모든 곳에서 사용됩니다. 이 색상 값을 변경하는 유일한 방법은 CSS를 통해 설정 (또는 재정의)하는 것입니다.활성 상태에 대한 CSS 클래스는 적절하게 이름이 .ui-btn-active입니다.
06. 기본 아이콘
jQuery Mobile 세트에는 개발자의 다양한 요구를 충족하는 18 개의 아이콘이 포함되어 있습니다. 아이콘 세트는 투명한 흰색이며 jQuery Mobile은 모든 견본에 대비하여 대비를 제공하기 위해 반투명 검은 색 원 위에 오버레이됩니다. 아이콘을 추가하려면 원하는 아이콘의 이름으로 data-icon 속성을 지정하십시오.
jQuery Mobile은 또한 data-iconpos = "[top, right, bottom, left]"속성을 사용하여 버튼의 상단, 오른쪽, 하단 또는 왼쪽에 아이콘을 배치하는 기능을 제공하며 왼쪽이 기본 배치입니다. 개발자는 data-iconpos = "notext"를 지정하여 텍스트없이 아이콘 만 표시 할 수도 있습니다.
사용자 지정 아이콘을 배포하는 것도 가능하며이 장의 뒷부분에서 설명합니다.
07. 커스텀 테마 생성 및 사용
이미 jQuery Mobile에서 테마가 얼마나 강력한 지 논의했습니다. 단순하고 우아한 스타일의 풍부한 모바일 웹 사이트를 개발하는 것은 사소한 일입니다. 더욱 강력한 것은 응용 프로그램이나 웹 사이트를 진정으로 고유하게 만드는 데 사용할 수있는 고유 한 견본 라이브러리를 만드는 기능입니다. 다음 두 가지 방법 중 하나로 자신 만의 테마를 개발할 수 있습니다.
- 기존 jQuery Mobile CSS 파일을 다운로드하여 열고 마음껏 편집하십시오.
- 웹 브라우저에서 ThemeRoller for jQuery Mobile을 가리 키십시오.
두 번째 옵션에만 초점을 맞출 것입니다. 솔직히 말해서 10 분 안에 견본으로 가득 찬 새 테마를 가리키고, 클릭하고, 드래그 할 수 있는데 모든 CSS를 살펴 보는 이유는 무엇입니까? ThemeRoller가 무엇인지 알아 보겠습니다.
08. ThemeRoller는 무엇입니까?
jQuery Mobile 용 ThemeRoller는 jQuery UI 프로젝트 용으로 작성된 웹 기반 앱의 확장입니다. 이를 통해 사용자는 드래그 앤 드롭 색상 관리를 사용하여 몇 분 안에 견본으로 가득 찬 테마를 빠르게 조합 할 수 있습니다. 대화식 미리보기 기능이있어 변경 사항이 테마에 어떤 영향을 미치는지 즉시 확인할 수 있습니다. 또한 (원하는 경우) 세부 사항을 파헤치는 데 도움이되는 내장 검사 도구가 있습니다. 또한 색상 관리 도구 인 Adobe® Kuler®와 통합됩니다. 완료 한 후 테마를 다운로드 할 수 있고 맞춤 URL을 통해 다른 사람과 공유 할 수 있으며 마지막 조정을 위해 과거 테마를 다시 가져올 수 있습니다. 강력한 도구이며 jQuery Mobile을 완벽하게 보완합니다.
5 가지 기본 견본의 특징 중 하나는 jQuery Mobile 팀이 가독성과 유용성에 대해 작업하는 데 상당한 시간을 소비했다는 것입니다. 견본은 가장 높은 대비 (A)에서 가장 낮은 대비 (E)까지 다양합니다. 단일 테마 내에서 대비가 가장 많은 영역이 페이지에서 가장 눈에 띄는 영역입니다. 여기에는 헤더 (및 목록보기 헤더) 및 버튼이 포함됩니다. 나만의 테마를 만들 때이를 염두에 두는 것이 좋습니다. 우리는 항상 앱 내에서 사용성에 집중하고 싶습니까? 색상 선택이 좋지 않아 아무도 읽을 수 없다면 멋진 앱이 무슨 소용일까요?
09. ThemeRoller 사용
ThemeRoller를로드 할 때 가장 먼저 보게되는 것은 매끄럽게 보이는 스플래시 화면과 유용한 시작하기 화면입니다.
시작하기 화면에는 몇 가지 유용한 팁이 있으므로 롤링 가져 오기 버튼을 클릭하기 전에 먼저 살펴보십시오.
모든 스플래시 화면이 사라지면 기본 인터페이스가 표시됩니다.
ThemeRoller는 미리보기, 색상, 검사기 및 도구의 네 가지 주요 영역으로 나뉩니다. 이들 각각에는 검토해야 할 중요한 기능이 포함되어 있습니다. 미리보기 섹션부터 시작하겠습니다.
10. 미리보기
기존 테마를로드하지 않는 한 미리보기 영역에는 모든 종류의 위젯이 포함 된 완전하고 동일한 대화 형 jQuery Mobile 페이지 3 개가 표시됩니다.
마우스를 그 위로 이동하면 각 페이지가 작동하는 것을 볼 수 있습니다. 각 페이지의 머리글에는 모양을 제어하는 견본을 나타내는 문자가 포함되어 있습니다.
11. 색상
페이지 상단에는 두 개의 슬라이더 컨트롤 및 토글 버튼과 함께 일련의 색상 칩이 표시됩니다. 더 오른쪽에는 비어 있어야하는 또 다른 10 개의 컬러 칩이 있습니다. 최근 사용한 색상 전용이며 색상을 선택할 때까지 비어 있습니다.
색상 칩 아래에는 밝기와 채도라는 두 개의 슬라이더가 있습니다. 밝기 슬라이더는 일련의 색상 견본의 밝은 톤과 어두운 톤을 조정하는 반면 채도는 색상을 더 생생하게 또는 덜 생생하게 만듭니다. 종합하면 사용자는 자신이 선택한 거의 모든 색상에 근접 할 수 있어야합니다. Kuler의 색상을 사용하려면 Adobe Kuler 견본으로 표시된 텍스트 링크를 클릭하십시오.
각 색상 칩은 미리보기 영역 내의 모든 요소로 드래그 할 수 있습니다. 이것은 견본 세트의 개발을 매우 쉽게 만듭니다. 많은 jQuery Mobile 스타일이 겹칩니다. 예를 들어 페이지 상단의 헤더 바는 목록보기의 헤더와 동일한 스타일을받습니다. 원하는대로 색상을 조정 한 다음 각 칩을 페이지의 요소로 드래그합니다. 각 개별 페이지는 고유 한 견본이므로 색상 혼합 방법에주의하십시오.
12. 검사관
인터페이스의 맨 왼쪽에는 두 부분으로 분할 된 검사기 패널이 있습니다. 상단 부분에는 개발자가 테마를 다운로드하고 기존 테마를 가져오고 테마에 대한 링크를 공유 할 수있는 버튼이 있습니다. 이 책을 구입하지 않은 사람들을위한 도움말 링크도 있습니다.
하단 섹션에는 Global, A, B, C 및 + 레이블이 지정된 일련의 탭이 있습니다. 이러한 각 탭에는 모든 견본에 적용되는 전역 탭을 제외하고 개별 견본에 대한 모든 값이 포함 된 아코디언 패널이 있습니다.
전역 탭을 선택한 다음 활성 상태를 클릭하면 아코디언 패널이 확장되어 전체 테마의 활성 상태에 대한 설정이 표시됩니다. 옵션에는 텍스트 색상, 텍스트 그림자, 배경 및 테두리가 포함됩니다. 전역에서 값을 변경하면 모든 현재 (및 미래) 견본에 새 설정이 반영됩니다.
두 가지 방법으로 테마에 추가 견본을 추가 할 수 있습니다. 속성 상단의 + 탭을 클릭하면 테마의 마지막 위치에 새 견본이 추가됩니다. 미리보기 영역 하단에있는 견본 추가 버튼을 클릭하여 새 견본을 추가 할 수도 있습니다. 제거 할 견본이있는 탭을 선택한 다음 견본 이름 오른쪽에있는 삭제 링크를 클릭하여 견본을 삭제할 수 있습니다. 스택 상단에서 견본을 삭제하면 나머지 견본의 이름이 변경됩니다.
13. 도구
페이지 맨 위에는 일련의 버튼이 있습니다. 이 버튼을 사용하면 잠시 후 다룰 다양한 작업을 수행 할 수 있지만 먼저 버튼 자체를 자세히 살펴 보겠습니다.
1.1 (현재) 버전과 1.0.1 버전 사이에서 변경할 수있는 스위치, 실행 취소 / 다시 실행 및 검사기의 토글 버튼과 같은 버튼이 있습니다. 이 토글을 켜짐으로 설정하면 미리보기 영역의 모든 위젯을 검사 할 수 있습니다. 위젯 위로 마우스를 가져 가면 해당 요소가 파란색 상자로 강조 표시됩니다. 요소를 클릭하면 Inspector 영역의 아코디언 메뉴가 확장되어 해당 요소에 대한 설정이 표시됩니다.
테마를 다운로드하고, 이전에 만든 테마를 가져 오거나 업그레이드하고, 다른 사용자와 테마를 공유하고, 도움말 버튼을 사용할 수있는 4 개의 추가 버튼이 있습니다.
14. Notekeeper를위한 테마 만들기
이제 ThemeRoller 인터페이스에 익숙해졌습니다. 이제 첫 번째 테마를 만들어 보겠습니다. 추상적으로 빌드하는 대신 이전에 빌드 한 Notekeeper 앱에 실제로 사용할 하나를 만들어 보겠습니다. jQuery Mobile과 함께 제공되는 기존 테마 중 하나를 수정하는 것으로 시작하겠습니다. 팀은 사용자가 기본 테마를 새 테마의 시작 위치로 가져올 수 있도록 친절하게 해주었으므로 여기에서 먼저 진행하겠습니다. 창의 왼쪽 상단에있는 가져 오기 버튼을 클릭하면 기존 테마의 내용을 붙여 넣을 수있는 상자가 나타납니다.
오른쪽 상단 모서리에있는 기본 테마 가져 오기라는 제목의 링크를 클릭하여 기본 테마를 가져옵니다. 텍스트 영역이 CSS로 채워지면 가져 오기를 클릭합니다. 미리보기 영역이 다시로드되고 A에서 E까지 견본이 표시됩니다.
최종 목표에 가장 가까운 흰색 견본 D를 변경하는 데 노력을 집중할 것입니다. 견본 A를 이름으로 사용하기 때문에 D 만 남도록 다른 견본을 삭제하겠습니다. ThemeRoller는 다른 견본이 삭제되면 견본의 이름을 변경합니다. 즉, 견본 A를 삭제하면 B가 A가되고 C가 D가되는 식입니다.
D 인 견본이 이제 A 위치에있을 때까지 계속 진행합니다. 마지막으로 견본 B (이전의 견본 E)를 삭제하여 견본 A 만 남도록합니다.
이 견본은보기에는 좋지만 약간 단조롭습니다. 헤더를 멋진 녹색으로 변경하여 약간의 색상을 주입 해 봅시다. 요소에 대해 변경해야하는 값을 결정하는 가장 간단한 방법은 인스펙터를 사용하는 것입니다. 속성을 상단의 켜기로 전환 한 다음 테마 A의 헤더에서 아무 곳이나 클릭합니다. 왼쪽에서 A 탭이 선택되어 있고 헤더 / 바닥 글 막대 패널이 확장되면 올바르게 설정되었는지 알 수 있습니다.
몇 가지 방법 중 하나로 색상을 변경할 수 있습니다. 색상 칩을 상단에서 배경으로 직접 드래그 할 수 있습니다. 색상 칩을 입력 필드로 드래그 할 수도 있습니다. 마지막으로 값을 수동으로 입력 할 수 있습니다. 색상 값이 포함 된 필드를 클릭하면 매끄러운 색상 선택기가 제공됩니다. 계속해서이 패널의 입력 필드 값을 이전 스크린 샷에 표시된 값으로 변경합니다.
좋아 보이지만 이제 테마의 활성 상태에서 파란색이 녹색과 충돌합니다. 속성 도구를 사용하여 켜기 / 끄기 토글 막대의 켜기 섹션을 한 번 클릭합니다. 이렇게하면 전역 탭의 활성 상태 패널이 확장됩니다. 파란색을 따뜻한 회색으로 바꿉니다. 이제 전역 패널이 다음 스크린 샷과 유사하게 표시됩니다.
새 테마가 가장 뜨겁게 보이지 않게하는 단 한 가지가 있습니다. 상단 단락에있는 파란색 텍스트 링크입니다. 신뢰할 수있는 인스펙터로 돌아가서 A 탭 내의 콘텐츠 본문 패널을 확장하는 링크를 직접 클릭 해 보겠습니다. 이제 CSS에 이미 익숙한 사용자라면 호버, 방문 : 호버 및 활성 상태를 변경하지 않고는 링크 색상 만 변경할 수 없다는 것을 알고 있습니다. 문제는 이러한 변경을 수행 할 수있는 옵션이 없지만 ThemeRoller가 해결해 준다는 것입니다. 링크 색상 입력 필드의 오른쪽에있는 +를 클릭하여 나머지 옵션을 표시 한 다음 다음 스크린 샷과 같이 색상을 변경합니다.
그리고 그게 다입니다. 인스펙터 영역을 탐색하면서 테마를 추가로 변경할 수 있습니다. 원하는대로 변경하세요. 지금은 비트와 바이트 일뿐입니다. 현재는 실행 취소 옵션이 없습니다. 정말 마음에 든다면 값을 적어 놓거나 그대로 내보내는 것이 좋습니다. 말하자면 ...
15. 테마 내보내기
실제로 테마를 내보내기 전에주의해야 할 사항이 하나 있습니다. "유용한"정보가있는 스플래시 페이지를 기억하십니까? 권장 사항이 아니라 요구 사항이있는 것으로 밝혀졌습니다.
최소 3 개의 견본 (A-C)으로 테마를 구축하는 것이 좋습니다.
테마를 Notekeeper 앱에 제대로 적용하려면 단일 견본 (문자 A)을 견본 B와 C에 복제해야합니다. 다행히이 작업은 간단합니다. 속성 상단에서 A 탭을 선택한 다음 + 탭을 두 번 클릭하십시오. 3 개의 동일한 견본이 표시되어야합니다. 이제 완료되었습니다.
이제 테마를 완료 했으므로 Notekeeper 응용 프로그램에서 사용하기 위해 내보낼 것입니다. 이것은 인터페이스 상단의 페이지 중간에있는 테마 다운로드 버튼을 클릭하여 시작하는 간단한 프로세스입니다. 테마 이름을 지정할 수있는 상자, 테마 적용 방법에 대한 몇 가지 정보, Zip 다운로드라는 버튼이 표시됩니다. 테마 Notekeeper의 이름을 지정한 후 Zip 다운로드 버튼을 클릭하면 다운로드 폴더에 맛있는 작은 조각이 표시됩니다.
ZIP 파일의 내용을 추출하면 다음 디렉터리 구조가 표시됩니다.
- index.html
- themes / Notekeeper.css (테마의 압축되지 않은 버전) Notekeeper.min.css (압축 된 버전. 프로덕션에서 사용) images / ajax-loader.gif icons-18-black.png icons-18-white.png icons -36-black.png 아이콘 -36-white.png
트리 상단의 HTML 파일에는 테마를 구현하는 방법에 대한 정보와 테마가 작동하는지 확인하는 몇 가지 위젯이 포함되어 있습니다. 모든 링크는 예제 파일에서 상대적이므로 브라우저 창으로 드래그하여 결과를 볼 수 있어야합니다.
테마 다운로드 및 구현에 대한 몇 가지 참고 사항 :
1. jQuery 팀은 이유 때문에이 ZIP 파일에 버튼 아이콘을 제공합니다. 테마는 해당 이미지가 CSS 파일에 상대적이어야합니다. 즉, 이미 기본 테마를 사용하지 않는 한 웹 사이트에 테마를 업로드 할 때 이미지 폴더도 포함해야합니다. 그렇지 않으면 아이콘이 표시되지 않습니다.
2. 압축되지 않은 버전의 테마를 유지하십시오.. 크기 때문에 프로덕션에서 사용하고 싶지는 않지만 ThemeRoller에서 편집하려는 경우 필요합니다. 이 글을 쓰는 시점에서 ThemeRoller는 축소 된 CSS 파일을 가져올 수 없습니다.
Andy Matthews는 16 년 넘게 애플리케이션 개발자로 일했으며 UI / UX, 그래픽 디자인 및 프로그래밍 기술을 보유하고 있습니다. 그는 연사이자 오픈 소스 개발자이며 테네시 주 내슈빌에서 가족과 함께 살고 있습니다. 그는 트위터에서 @commadelimited입니다.
Raymond Camden은 Adobe의 선임 개발자 전도사입니다. 그의 작업은 웹 표준, 모바일 개발 및 ColdFusion에 중점을 둡니다. 그는 출판 된 저자이며 다양한 주제에 대해 컨퍼런스 및 사용자 그룹에서 발표합니다. @cfjedimaster에서 그를 따르십시오.
