<div id="readability-page-1" class="page"><div id="body"> <p> <a href="/blog/category/dev">dev</a> |
2024-12-08 </p>  <div><p><code>width</code>와 <code>height</code>에는 <code>min/max</code> 값을 지정하는 별도의 속성이 있어서 레이아웃 구성에 유용하게 사용할 수 있다. 다른 속성에도 이와 같이 최대/최소값을 적용할 수 있으면 좋겠다는 생각이 드는 경우가 있는데 이럴 때 <code>clamp()</code>를 사용할 수 있다.</p>



<div>
	<p>clamp(100px, 75%, 200px)</p>
	<p>100px</p>
	<p>75%</p>
	<p>200px</p>
</div>

<p><code>width</code>에 <code>clamp(100px, 75%, 200px)</code>를 적용한 경우다. <code>min/max-width</code>를 적용한 것 처럼 <code>75%</code>가 <code>100px</code>-<code>200px</code> 사이에서만 적용되는 것을 볼 수 있다. 글자 크기를 화면 크기와 연동하는 경우와 같이 값이 너무 작거나 커지지 않게 제어하는데 유용하게 사용할 수 있다.</p>

<p><code>calc()</code>나 <code>min()</code>, <code>max()</code>와도 같이 사용할 수 있다. <code>clamp(MIN, VAL, MAX)</code>는 <code>max(MIN, min(VAL, MAX))</code>와 동일하다고 하는데 웬만한 계산은 이제 다 가능할 것 같다. 값 제어를 위해 레퍼로 감싸야 하는 경우는 거의 없어질 것으로 생각된다.</p></div>      </div></div>

신현석(Hyeonseok Shin)

width와 height에는 min/max 값을 지정하는 별도의 속성이 있어서 레이아웃 구성에 유용하게 사용할 수 있다. 다른 속성에도 이와 같이 최대/최소값을 적용할 수 있으면 좋겠다는 생각이 드는 경우가 있는데 이럴 때 clamp()를 사용할 수 있다.
	
clamp(100px, 75%, 200px)
	
100px
	
75%
	
200px
width에 clamp(100px, 75%, 200px)를 적용한 경우다. min/max-width를 적용한 것 처럼 75%가 100px-200px 사이에서만 적용되는 것을 볼 수 있다. 글자 크기를 화면 크기와 연동하는 경우와 같이 값이 너무 작거나 커지지 않게 제어하는데 유용하게 사용할 수 있다.
calc()나 min(), max()와도 같이 사용할 수 있다. clamp(MIN, VAL, MAX)는 max(MIN, min(VAL, MAX))와 동일하다고 하는데 웬만한 계산은 이제 다 가능할 것 같다. 값 제어를 위해 레퍼로 감싸야 하는 경우는 거의 없어질 것으로 생각된다.

CSS clamp() 함수

댓글