Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

모바일 코딩의 종류

2,187 views

Published on

  • Be the first to comment

  • Be the first to like this

모바일 코딩의 종류

  1. 1. http://m.naver.com/ http://m.nate.com/ http://m.daum.net/ https://c9.io/whitebluecloud/jsstudy/workspace/leeseungje/m ediaquery.html http://view.jquerymobile.com/1.3.1/dist/demos/
  2. 2.  <head></head> 사이에 viewport를 넣는다. <meta name="viewport" content="width=device-width,initial-scale=1.0,minimumscale=1.0,maximum-scale=1.0“ />, or <meta name=“viewport” content=“width=1024” /> jquery mobile, Media Query부분에도 들어감.          Meta name=“viewport” : 뷰포트를 선언 Content=“width=device-width” : 콘텐츠를 표현할 넓이를 설정 Intial-scale=1 : 초기의 크기를 설정 (0~1.0) Minimum-scale=1 : 최소 크기를 설정 (0~1.0) Maximum-scale=1 : 최대 크기를 설정 (0~1.0) User-scalable=no : 사용자 단말의 확대기능 사용 유무 (yes or no) Width : 너비(필셀) (device-width 디바이스 너비) Height : 높이(필셀) (device-height 디바이스 너비) (참고 비율 1.0은 100%를 의미한다.)
  3. 3. css 구조로 잡으며 어떠한 사이즈 별로 변형이 가능하다. 예) @media only screen and ( max-width: 600px ) { css 스타일. } - 창 사이즈가 600이하일 때 이 style을 먹는다.(모바일 경우) @media only screen and ( min-width: 601px ) and (max-width : 1000px) { css 스타일 } - 창 사이즈가 601 ~ 1000 사이일 때 이 스타일을 먹는다. @media only screen and ( min-width: 1161px ) { css 스타일 } - 창 사이즈가 1161 사이즈 이상일 때 이 스타일을 먹는다.
  4. 4. 1. 2. 3. Html로 만들기 때문에 코딩 하나만 수정 하면 전부다 변경이 가능하다. css스타일로 모바일, 태블릿, web 수정이 가능하다. 크롬으로 보았을 경우 변형되는 모습을 바로 확인할 수 있 다.
  5. 5. 1. 2. 3. 4. IE에서 반응형을 확인할 수 없다. (IE 6 ~ IE 8 사용 불가능) 다소 중복되는 코드가 많아 진다. css 스타일 수정일 시 각 디바이스 별로 수정을 해야 해서 시간이 걸린다. Ie7 ~ ie8 에선 MediaQuery가 적용이 안되어서 다른 style을 넣어야 한다. <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="lib/css/style.css" /> <![endif]--> <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="lib/css/style.css" /> <![endif]--> <!--[if IE 8]> <link rel="stylesheet" type="text/css" href="lib/css/style.css" /> <![endif]--> 5. 우리나라선 아직 IE점유율이 높기 때문에 굳이 media query보단 모바일 코딩이 더 좋 을 듯 하다.(?) – 이건 개인적인 생각…
  6. 6. http://view.jquerymobile.com/1.3.1/dist/demos/  Jquery Mobile 사이트에서 제공하는 JS로 파일을 다운 받아 서 기본적인 테마로 코딩을 하는 방식 <div data-role=“footer” data-id=“foo1” data-position=“fixed”> <div data-role=“navbar”> <ul> <li></li> <li></li> <li></li> </ul> </div> </div>   Data-type으로 Jquery Mobile은 data-type을 넣어야지 활용 가능하다. 다양한 기능이 제공된다.
  7. 7.     기본적인 테마가 부가가 되어 손쉽게 구현이 가능하다. 스크립트 구현까지 다 되어 있어서 data-type만 익숙해지면 만들기 쉽다. 초반에 제이쿼리 모바일을 접했을땐 개발적인 이슈와 많이 섞 여 있어서 많이 뺐었다. (지금은 안써 봐서 잘 모르겠다.) 수정 작업이 힘들다. (기본적인 css 스타일이 잡혀 있어서 그 거 가지고 수정을 해야 한다.)
  8. 8. 감사합니다~
  9. 9. 번외  퍼블리셔 입장에서 디자이너가 작업을 어떻게 해서 넘겨드리 는게 편하신지 궁금합니다.  반응형 웹사이트 관련 질문~~!  이건 그냥 업무시 번외 질문~!

×