CSS Math 함수들 'calc, clamp'

Posted on Edited on

이 글의 원문을 바탕으로 재해석한 글입니다.

CSS에는 수학적으로 수치를 계산할 수 있는 4가지 함수를 제공한다(IE에선 지원하지 않는다). 자주 쓰이지 않을 순 있지만, 그레이디언트와 색깔에 관함 함수 또는 CSS의 커스텀 프로퍼티들과 조합할 때 유용하다. 그래서 아래 4가지 함수와 예시를 함께 들어보려 한다.

calc()

calc() 사용 목적 : 단위를 가진 값들의 사칙연산을 가능하도록 하는 것이다. 그리고 단위를 혼합해서도 사용할 수 있다.

예를 들어 뷰포트에서 상단의 네비게이션 영역을 뺀 값을 높이로 설정하고 싶다면 다음과 같이 쓸 수 있다.

1
2
3
.content{
  height: calc(100vh - 60px);
}

사용하는 디바이스에 따라 100vh가 동적으로 결정되므로, 디바이스에 따라 높이가 달라진다.

calc의 장점은 하드 코딩을 피하고, 인라인 스타일을 추가하는 자바스크립트 로직이 줄어드는 것이다.

calc()를 사용한 컬러팔레트 생성

hsl()과 같이 사용하면 hue, saturation, lightness에 css varaible을 넣음으로써 더 응집도 있는 컬러 팔레트를 완성시킬 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.colors {
  --base-hue: 140;
  --saturation: 95%;
  --lightness: 80%;
  --rotation: 60;

  color: #222;
  text-align: center;
}

.color {
  padding: 0.25rem;
  background-color: hsl(var(--hue), var(--saturation), var(--lightness));
}

.color1{
  --hue: calc(var(--base-hue));
}

.color2 {
  --hue: calc(var(--base-hue) + var(--rotation));
}

.color3 {
  --hue: calc(var(--base-hue) + var(--rotation) * 2);
}

clamp()

clamp()의 사용 목적 : 가능한 값의 범주를 지정한다.

clamp()는 3가지 매개변수(최소값, 이상적인 값, 최고값)를 받는다. 이 함수는 fluid typography에서 유용하다. fluid typography란 스크린 크기에 비례하여 폰트사이즈가 유동적으로 변하는 것이다.

따라서 font-size값에 clamp()를 적용하면 이를 만들 수 있다. 이 함수를 사용하면 폰트 사이즈 크기가 너무 커져 제목이 2줄이 되지 않도록 하고 뷰포트의 사이즈를 과도하게 차지하지 않게 할 수 있다.

1
2
3
h1 {
  font-size: clamp(1.75rem, 4vw + 1rem, 3rem);
}

clamp()를 이용한 반응형 패딩

또 다른 예제로는 반응형 패딩이 있다. 패딩을 퍼센티지로 사용할 경우에는 요소의 너비를 가지고 계산한다. 이와 비슷하게 vw의 개념도 생각해 볼 수 있다. 아래의 코드를 보면 .element를 가진 요소들은 1rem보다 작은 패딩값을 가지지 않게 된다.

1
2
3
.element{
  padding: 1.5rem clamp(1rem, 5%, 3rem);
}

이를 활용하면 미디어 쿼리를 사용하지 않고도 반응형 패딩을 만들 수 있다.