diff options
Diffstat (limited to 'files/ko/mozilla/mobile')
| -rw-r--r-- | files/ko/mozilla/mobile/index.html | 30 | ||||
| -rw-r--r-- | files/ko/mozilla/mobile/viewport_meta_tag/index.html | 99 |
2 files changed, 0 insertions, 129 deletions
diff --git a/files/ko/mozilla/mobile/index.html b/files/ko/mozilla/mobile/index.html deleted file mode 100644 index 6431893f01..0000000000 --- a/files/ko/mozilla/mobile/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Mobile -slug: Mozilla/Mobile -translation_of: Mozilla/Mobile ---- -<h2 id="Firefox_OS" name="Firefox_OS"><a href="/en-US/docs/Archive/B2G_OS">Firefox OS</a></h2> - -<p>Firefox OS는 사용자 인터페이스와 HTML, CSS 및 JavaScript로 작성된 응용 프로그램을 구동하는 Linux와 Mozilla의 Gecko 엔진을 사용하는 오픈 소스 모바일 운영 체제입니다.</p> - -<p>Firefox OS 설치 방법과 앱을 개발하는 방법에 대해서 살펴보십시오.</p> - -<div id="gt-res-tools"> -<div id="gt-res-tools-l"> -<div id="gt-pb-star"> -<div class="goog-toolbar-button goog-inline-block trans-pb-button"></div> -</div> -</div> -</div> - -<h2 id="Firefox_for_Android" name="Firefox_for_Android"><a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android</a></h2> - -<p><span class="hps">안드로이드</span><span class="hps">용</span> <span class="atn hps">Firefox</span><span>는</span> 안드로이드 기기를 <span>위한</span> <span class="atn hps">Mozilla</span><span>의</span> <span class="hps">모바일</span> <span class="hps">웹</span> <span class="hps">브라우저입니다.</span> 최근에 안드로이드 자체 UI를 사용하도록 재개발 되어서 더 빠르고 응답성도 좋아졌습니다. <span class="hps">카메라나</span><span class="hps"> 전화기능과 같은 기기 자체의 기능에 접근하는 강력한 API를 제공합니다.</span></p> - -<p>안드로이드용 Firefox를 만드는데 도움을 주는 방법이나 device API를 사용하는 방법, 모바일 부가 기능을 만드는 방법에 대해서 살펴보세요.</p> - -<h2 id="Mobile_web_development" name="Mobile_web_development"><a href="/en-US/docs/Web/Guide/Mobile">Mobile web development</a></h2> - -<p><span class="hps">모바일 장치는</span> <span class="atn hps">데스크톱</span><span>이나</span> <span class="hps">노트북</span> <span class="atn hps">컴퓨터와는 </span><span class="hps">매우 다른</span> <span class="hps">하드웨어 특징을</span> <span class="hps">가지고 있으며</span> 기기를 제어하는데 사용되는 <span class="atn hps">API</span><span>의 대부분은</span> 아직 표준화 단계에 있습니다.</p> - -<p><span class="hps">모바일 장치에서</span> 잘<span class="hps"> 보이는</span> <span class="atn hps">웹 사이트를 개발</span><span>하고</span> <span class="hps">제공되는</span> <span class="atn hps">새로운 가능성</span><span>을</span> <span class="atn hps">활용</span><span>하는 방법에 대해서 살펴보십시오. </span><span class="hps">웹 사이트가</span> <span class="hps">다른 브라우저에서</span> <span class="hps">잘</span> <span class="hps">작동하는지</span> <span class="hps">확인하는 방법을</span> <span class="hps">배웁니다.</span></p> diff --git a/files/ko/mozilla/mobile/viewport_meta_tag/index.html b/files/ko/mozilla/mobile/viewport_meta_tag/index.html deleted file mode 100644 index 577fa0b5ee..0000000000 --- a/files/ko/mozilla/mobile/viewport_meta_tag/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: viewport meta 태그를 이용해 모바일 브라우저상에서 레이아웃 조종하는 법 -slug: Mozilla/Mobile/Viewport_meta_tag -tags: - - viewport - - 레이아웃 - - 모바일 -translation_of: Mozilla/Mobile/Viewport_meta_tag ---- -<p>앞으로 공개될 <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec">Mobile Firefox (Fennec)</a> 1.1 에는 개선된 <a href="/en-US/docs/Web/HTML/Element/meta#Attributes"><code><meta name="viewport"></code></a> 태그를 지원한다. 이전 버전의 Fennec에서 viewport 속성(property)으로 <code>width</code>, <code>height</code>, 그리고 <code>initial-scale</code> 가 지원되긴 했지만 iphone과 android 브라우저에 맞추어 디자인된 몇몇 사이트에서 문제가 있었다. 이제 모바일 safari 에서도 같은 속성들이 지원되며, Fennec을 고쳐서 여러가지 화면크기와 다른 해상도에서도 모바일 사이트들이 문제없이 나타나도록 했다.</p> - -<p>이전 touch.facebook.com:</p> - -<p class="figure"><img alt="05-11-fennec-meta-viewport-2.png" class="default internal" src="/@api/deki/files/4371/=05-11-fennec-meta-viewport-2.png"></p> - -<p class="caption">개선후 touch.facebook.com:</p> - -<p class="figure"><img alt="05-11-fennec-meta-viewport-1.png" class="default internal" src="/@api/deki/files/4372/=05-11-fennec-meta-viewport-1.png"></p> - -<p>이러한 개선점들은 최신의 <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/mobile/nightly/latest-mobile-1.9.2/">Fennec 1.1</a> 와 Maemo, Windows, Mac, or Linux를 위한 <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/mobile/nightly/latest-mobile-trunk/">trunk</a> nightly 빌드에서 볼 수 있다.</p> - -<h2 id="배경설명">배경설명</h2> - -<p>Fenec과 같은 모바일 브라우저들은 뷰포트(viewport)로 알려진 가상 "window"상에 페이지를 렌더링하는데, 보통의 경우 스크린 보다 폭이 넓어 모든 페이지 레이아웃을 억지로 작은 화면에 축소할 필요가 없다. (레이아웃을 축소할 경우 모바일 사이트로 만들지 않은 사이트들은 대개 엉망이 되게 마련이다.) 사용자들은 화면을 움직이거나 줌 기능을 이용해 페이지의 보이지 않는 부분들을 볼 수 있다.</p> - -<p>모바일 Safari는 "viewport meta" 태그를 도입해서 웹 개발자들이 뷰포트의 크기와 스케일을 조정할 수 있게 했고, 웹 표준은 아니지만 많은 다른 모바일 브라우저들도 이 태그를 이제 지원한다. 애플의 <a href="http://developer.apple.com/safari/library/documentatio">문서</a>를 통해 이 태그의 사용법을 자세히 알 수 있기는 하지만 Fenec내에서 정확히 어떻게 구현해야 할 것인가에 대해 상당한 연구가 진행되어야 했다. 예를 들어 사파리의 문서에는 페이지 컨텐트를 "comma-delimited list"라고 쓰고 있는데, 현존하는 브라우저와 웹페이지는 comma, semicolon, 그리고 space의 다양한 조합을 사용한다.</p> - -<p>다양한 브라우저내의 뷰포트에 대해 더 배우고 싶으면 quirksmode.org에 있는 <a class="external" href="http://www.quirksmode.org/mobile/viewports2.html" title="http://www.quirksmode.org/mobile/viewports2.html">A Tale of Two Viewports</a> 를 보라.</p> - -<h2 id="뷰포트_기본">뷰포트 기본</h2> - -<p>모바일로 최적화된 사이트는 일반적으로 다음과 같은 태그를 포함한다:</p> - -<pre class="notranslate"><meta name="viewport" content="width=device-width, initial-scale=1"></pre> - -<p><code>width </code>속성은 뷰포트의 크기를 조정한다. 특정한 숫자를 사용해 <code>width=600</code>라고 할 수도 있고 <code>device-width</code>와 같은 특정한 값을 사용할 수도 있는데, <code>device-width</code>는 100% 스케일에서 CSS 픽셀들로 계산된 화면의 폭을 의미한다. (뷰포트의 높이에 따라 크기와 위치가 변하는 요소들로 이루어진 페이지의 경우 상응하는 <code>height</code>와 <code>device-height</code> 값들이 유용하게 사용될 수 있다.)</p> - -<p><code>initial-scale</code> 속성은 페이지가 처음 로드될 때 줌 레벨을 조정한다. <code>maximum-scale</code>, <code>minimum-scale</code>, 그리고 <code>user-scalable</code> 속성들은 사용자가 얼마나 페이지를 줌-인, 줌-아우트 할 수 있는지를 조정한다.</p> - -<div class="blockIndicator warning"> -<p><code>user-scalable=no</code>를 사용하면 저시력과 같은 시각 장애를 가진 사용자에게 접근성 문제를 일으킬 수 있습니다.</p> -</div> - -<h2 id="픽셀은_사실_픽셀이_아니다">픽셀은 사실 픽셀이 아니다</h2> - -<p>iPhone과 인기가 많은 다양한 안드로이드 폰은 3에서 4인치 (7-10센티미터) 스크린으로 320-480픽셀 (~160 dpi)로 이루어져 있다. 동일한 물리적 스크린을 갖는 Nokia N900에서 구동되는 Maemo의 파이어폭스는 480-800픽셀(~240dpi)이다. 이러한 이유로 Fennec의 최신 버전에서 보여지는 웹페이지들은 아이폰이나 안드로이드에 비해 1/3정도 작기 때문이다(실제 물리적으로). 이는 터치인터페이스에 최적화된 웹사이트에서 사용성과 가독성의 문제를 야기시킨다. Peter-Paul Koch가 이 문제에 대해 <a href="http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html">픽셀은 사실 픽셀이 아니다</a>를 작성하였다.</p> - -<p>Maemo 의 Fennec 1.1는 안드로이드의 웹킷기반 브라우저에 의해 각 CSS의 "픽셀"을 1.5 하드웨어 픽셀로 사용한다. 이는 <span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">initial-scale=1 로 정의된 페이지를 </span><span style="line-height: 1.5;">Maemo의 </span><span style="line-height: 1.5;">Fennec과 아이폰의 사파리, 그리고 </span><a class="external" href="http://developer.android.com/guide/practices/screens_support.html#range" style="line-height: 1.5;">HDPI 와 MDPI</a> 모두의 <span style="line-height: 1.5;">안드로이드 브라우저에서 거의 동일한 물리적 사이즈로 렌더링한다는 뜻이다. 이는 </span><a class="external" href="http://www.w3.org/TR/CSS2/syndata.html#length-units" style="line-height: 1.5;">CSS 2.1 명세서</a>에 의해 아래와 같이 정의되어있다:</p> - -<blockquote> -<p>만약 출력장치의 픽셀밀도가 일반적인 컴퓨터 디스플레이와 상이하게 다를경우, user agent는 반드시 픽셀값을 조절해야 한다. <span style="line-height: 1.5;">It is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel. </span><span style="line-height: 1.5;">It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.</span><span style="line-height: 1.5;"> </span></p> -</blockquote> - -<p>웹 개발자들에게 이는 세로모드에서 scale=1로 지정됐을 경우, 위에서 언급된 장치들상에서 320px이 가로로 최대가 되어야 하며, 역시 레이아웃과 이미지들도 마찬가지로 조절이 되어야 함을 의미한다. 하지만 모든 모바일 장치들이 같은 가로 값을 가지지 않는다는 점을 기억해야한다. 작성된 페이지는 가로모드뿐만 아니라, 아이패드와 안드로이드 타블렛과 같은 더 큰 장치들에서도 잘 동작되어야 한다.</p> - -<p>240-dpi 화면상에서, <span style="font-family: courier new,andale mono,monospace;">initial-scale=1</span>로 정의된 페이지는 Fennec과 안드로이드 웹킷에서 150%로 확대된다. 페이지의 텍스트들은 부드럽고 또렷해질것이나, 아마도 비트맵 이미지들은 최대 해상도에서 이점을 가지지 못한다. 이러한 스크린에서 또렷한 이미지를 보여주기 위해서는, 이미지나 전체적인 레이아웃을 최종 디자인의 150%(아이폰의 레티나 디스플레이와 같은 320-dpi장치들을 지원하기 위해서는 200%이다)로 작성하고, CSS나 viewport속성을 이용해 사이즈를 줄여 보여줄수도 있다.</p> - -<p>기본 비율은 디스플레이의 밀도에 따라 달라진다. 200dpi이하의 밀도를 갖는 디스플레이에서는 1.0이다. 200에서 300dpi사이의 장치에서는, 1.5가 된다. 300dpi이상의 장치에서는 소수점 없는 정수가 된다.(밀도/150dpi). 기본 비율은 viewport 크기가 1일때만 참이 됨을 기억하라. 그렇지 않을 경우 CSS픽셀과 장치의 픽셀간 관계는 현재의 zoom 레벨에 따라 달라진다.</p> - -<p><strong style="">뷰포트 너비 와 스크린 너비</strong></p> - -<p>많은 사이트에서 세로보기 모드로 iPhone 디스플레이에 정확하게 맞도록 뷰포트의 너비를 "width = 320, initial-scale = 1"로 설정합니다. 위에서 언급했듯이 Fennec1.0에서 특히 디스플레이가 가로 모드일때 문제가 발생했습니다. 이 문제를 해결하기 위해 Fennec 1.1은 필요한 경우 화면을 채우기 위해 뷰포트 너비를 확장합니다. 이런 현상은 Android 및 Mobile Safari의 동작과 일치하며 특히 iPad와 같은 대형 스크린 장치에 유용합니다. (Allen Pike의 iPad 사이트 용 뷰포트를 선택하여 적용해 보세요.)</p> - -<p>For pages that set an initial or maximum scale, this means the <code>width</code> property actually translates into a <em>minimum</em> viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:</p> - -<pre class="notranslate"><meta name="viewport" content="width=500, initial-scale=1"></pre> - -<p>Fennec 1.1 also adds support for <code>minimum-scale</code>, <code>maximum-scale</code>, and <code>user-scalable</code>, with defaults and limits similar to <a class="external" href="http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html">Safari's</a>. These properties affect the initial scale and width, as well as limiting changes in zoom level.</p> - -<p>Mobile browsers handle orientation changes slightly differently. For example, Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape. If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a <code>maximum-scale</code> value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:</p> - -<pre class="notranslate"><meta name="viewport" content="initial-scale=1, maximum-scale=1"></pre> - -<p>This is not necessary in Fennec; when the device changes orientation, Fennec updates the viewport size, the page layout, and JavaScript/CSS properties like <code>device-width</code>, based on its new window dimensions.</p> - -<h2 id="모바일과_태블릿에_대한_일반_viewport_크기">모바일과 태블릿에 대한 일반 viewport 크기</h2> - -<p>If you are wanting to know what mobile and tablet devices have which viewport widths, there is a comprehensive list of <a href="http://viewportsizes.com/">모바일 및 태블릿 뷰포트 크기</a>. This gives information such as viewport width on portrait and landscape orientation as well as physical screen size, operating system and the pixel density of the device.</p> - -<h2 id="표준">표준</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">사양</th> - <th scope="col">상태</th> - <th scope="col">댓글</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#viewport-meta', '<meta name="viewport">')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Non-normatively describes the Viewport META element</td> - </tr> - </tbody> -</table> - -<p>There is clearly demand for the viewport meta tag, since it is supported by most popular mobile browsers and used by thousands of web sites. It would be good to have a true standard for web pages to control viewport properties. As the standardization process proceeds, we at Mozilla will work to make sure we can implement any changes made during standardization.</p> |