diff options
Diffstat (limited to 'files/ko/web/api/css_object_model')
| -rw-r--r-- | files/ko/web/api/css_object_model/determining_the_dimensions_of_elements/index.html | 28 | ||||
| -rw-r--r-- | files/ko/web/api/css_object_model/managing_screen_orientation/index.html | 136 |
2 files changed, 164 insertions, 0 deletions
diff --git a/files/ko/web/api/css_object_model/determining_the_dimensions_of_elements/index.html b/files/ko/web/api/css_object_model/determining_the_dimensions_of_elements/index.html new file mode 100644 index 0000000000..c9bb8b32ba --- /dev/null +++ b/files/ko/web/api/css_object_model/determining_the_dimensions_of_elements/index.html @@ -0,0 +1,28 @@ +--- +title: Determining the dimensions of elements +slug: Determining_the_dimensions_of_elements +translation_of: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements +--- +<p>엘리먼트의 너비와 높이를 알기 위해 살펴볼 수 있는 여러 속성이 있습니다. 또한, 요구하는 사항에 딱 맞는 것을 고르기 다소 까다로울 수도 있습니다. 이 글은 여러분이 필요에 맞는 속성을 고르는데 도움을 주기 위해 작성했습니다.</p> + +<h3 id="How_much_room_does_it_use_up.3F" name="How_much_room_does_it_use_up.3F">공간을 얼마나 차지하나요?</h3> + +<p>표시된 컨텐트의 너비, 스크롤바, 패딩까지 포함해서 엘리먼트가 차지하는 전체 공간을 알고 싶다면, <code><a href="/en/DOM/element.offsetWidth" title="en/DOM/element.offsetWidth">offsetWidth</a></code>와 <code><a href="/en/DOM/element.offsetHeight" title="en/DOM/element.offsetHeight">offsetHeight</a> 속성을 사용하세요:</code></p> + +<p><img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p> + +<h3 id="What.27s_the_size_of_the_displayed_content.3F" name="What.27s_the_size_of_the_displayed_content.3F">보이는 컨텐트의 크기는요?</h3> + +<p>패딩은 포함하되 경계선, 여백, 스크롤바는 포함시키지 않고 보이는 컨텐트가 실제로 차지하는 공간이 알고 싶다면, <code><a href="/en/DOM/element.clientWidth" title="en/DOM/element.clientWidth">clientWidth</a></code>와 <code><a href="/en/DOM/element.clientHeight" title="en/DOM/element.clientHeight">clientHeight</a></code> 속성을 사용하세요:</p> + +<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p> + +<h3 id="How_big_is_the_content.3F" name="How_big_is_the_content.3F">컨텐트는 얼마나 크나요?</h3> + +<p>컨텐트의 실제 크기를 알고 싶다면(보여지는 부분만이 아닌 전체 컨텐트 크기), <code><a href="/en/DOM/element.scrollWidth" title="en/DOM/element.scrollWidth">scrollWidth</a></code>와 <code><a href="/en/DOM/element.scrollHeight" title="en/DOM/element.scrollHeight">scrollHeight</a></code> 속성을 사용하세요. 이 속성들은 엘리먼트 컨텐트의 전체 크기에 해당하는 너비와 높이를 반환합니다. 보여지는 영역이 작아서 스크롤바를 사용하고 있다해도 관계없습니다.</p> + +<p>예를 들어, 600x400 픽셀 크기의 엘리먼트가 300x300 픽셀의 스크롤박스에서 보여진다면 <code>scrollWidth</code>는 600을, <code>scrollHeight</code>는 400을 각각 반환합니다.</p> + +<h3 id="References" name="References">참고자료</h3> + +<p><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location</a></p> diff --git a/files/ko/web/api/css_object_model/managing_screen_orientation/index.html b/files/ko/web/api/css_object_model/managing_screen_orientation/index.html new file mode 100644 index 0000000000..934384d0bf --- /dev/null +++ b/files/ko/web/api/css_object_model/managing_screen_orientation/index.html @@ -0,0 +1,136 @@ +--- +title: Managing screen orientation +slug: WebAPI/Managing_screen_orientation +translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation +--- +<p>{{SeeCompatTable}}</p> +<h2 id="Summary">Summary</h2> +<p>Screen orientation 은 <a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="/en-US/docs/WebAPI/Detecting_device_orientation">device orientation</a> 과는 조금 다르다. 비록 장치가 방향을 감지 못하더라도 화면은 언제나 방향을 가지고 있다. 그리고 만약 장치가 방향을 알 수 있더라도 웹 어플리케이션의 인터페이스를 유지하거나 적응하기 위해 화면의 방향을 조정하는 능력을 갖는게 좋다.</p> +<p>화면의 방향을 다루기 위한 여러 방법이 있는데, CSS 와 JavaScript 이다. 첫 번째는 <a href="/en-US/docs/CSS/Media_queries#orientation" title="en-US/CSS/Media queries#orientation">orientation media query</a> 이다. 이것은 내용이 CSS를 사용해서 레이아웃을 조정하게 하는데, 브라우저 창이 가로 모드 (너비가 높이보다 큼) 또는 세로모드 (높이가 너비보다 큼) 여부에 달려 있다.</p> +<p>두번째 방법은 JavaScript Screen orientation API 인데 이것은 화면의 현재 방향을 구하고 잠그는데 사용할 수 있다.</p> +<h2 id="Adjusting_layout_based_on_the_orientation">Adjusting layout based on the orientation</h2> +<p>방향 변환에서 가장 흔한 케이스 중 하나는 장치의 방향에 따라 내용의 레이아웃을 조정 하는 것이다. 예를 들자면, 당신은 버튼바를 장치 화면의 가장 긴 크기로 펼치고 싶어 할 수 있는데, media query를 이용해서 쉽고 자동으로 할 수 있다.</p> +<p>다음의 HTML code 예제를 보자</p> +<pre class="brush: html"><ul id="toolbar"> + <li>A</li> + <li>B</li> + <li>C</li> +</ul> + +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.</p> +</pre> +<p>CSS 는 화면 방향에 따라 <span style="line-height: inherit;">특정 스타일을 을 </span><span style="line-height: inherit;">다루기 위해 orientation media query 에 의존한다</span></p> +<pre class="brush: css">/* First let's define some common styles */ + +html, body { + width : 100%; + height: 100%; +} + +body { + border: 1px solid black; + + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +p { + font : 1em sans-serif; + margin : 0; + padding: .5em; +} + +ul { + list-style: none; + + font : 1em monospace; + margin : 0; + padding: .5em; + + -moz-box-sizing: border-box; + box-sizing: border-box; + + background: black; +} + +li { + display: inline-block; + margin : 0; + padding: 0.5em; + background: white; +} +</pre> +<p>Once we have some common styles we can start defining a special case for the orientation</p> +<pre class="brush: css">/* For portrait, we want the tool bar on top */ + +@media screen and (orientation: portrait) { + #toolbar { + width: 100%; + } +} + +/* For landscape, we want the tool bar stick on the left */ + +@media screen and (orientation: landscape) { + #toolbar { + position: fixed; + width: 2.65em; + height: 100%; + } + + p { + margin-left: 2em; + } + + li + li { + margin-top: .5em; + } +} +</pre> +<p>실행 결과를 보자</p> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Portrait</th> + <th scope="col">Landscape</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 180, 350) }}</td> + <td>{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 350, 180) }}</td> + </tr> + </tbody> +</table> +<div class="note"> + <p><strong>Note:</strong> orientation media query 는 실제로 브라우저 창 (또는 iframe) 의 방향에 따라 적용한다. 장치의 방향이 아니다.</p> +</div> +<h2 id="Locking_the_screen_orientation">Locking the screen orientation</h2> +<div class="warning"> + <p><strong>Warning:</strong> 이 API 는 실험적이며 현재 <a href="/en-US/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> 와 <a href="/en-US/docs/Mozilla/Firefox_for_Android" title="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android</a> 에서 <code>moz</code> 접두사를 이용하여 사용할 수 있다.</p> +</div> +<p>몇몇 장치들은 (주로 모바일 장치) 사용자가 언제나 화면을 읽을 수 있게 장치의 방향에 따라 동적으로 화면의 방향을 변화시킬 수 있다. 만약 이러한 행위가 텍스트 컨텐츠에 적합하다면, 이러한 변화 때문에 고통 받을 수 있는 켄텐츠도 있다. 예를 들어, 장치의 방향에 따른 게임들은 이러한 방향전환 때문에 혼란스러울 수 있다.</p> +<p>Screen Orientation API 는 정확히 그러한 변화를 방지하기 위해 만들어졌다.</p> +<h3 id="Listening_orientation_change">Listening orientation change</h3> +<p>{{event("orientationchange")}} 이벤트는 장치가 화면의 방향을 변환할 때와 <span style="line-height: inherit;">방향이 {{domxref("window.screen.orientation","screen.orientation")}} 속성과 함께 읽혀질 때 </span><span style="line-height: inherit;">마다 불려 진다. </span></p> +<pre class="brush: js">screen.addEventListener("orientationchange", function () { + console.log("The orientation of the screen is: " + screen.orientation); +}); +</pre> +<h3 id="Preventing_orientation_change">Preventing orientation change</h3> +<p>모든 웹 어플리케이션은 필요에 따라 스크린을 잠굴 수 있다. 화면은 {{domxref("window.screen.lockOrientation","screen.lockOrientation()")}} 함수를 사용하여 잠그고 {{domxref("window.screen.unlockOrientation","screen.unlockOrientation()")}}. 함수로 잠금 해제 한다.</p> +<p>{{domxref("window.screen.lockOrientation","screen.lockOrientation()")}} 는 적용 할 잠금의 종류를 정의하는 문자열 <span style="line-height: inherit;"> (또는 일련의 문자열) </span><span style="line-height: inherit;">을 수용한다. 수용하는 값들: </span><code style="font-size: 14px; line-height: inherit;">portrait-primary</code><span style="line-height: inherit;">, </span><code style="font-size: 14px; line-height: inherit;">portrait-secondary</code><span style="line-height: inherit;">, </span><code style="font-size: 14px; line-height: inherit;">landscape-primary</code><span style="line-height: inherit;">, </span><code style="font-size: 14px; line-height: inherit;">landscape-secondary</code><span style="line-height: inherit;">, </span><code style="font-size: 14px; line-height: inherit;">portrait</code><span style="line-height: inherit;">, </span><code style="font-size: 14px; line-height: inherit;">landscape</code><span style="line-height: inherit;"> (각각의 값들에 대해 좀 더 알려면 {{domxref("window.screen.lockOrientation","lockOrientation")}} 를 보라).</span></p> +<pre class="brush: js">screen.lockOrientation('landscape');</pre> +<div class="note"> + <p><strong>Note:</strong> 화면 잠금은 웹 어플리케이션에 따라 다르다. 어플레케이션 A이 가로모드로 잠겨 있고 어플레케이션 B가 세로모드로 잠겨 있을 때, 어플리케이션을 A 에서 B 로 또는 B 에서 A 로 전환하면 {{event("orientationchange")}} 를 호출하지 않는다. 왜냐하면 각 어플리케이션은 각자의 방향을 유지 하기 때문이다.</p> + <p>그러나, 만약 잠금요구를 만족하기 위해 방향이 바뀌어야한다면 화면잠금은 {{event("orientationchange")}} 이벤트를 호출 할 수 있다.</p> +</div> +<h2 id="See_also">See also</h2> +<ul> + <li>{{domxref("window.screen.orientation","screen.orientation")}}</li> + <li>{{domxref("window.screen.lockOrientation()","screen.lockOrientation()")}}</li> + <li>{{domxref("window.screen.unlockOrientation()","screen.unlockOrientation()")}}</li> + <li>{{domxref("window.screen.onorientationchange","screen.onorientationchange")}}</li> + <li><a href="/en-US/docs/CSS/Media_queries#orientation" title="en-US/CSS/Media queries#orientation">The orientation media query</a></li> + <li><a class="external" href="http://hacks.mozilla.org/2009/06/media-queries/" title="http://hacks.mozilla.org/2009/06/media-queries/">A short introduction to media queries in Firefox 3.5</a></li> +</ul> |