[CSS] clamp 함수로 간단한 반응형 구현하기

  현재 반응형 웹을 구현하는 가장 핵심 방법은 미디어쿼리를 사용하는 것이다. 그러나 미디어 쿼리는 한 요소에 대해 여러 화면에 대한 CSS 코드를 작성하기 때문에 전체적인 코드량이 매우 증가한다는 단점을 가진다. 만약 최소 크기, 최대 크기를 지정하는 정도의 간단한 반응형 스타일링이라면 css의 clamp 함수를 활용하는 것도 하나의 방법이다.

 

clamp(min, preferred, max)

  clamp는 세 개의 값을 인자로 받는다. 첫 번째는 최소값, 두 번째는 일반적으로 적용되는 값, 마지막은 최대값이다. 즉 두 번째 값을 적용하되 그것이 최소값과 최대값의 범위를 벗어나지는 않는다. 일반적으로 두 번째 인자인 선호값(preferred value)에는 vw, vh 등 viewport를 기준으로 한 값이 들어가며 첫 번째 혹은 세 번째 값에는 rem, px 등의 단위를 넣어준다. 참고로 함수의 값에는 math식이 들어갈 수도 있다. 예를 들어서 중첩 min( ), max( ) 식이 들어갈 수도 있고 calc( )식을 작성하지 않고도 사칙 연산을 수행할 수도 있다.

 

위 예시는 width, max-width, min-width를 한 줄에 작성한 효과를 볼 수 있다

 

  clump 함수는 최소값, 선호값, 최대값 세 가지를 모두 전달해줘야하며 사이즈 유닛을 지정해주는 함수이기 때문에 모든 반응형 웹을 구현할 수는 없다. 대신 layout(width, height 등), font-size 등의 min, default, max 사이즈를 지정해주는 경우에 한해 보조적인 반응형 웹 구현 수단으로 활용한다면 훨씬 간결하고 유지보수가 편리한 코드를 작성할 수 있을 것이다.

 

이미지 출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/clamp