blob: c9bb8b32ba48dff7bac2bb5d02f64160959b822a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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>
|
