[HTML] 여러해상도의 단말 모두 지원하기.

HTML, 여러 해상도의 단말 모두 지원하기.

스마트폰이 나오면서 & mobile page 들이 등장하면서

많은 내용을 적은 화면에 display 해야 하는 문제들이 생겨났다.

mobile page 전용으로 layout 을 다시 하고, 표시하는 정보의 내용들을 depth 를 두어 나타내는 방법으로 해결하곤 했지만, 모바일 device 의 종류가 다양해지면서 이제는 여러 해상도의 단말들에서 최적화된 look 을 보여주는 issue 가 또 다시 제기되었다.

하여, 이전부터 W3C 가 권고하였듯 HTML, CSS, JavaScript 를 다른 파일로 구성하는 것이 좋고,

이 방법을 따르면, HTML 이 불려지는 시점에 해상도에 따른 CSS 파일을 지정하여 불러올 수 있어 여러 해상도를 지원할 수 있다.

<link href="low_resolution_portrait.css" rel="stylesheet" type="text/css"

media="screen and (orientation:portrait) and (max-width:479px)" />

위와 같은 코드가 지정되면, 현재 html 을 불러들이는 녀석이 portrait 모드 이면서 max-width 가 480px 이하인 녀석일 때 low_resolution_portrait.css" 파일이 불리게 된다.

<link href="low_resolution_landscape.css" rel="stylesheet" type="text/css"

media="screen and (orientation:landscape)" />

위의 코드는 landscape 모드일 때 low_resolution_landscape.css 파일을 부르라는 코드.

<link href="high_resolution_portrait.css" rel="stylesheet" type="text/css"

media="screen and (orientation:portrait) and (min-width:480px)" />

위의 코드는 width가 480px 이상인 단말에서 portrait 모드일 때 high_resolution_portrait.css 를 불러오라는 코드이다.

요 코드들을 이용하면, 큰 로직 변경 없이 display 하는 방식만 바꾸어 multi-resolution ( 여러 해상도 ) 문제를 해결할 수 있다.

css, css multi resolution, HTML, html multi resolution, javascript, Link, link tag, max-width, Media, media="screen, min-width, multi resolution, orientation:landscape, orientation:portrait, 다양한 mobile device, 다양한 모바일 단말, 다양한 해상도 지원, 모바일 단말