---
title: <length-percentage>
slug: Web/CSS/length-percentage
tags:
  - CSS
  - CSS Date Type
  - Reference
translation_of: Web/CSS/length-percentage
---
<div>{{CSSRef}}</div>

<p><strong><code>&lt;length-percentage&gt;</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 {{Cssxref("&lt;length&gt;")}} 또는 {{Cssxref("&lt;percentage&gt;")}}인 값을 나타냅니다.</p>

<h2 id="구문">구문</h2>

<p>{{Cssxref("&lt;length&gt;")}}와 {{Cssxref("&lt;percentage&gt;")}} 문서에서 각 자료형의 구문을 살펴보세요.</p>

<h2 id="calc()에서_사용하기"><code>calc()</code>에서 사용하기</h2>

<p><code>&lt;length-percentage&gt;</code>를 허용한다면 백분율이 길이로 이행한다는 뜻이므로 {{cssxref("calc", "calc()")}}와 함께 사용할 수 있습니다. 따라서 아래의 {{cssxref("width")}} 값 모두 유효합니다.</p>

<pre class="syntaxbox example-good">width: 200px
width: 20%
width: calc(100% - 200px)
</pre>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Values', '#mixed-percentages', '&lt;length-percentage&gt;')}}</td>
   <td>{{Spec2('CSS4 Values')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Values', '#mixed-percentages', '&lt;length-percentage&gt;')}}</td>
   <td>{{Spec2('CSS3 Values')}}</td>
   <td>Defines <code>&lt;length-percentage&gt;</code>. Adds <code>calc()</code></td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<p>{{Compat("css.types.length-percentage")}}</p>