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