모바일웹ui개발 저자세미나 2부
DESCRIPTION
모바일웹Ui개발 저자세미나 2부 TECH@NAVERTRANSCRIPT
JMC를����������� ������������������ 이용한����������� ������������������ ����������� ������������������ 모바일����������� ������������������ 웹����������� ������������������ 페이지����������� ������������������ 만들기����������� ������������������
목차����������� ������������������
1.����������� ������������������ 요구����������� ������������������ 사항����������� ������������������
2.����������� ������������������ SlideFlicking����������� ������������������
3.����������� ������������������ SlideReveal����������� ������������������
4.����������� ������������������ Scroll����������� ������������������
1.����������� ������������������ 요구����������� ������������������ 사항����������� ������������������ ����������� ������������������
4����������� ������������������ /����������� ������������������ JMC를����������� ������������������ 이용한����������� ������������������ 모바일����������� ������������������ 웹����������� ������������������ 페이지����������� ������������������ 만들기����������� ������������������
대외비����������� ������������������
1.����������� ������������������ 요구����������� ������������������ 사항����������� ������������������
5����������� ������������������ /����������� ������������������ JMC를����������� ������������������ 이용한����������� ������������������ 모바일����������� ������������������ 웹����������� ������������������ 페이지����������� ������������������ 만들기����������� ������������������
대외비����������� ������������������
1.����������� ������������������ 요구����������� ������������������ 사항����������� ������������������
6����������� ������������������ /����������� ������������������ JMC를����������� ������������������ 이용한����������� ������������������ 모바일����������� ������������������ 웹����������� ������������������ 페이지����������� ������������������ 만들기����������� ������������������
대외비����������� ������������������
1.����������� ������������������ 요구����������� ������������������ 사항����������� ������������������
7����������� ������������������ /����������� ������������������ JMC를����������� ������������������ 이용한����������� ������������������ 모바일����������� ������������������ 웹����������� ������������������ 페이지����������� ������������������ 만들기����������� ������������������
대외비����������� ������������������
1.����������� ������������������ 요구����������� ������������������ 사항����������� ������������������
8����������� ������������������ /����������� ������������������ JMC를����������� ������������������ 이용한����������� ������������������ 모바일����������� ������������������ 웹����������� ������������������ 페이지����������� ������������������ 만들기����������� ������������������
대외비����������� ������������������
1.����������� ������������������ 요구����������� ������������������ 사항����������� ������������������
9����������� ������������������ /����������� ������������������ JMC를����������� ������������������ 이용한����������� ������������������ 모바일����������� ������������������ 웹����������� ������������������ 페이지����������� ������������������ 만들기����������� ������������������
대외비����������� ������������������
1.����������� ������������������ 요구����������� ������������������ 사항����������� ������������������ -����������� ������������������ 필요한����������� ������������������ 컴포넌트����������� ������������������ 확인����������� ������������������
jindo.m.Scroll����������� ������������������
jindo.m.SlideFlicking����������� ������������������
jindo.m.SlideReveal����������� ������������������
2.����������� ������������������ SlideFlicking����������� ������������������
11����������� ������������������ /����������� ������������������ JMC를����������� ������������������ 이용한����������� ������������������ 모바일����������� ������������������ 웹����������� ������������������ 페이지����������� ������������������ 만들기����������� ������������������
대외비����������� ������������������
2.����������� ������������������ SlideFlicking����������� ������������������
1. 플리킹����������� ������������������ 영역에서는����������� ������������������ 총����������� ������������������ 6개의����������� ������������������ 영역이����������� ������������������ 순환으로����������� ������������������ 플리킹된다.����������� ������������������ 2. 사용자가����������� ������������������ 좌,����������� ������������������ 우로����������� ������������������ 스크롤하면����������� ������������������ 손가락이����������� ������������������ 움직인����������� ������������������ 만큼����������� ������������������ 좌우로����������� ������������������ 스크롤된다.����������� ������������������
3. 플리킹����������� ������������������ 이후에����������� ������������������ 위쪽����������� ������������������ 탭����������� ������������������ 영역을����������� ������������������ 활성화된����������� ������������������ 형태로����������� ������������������ 업데이트한다.����������� ������������������
기능����������� ������������������ 정의����������� ������������������
12����������� ������������������ /����������� ������������������ JMC를����������� ������������������ 이용한����������� ������������������ 모바일����������� ������������������ 웹����������� ������������������ 페이지����������� ������������������ 만들기����������� ������������������
대외비����������� ������������������
마크업����������� ������������������ -����������� ������������������ 내비게이션����������� ������������������
2.����������� ������������������ SlideFlicking����������� ������������������
13����������� ������������������ /����������� ������������������ JMC를����������� ������������������ 이용한����������� ������������������ 모바일����������� ������������������ 웹����������� ������������������ 페이지����������� ������������������ 만들기����������� ������������������
대외비����������� ������������������
2.����������� ������������������ SlideFlicking����������� ������������������
마크업����������� ������������������ -����������� ������������������ 콘텐츠����������� ������������������
14����������� ������������������ /����������� ������������������ JMC를����������� ������������������ 이용한����������� ������������������ 모바일����������� ������������������ 웹����������� ������������������ 페이지����������� ������������������ 만들기����������� ������������������
대외비����������� ������������������
2.����������� ������������������ SlideFlicking����������� ������������������
초기화����������� ������������������ 스크립트����������� ������������������
15����������� ������������������ /����������� ������������������ JMC를����������� ������������������ 이용한����������� ������������������ 모바일����������� ������������������ 웹����������� ������������������ 페이지����������� ������������������ 만들기����������� ������������������
대외비����������� ������������������
2.����������� ������������������ SlideFlicking����������� ������������������
플리킹����������� ������������������ 이후����������� ������������������ 내비게이션����������� ������������������ 업데이트����������� ������������������ 스크립트����������� ������������������
16����������� ������������������ /����������� ������������������ JMC를����������� ������������������ 이용한����������� ������������������ 모바일����������� ������������������ 웹����������� ������������������ 페이지����������� ������������������ 만들기����������� ������������������
대외비����������� ������������������
2.����������� ������������������ SlideFlicking����������� ������������������
기능����������� ������������������ 정의����������� ������������������
• 탭을����������� ������������������ 누르면����������� ������������������ 탭����������� ������������������ 이동과����������� ������������������ 함께����������� ������������������ 콘텐츠도����������� ������������������ 함께����������� ������������������ 이동된다.����������� ������������������ • 활성화된����������� ������������������ 탭을����������� ������������������ 눌렀을����������� ������������������ 때는����������� ������������������ 아무런����������� ������������������ 변화가����������� ������������������ 없다.����������� ������������������
3.����������� ������������������ SlideReveal����������� ������������������
18����������� ������������������ /����������� ������������������ JMC를����������� ������������������ 이용한����������� ������������������ 모바일����������� ������������������ 웹����������� ������������������ 페이지����������� ������������������ 만들기����������� ������������������
대외비����������� ������������������
3.����������� ������������������ SlideReveal����������� ������������������
1. 검색창����������� ������������������ 옆����������� ������������������ 버튼을����������� ������������������ 누르면����������� ������������������ 오른쪽에서����������� ������������������ 왼쪽으로����������� ������������������ 슬라이드되는����������� ������������������ 메뉴가����������� ������������������ 나타난다.����������� ������������������ 2. 검색창����������� ������������������ 옆����������� ������������������ 버튼을����������� ������������������ 누르면����������� ������������������ 펼쳐졌던����������� ������������������ 메뉴가����������� ������������������ 왼쪽에서����������� ������������������ 오른쪽으로����������� ������������������ 슬라이드되며����������� ������������������ 사라진다.����������� ������������������
기능����������� ������������������ 정의����������� ������������������
19����������� ������������������ /����������� ������������������ JMC를����������� ������������������ 이용한����������� ������������������ 모바일����������� ������������������ 웹����������� ������������������ 페이지����������� ������������������ 만들기����������� ������������������
대외비����������� ������������������
3.����������� ������������������ SlideReveal����������� ������������������
마크업����������� ������������������
20����������� ������������������ /����������� ������������������ JMC를����������� ������������������ 이용한����������� ������������������ 모바일����������� ������������������ 웹����������� ������������������ 페이지����������� ������������������ 만들기����������� ������������������
대외비����������� ������������������
3.����������� ������������������ SlideReveal����������� ������������������
초기화����������� ������������������ 스크립트����������� ������������������
4.����������� ������������������ Scroll����������� ������������������
22����������� ������������������ /����������� ������������������ JMC를����������� ������������������ 이용한����������� ������������������ 모바일����������� ������������������ 웹����������� ������������������ 페이지����������� ������������������ 만들기����������� ������������������
대외비����������� ������������������
4.����������� ������������������ Scroll����������� ������������������
1. SlideReveal����������� ������������������ 영역이����������� ������������������ 노출되면����������� ������������������ 메뉴가����������� ������������������ Scroll����������� ������������������ ����������� ������������������ 방식으로����������� ������������������ 작동된다.����������� ������������������ 2. 스크롤����������� ������������������ 객체가����������� ������������������ 생성되었다면����������� ������������������ 매번����������� ������������������ 생성되지����������� ������������������ 않아야����������� ������������������ 한다.����������� ������������������
3. 스크롤을����������� ������������������ 아래로����������� ������������������ 이동한����������� ������������������ 상태에서����������� ������������������ 메뉴를����������� ������������������ 닫을����������� ������������������ 때����������� ������������������ 스크롤의����������� ������������������ 위치가����������� ������������������ 위로����������� ������������������ 이동되어야����������� ������������������ 한다.����������� ������������������
4. 스크롤의����������� ������������������ 높이는����������� ������������������ 브라우저의����������� ������������������ 높이에����������� ������������������ 맞게����������� ������������������ 조절된다.����������� ������������������
기능����������� ������������������ 정의����������� ������������������
23����������� ������������������ /����������� ������������������ JMC를����������� ������������������ 이용한����������� ������������������ 모바일����������� ������������������ 웹����������� ������������������ 페이지����������� ������������������ 만들기����������� ������������������
대외비����������� ������������������
4.����������� ������������������ Scroll����������� ������������������
마크업����������� ������������������
24����������� ������������������ /����������� ������������������ JMC를����������� ������������������ 이용한����������� ������������������ 모바일����������� ������������������ 웹����������� ������������������ 페이지����������� ������������������ 만들기����������� ������������������
대외비����������� ������������������
4.����������� ������������������ Scroll����������� ������������������
초기화����������� ������������������ 스크립트����������� ������������������