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

개요

clamp() 함수는 지정한 범위 안의 값이 3가지의 값만 가질 수 있는 좁은 선택 범위만 제공하지만, 반응형 레이아웃을 위한 간결한 구현이 가능하고, 작은 CSS 코드만으로 구현이 가능하기 때문에, 비교적 단순한 반응형 웹을 위해서는 clamp() 함수가 여러가지 면에서 유리하다.

단, 여전히 반응형 웹을 작성하는 방식은 미디어쿼리가 기본이며 clamp()는 최소/최대 값 범위 사이의 값을 표현할 수 있는 경우에 보조적으로 사용해야 한다.

문법

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

예제

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

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

활용 사례

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

미디어쿼리

div {
  width: 30%;
}

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

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

clamp()함수

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

결론

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