제목참 거창하네요^^
그냥 제가 최근에 모바일용 웹페이지(모바일앱에서 webView를 통한 페이지 호출)를 만들일이 있어서 참조한것들입니다.
일단 분기처리에 대한 이해는
http://naradesign.net/wp/2012/05/30/1823/ 이곳을 참조하시구요.
아이폰4대응(레티나)는
http://blog.naver.com/PostView.nhn?blogId=isayjin&logNo=140133301532 이곳을 참조하세요.
먼저
접근하는 디바이스와 앱의 webView에서 호출하는 페이지의 사이즈들이 제각각이라서
아무것도 모르는 저는 당황하였습니다.
단말기가 많아질수록 파편화가 심해질텐데...
그런데 CSS3에는 미디어쿼리라는것이 있어서 다양한 단말기나 환경의 구체적인 조건에 대응하여
각각 다른 스타일시트를 적용하게 할 수 있도록 해줍니다.
적용방법은 3가지가 있는데
1. 마크업에서 분기
2. <style> 테그에서 분기
3. CSS 내에서 @media를 사용해서 분기
가 있습니다.
CSS 내에서 @media를 사용해서 분기하는 방법이 제일 좋다고는 하는데 저는 그냥 마크업에서 분기를 하였습니다.
이유는 CSS파일구조가 복잡해지지않고 오히려 관리가 용이하다고 생각해서입니다.
<link rel="stylesheet" type="text/css" href="css/card_480.css" media="only screen and (max-width:539px)" />
<link rel="stylesheet" type="text/css" href="css/card_540.css" media="only screen and (min-width:540px) and (max-width:599px)" />
<link rel="stylesheet" type="text/css" href="css/card_600.css" media="only screen and (min-width:600px) and (max-width:719px)" />
<link rel="stylesheet" type="text/css" href="css/card_720.css" media="only screen and (min-width:720px) and (max-width:767px)" />
<link rel="stylesheet" type="text/css" href="css/card_768.css" media="only screen and (min-width:768px) and (max-width:799px)" />
<link rel="stylesheet" type="text/css" href="css/card_800.css" media="only screen and (min-width:800px)" />
이런식입니다.
자세한 설명을 구글이나 아래 링크들을 참조하시구요
중요한 부분은 (min-width:540px) and (max-width:599px) 이부분입니다.
width : 540px 은 호출하는 창의 너비가 540px이라는 것이고
min-width:540px 은 호출하는 창의 최소너비가 540px 이라는 것이고(즉 540px 이상)
max-width:540px 은 호출하는 창의 최대너비가 540px 이라는 것입니다.(즉 540px 이하)
그리고 device-width:540px 는 디바이스의 해상도사이즈중 width 값이 540px 이라면 입니다.
각은 원리로 min-device-width 는 디바이스의 width가 540 이면 이라는 뜻입니다.
위와 같은 조건문으로 디바이스별로 각기 다른 CSS파일을 로딩하여 사용할 수있습니다.
기타 자세한 사항은 아래 링크를 참조
http://naradesign.net/wp/2012/05/30/1823/
http://html.nhndesign.com/index.php?mid=textyle&search_target=tag&search_keyword=css3&vid=blog&document_srl=42284
http://truepia.tistory.com/234
http://gnpsi.cafe24.com/wp/?p=615
http://blog.naver.com/PostView.nhn?blogId=yimamuro&logNo=150149961030
http://seye2.egloos.com/2449235
http://blog.naver.com/PostView.nhn?blogId=isayjin&logNo=140133301532
