프로그래머...
필고 개발자그룹에서는 필리핀에 계시는 개발자분들이 함께 성장 할 수 있는 공간입니다. 정모: 11월 1일 Sub Page View
|
강좌 : 모바일 웹 디자인 모바일 웹 개발에 대한 자료 강좌 : 모바일 웹 디자인 모바일 웹 개발에 대한 자료 작성자 : 송재호 출처 : 필고 웹 개발자 까페 http://cafe.philgo.com/?module=post&action=list&post_id=group__dev 저작권 : 본 문서의 저작권은 없습니다. 누구든지 원하시는 데로 활용 하셔도 됩니다. 출처를 표시해주시면 감사하겠습니다. 버튼의 라운드를 직접 조절 : How to customize corners of button. 요약본 문서는 본인이 모바일 웹을 개발함에 있어서 경험을 한 팁과 노하우를 정리 해 놓았다. 본 문서가 초보 웹 개발자와 중급자에게 도움이 되기를 희망합니다. 본 문서에서는 jQM 을 바탕으로 반응형 모바일 웹 디자인을 하는 것에 초점을 맞춘다. 본 문서는 구글 드라이브에 공유가 되어져 있습니다. 아래의 링크를 클릭하시면 언제든지 본 문서의 최신 정보를 볼 수 있습니다. https://docs.google.com/a/withcenter.com/document/d/1v-x2ZwZGA6-i8pnXjPnUmRodmoLbn6MSq4FXQlhoLhE/pub jQM 의 활용jQM 이나 Sencha 와 같은 툴을 쓰지 않는다는 것은 벽돌 쌓는 기술 밖에 없으면서 100 층 짜리 고층 빌딩을 짓겠다는 것과 같다. 미국까지 가는데 비행기 타고 가면 될 것을 뛰어서, 등산을 하면서, 헤엄을 치면서 갈 필요가 없는 것이다. jQM 이나 Sencha 와 같은 툴을 익힌다면 100 층 짜리 빌딩을 쌓는데 필요한 모든 기술을 습득하는 것과 같은 것이다. 반응형 웹 디자인모바일은 반응형 웹 디자인 방식으로 접근을 해야한다. RWD ( Responsive Web Design ) 이라 부르며 디바이스가 크면 큰 대로, 작으면 작은대로 잘 보여 주어야 한다. 일반적으로 퍼센티지(%) 나 em 개념으로 레이아웃을 만들면된다. 특히 em 경우 많이 혼동이 되는데 개념을 확실하게 이해해야한다. 보다 세밀하게 디자인을 하기 위해서는 벡터 이미지를 직접 만들어야 한다. 일러스트나 포토샵을 통해서 이미지 디지안을 한 다음 벡터 이미지 파일로 저장하는 것이 아니라 직접 GIF, PNG, JPG 를 줌 인(길게 늘여도)해도 이미지가 일그러지지 않도록 이미지 자체를 픽셀 하나 하나 계산해서 만들어 내야 한다. 실제로 SVG (Scalable Vector Graphic)를 포토샵으로 제작 해 보니까 정말 귀찮은 일이 었다. 간편하게 주요한 이미지는 큰것과 작은 것 두개를 작성해서 큰 화면에서는 큰 것을 작은 화면에서는 작은 것을 보여주는 것도 좋은 방법이다. HTML 페이지의 링크 및 컨텐츠a.banner { display: inline-block; padding: 2%; height: 10em; text-align:center; font-size: 0.8em; vertical-align: top; } 위와 같이 % 와 em 으로 구성을 했다. px 로는 반응형 웹 디자인을 할 수가 없다. 단적인 예로 image map 을 픽셀 단위로 한 다음 이미지를 % 로 지정하여 웹 브라우저 크기를 늘린 다음 결과를 보면 image map 이 전혀 마지 않는 다는 것을 알 수 있다. 반응형 이미지 맵 : RWD jQuery Maphttps://github.com/stowball/jQuery-rwdImageMaps |
|
권오창@페이스... | 3255 | 19-04-07 | ||||||
|
만강이 | 2882 | 15-08-31 | ||||||
|
whizenglish | 4331 | 15-06-20 | ||||||
|
whizenglish | 7243 | 15-05-21 | ||||||
|
커먼웰쓰 | 3499 | 15-05-14 | ||||||
|
바다디다 | 2614 | 15-02-21 | ||||||
|
dnfkfkfkfkf | 3486 | 15-01-25 | ||||||
|
필고관리자 | 3013 | 15-01-03 | ||||||
|
필고관리자 | 9997 | 15-01-03 | ||||||
|
굿리 | 3416 | 15-01-02 | ||||||
|
요잇 | 3281 | 14-12-11 | ||||||
|
jeremyPark | 3075 | 14-12-03 | ||||||
|
thruthesky | 39797 | 14-09-30 | ||||||
|
필고관리자 | 3466 | 14-09-30 | ||||||
|
오늘도잠온다 | 3797 | 14-05-03 | ||||||
|
오늘도잠온다 | 3396 | 14-04-07 | ||||||
|
필고관리자 | 4254 | 14-01-15 | ||||||
|
thruthesky | 10594 | 14-01-11 | ||||||
|
thruthesky | 5631 | 13-12-22 | ||||||
|
thruthesky | 6840 | 13-12-16 | ||||||
|
thruthesky | 10309 | 13-11-26 | ||||||
|
thruthesky | 3848 | 13-11-24 | ||||||
|
thruthesky | 2197 | 13-11-10 | ||||||
|
thruthesky | 2568 | 13-11-10 | ||||||
|
thruthesky | 4856 | 13-11-10 | ||||||
|
thruthesky | 3711 | 13-11-10 | ||||||
|
thruthesky | 2709 | 13-09-29 | ||||||
|
thruthesky | 7995 | 13-09-28 | ||||||
|
thruthesky | 10969 | 13-09-28 | ||||||
|
오늘도잠온다 | 4628 | 13-09-27 | ||||||
|
오늘도잠온다 | 2145 | 13-09-27 | ||||||
|
필고관리자 | 10232 | 13-09-21 | ||||||
|
thruthesky | 2804 | 13-09-15 | ||||||
|
thruthesky | 5852 | 13-09-12 | ||||||
|
thruthesky | 2587 | 13-09-11 | ||||||
|
thruthesky | 12956 | 13-09-10 | ||||||
|
thruthesky | 12178 | 13-09-08 | ||||||
|
thruthesky | 5258 | 13-09-07 | ||||||
|
thruthesky | 3975 | 13-09-03 | ||||||
|
깜씨 | 3582 | 13-09-02 |
@알림 : 코멘트를 작성하시려면 로그인을 하십시오.