반응형 웹을 구현하는 clamp() 함수 사용 기초

반응형 웹을 구현하는 CSS의 핵심은 미디어쿼리입니다.

웹 브라우저 너비를 기준으로, 또는 디바이스 종류에 따라, 가로/세로 모드에 따라 다양한 CSS를 대상에 따라 구분해서 적용할 수 있습니다.

다만, 미디어쿼리는 같은 요소에 대해 여러 가지 화면 너비나 디바이스를 위한 CSS 코드를 나누어서 작성해야 하기 때문에 코드량이 급격히 늘어나는 단점이 있습니다.

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

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

clamp() 함수의 기본 사용 구문

clamp(min, prefered, max)

prefered 값이 중요합니다. 기본 사용값이며 "선호하는 값"이라고 사용하기도 합니다.

부모 요소를 기준으로 하는 상대 크기, 또는 상대 단위 값을 사용합니다. px와 같은 절대 단위를 사용하면 clamp() 함수의 기능을 할 수 없습니다.

상대 크기로 가변이지만 min 값보다는 작아질 수 없고, max 값보다는 커질 수 없습니다.

CSS의 너비를 결정하는 속성인 width, min-width, max-width와 같은 개념이라고 이해하면 빠릅니다.

글꼴 크기를 정할 때 clamp() 함수를 이용하면 다음과 같이 표현할 수 있습니다.

font-size: clamp(1rem, 2.5vw, 2rem);

해석을 하면 2.5vw를 가진 글꼴 크기를 가지며 최소 1rem, 그리고 최대 2rem 크기까지 커질 수 있습니다.

웹 브라우저 너비가 1000px면 25px가 글자 너비가 되고, 보통 데스크톱 웹 브라우저의 기본 글자 크기가 16px 이므로 최소 16px에서 최대 32px까지 될 수 있습니다.

반대로 계산하면 웹 브라우저 너비가 640px보다 작아지면 1rem으로 글자 크기가 고정되고, 웹 브라우저 너비가 1280px보다 커지면 2rem으로 글자 크기가 고정됩니다.

그 사이 구간에서는 웹 브라우저 너비가 변하는 만큼 선형으로 글자 크기도 함께 변하게 됩니다.

미디어쿼리를 대신하는 경우

미디어쿼리로 작성한 다음과 같은 반응형 웹은

.layout {
    font-size: 2rem;
}

@media screen and (max-width:1280px){
    .layout{
        font-size: 2.5vw;
    }
}

@media screen and (max-width:640px){
    .layout{
        font-size: 1rem;
    }
}

clamp() 함수로 다음처럼 표현할 수 있습니다.

.layout {
    font-size: clamp(1rem, 2.5vw, 2rem);
}

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

단, 최소, 최대 값을 명확하게 제한할 수 있는 경우에만 사용할 수 있으므로 용도에 맞는 경우에만 사용할 수 있습니다.