모바일 코딩의 종류

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/



<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%를 의미한다.)

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 사이즈 이상일 때 이 스타일을 먹는다.

1.

2.
3.

Html로 만들기 때문에 코딩 하나만 수정 하면 전부다 변경이
가능하다.
css스타일로 모바일, 태블릿, web 수정이 가능하다.
크롬으로 보았을 경우 변형되는 모습을 바로 확인할 수 있
다.

1.
2.
3.
4.

IE에서 반응형을 확인할 수 없다. (IE 6 ~ IE 8 사용 불가능)
다소 중복되는 코드가 많아 진다.
css 스타일 수정일 시 각 디바이스 별로 수정을 해야 해서 시간이 걸린다.
Ie7 ~ ie8 에선 MediaQuery가 적용이 안되어서 다른 style을 넣어야 한다.




5.

우리나라선 아직 IE점유율이 높기 때문에 굳이 media query보단 모바일 코딩이 더 좋
을 듯 하다.(?) – 이건 개인적인 생각…

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을 넣어야지 활용
가능하다.
다양한 기능이 제공된다.







기본적인 테마가 부가가 되어 손쉽게 구현이 가능하다.
스크립트 구현까지 다 되어 있어서 data-type만 익숙해지면
만들기 쉽다.

초반에 제이쿼리 모바일을 접했을땐 개발적인 이슈와 많이 섞
여 있어서 많이 뺐었다. (지금은 안써 봐서 잘 모르겠다.)
수정 작업이 힘들다. (기본적인 css 스타일이 잡혀 있어서 그
거 가지고 수정을 해야 한다.)

번외


퍼블리셔 입장에서 디자이너가 작업을 어떻게 해서 넘겨드리
는게 편하신지 궁금합니다.



반응형 웹사이트 관련 질문~~!



이건 그냥 업무시 번외 질문~!

모바일 코딩의 종류

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à 모바일 코딩의 종류

Similaire à 모바일 코딩의 종류 (20)

모바일 코딩의 종류