작성완료

CSS 반응형의 새로운 기술 (clamp함수)

clamp() 함수는 반응형 레이아웃을 간결하게 구현할 수 있는 유용한 도구로, 최소/최대 값 범위 사이의 값을 표현하는 데 보조적으로 사용된다. 예를 들어, clamp(100px, 50%, 200px)을 사용하면 기본 너비는 50%이지만 100px보다 작거나 200px보다 클 수 없다. 미디어쿼리와 비교했을 때, clamp() 함수를 사용하면 더 간결하고 유지보수가 쉬운 코드를 작성할 수 있다.

CSS & SASS & SCSS

개요

clamp() 함수는 지정한 범위 안의 값이 3가지의 값만 가질 수 있는 좁은 선택 범위만 제공하지만, 반응형 레이아웃을 위한 간결한 구현이 가능하고, 작은 CSS 코드만으로 구현이 가능하기 때문에, 비교적 단순한 반응형 웹을 위해서는 clamp() 함수가 여러가지 면에서 유리하다.
단, 여전히 반응형 웹을 작성하는 방식은 미디어쿼리가 기본이며 clamp()는 최소/최대 값 범위 사이의 값을 표현할 수 있는 경우에 보조적으로 사용해야 한다.

문법

clamp(최소값, 기본값, 최대값);

예제

css
div {
  width: clamp(100px, 50%, 200px);
}

기본으로 50%의 너비를 가지고 있으며 100px 보다는 작아질 수 없고, 200px 보다는 커질 수 없다.

활용 사례

미디어쿼리를 사용했을 경우와 clamp()함수를 사용했을 경우를 비교해 볼 수 있다.
미디어쿼리

css
div {
  width: 30%;
}

@media screen and (max-width:1280px){
  div{
      width: 400px;
  }
}

@media screen and (max-width:640px){
  div{
      width: 200px;
  }
}

clamp()함수

css
div {
  width: clamp(200px, 30%, 400px);
}

결론

사용하기에 따라서는 미디어쿼리를 대신해서 훨씬 간결하고 유지보수가 쉬운 반응형 웹을 제작할 수 있다.