SCSS 활용 팁 13. clamp()를 활용한 반응형 디자인

clamp()

clamp()는 최소값, 기본값, 최대값을 설정하여 값이 뷰포트의 크기에 따라 동적으로 변경되게 하는 CSS함수 입니다. 복잡한 미디어쿼리를 사용하지 않고 코드의 부피를 줄일 수 있습니다. 

clamp(minimum, preferred, maximum)

위와 같은 형태로 작성합니다.

• minimum: 최소값
• preferred: 기본값으로 일반적으로는 뷰포트 크기에 따라 계산된 값을 사용합니다.
• maximum: 최대값

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(16px, 5vw, 64px);
}

clamp()를 사용하여 컨테이너 요소의 패딩을 조정해 보았습니다. .container는 최소 16px의 패딩을 가지고, 이 패딩은 뷰포트 크기가 증가함에 따라 최대 64px까지 늘어납니다. 

vw와 vh는 각각 viewport width와 viewport height의 약자로 뷰포트(실제 보이는 화면)의 크기에 비례한 값입니다. 예를 들어 1vw는 뷰포트 전체 폭의 1% 이며, 1vh는 뷰포트 높이의 1%가 됩니다.

SCSS에서 clamp() 활용하기

clamp()를 그대로 사용해도 충분히 효율적이지만, SCSS의 기능을 활용하면 더욱 깔끔하고 효율적으로 코드를 작성할 수 있습니다. 

1. 변수활용

반복된 값을 변수로 관리하면, 일관성을 유지하기 쉬우며 유지보수성이 향상됩니다.

$min-size: 16px;
$preferred-size: 5vw;
$max-size: 64px;

.container {
  padding: clamp($min-size, $preferred-size, $max-size);
}

.section {
  padding: clamp($min-size, $preferred-size, $max-size);
}

2. 함수활용

clamp()를 SCSS함수로 정의하면 논리적으로 값을 계산하거나 동적으로 생성할 수 있어 확장성을 높일 수 있고, 여러가지 상황에서 유연하게 대응할 수 있습니다.

// 함수 정의
@function clamp-size($min, $preferred, $max) {
  @return clamp($min, $preferred, $max);
}

// 함수 사용
.container {
  padding: #{clamp-size(16px, 5vw, 64px)};
}

h1 {
  font-size: #{clamp-size(1.5rem, 3vw, 3rem)};
}