CSS Math 함수들 'min, max'

Posted on Edited on

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

min()

min() 사용 목적: 최댓값의 한계를 설정할 수 있다.

width(80ch, 100vw)의 경우 80인치와 뷰포트의 너비를 비교하여 더 작은 값을 선택한다.

.container클래스를 활용한 예제

min()함수 이내에는 계산식을 포함할 수 있다. 따라서 아래와 같이 코드를 작성할 경우, 적절한 좌우 여백을 줄 수 있다.

1
2
3
.container {
  width: min(80ch, 100vw - 2rem);
}

위의 코드의 경우 .container클래스를 가진 요소는 80인치까지 너비를 가질 수 있으며, 뷰포트가 줄어들 경우 양쪽 너비 1rem의 요소를 만들 수 있다.

다른 예시로는 아래 css 코드를 들 수 있다.

1
2
3
4
5
.container {
  width: min(40ch, 100% - 2rem);
  margin-right: auto;
  margin-left: auto;
}

여기서 ch 단위는 글꼴과 관련된 스타일이 모두 적용된 0의 너비를 이야기한다. 이를 활용하면 한 줄에 들어가는 문자의 수를 가늠할 수 있다. 따라서 어떠한 문서를 읽을 때, 좀 더 나은 경험을 제공할 수 있다.

장점 미디어 쿼리 없이도 반응형을 제작할 수 있다.

min()을 통한 반응형 요소

댓글이나 피드옆에 사용자 프로필이 있는 경우를 생각해보자. 만약 이들의 크기가 화면의 크기에 따라 유동적으로 바뀌어야 할 때 min을 활용할 수 있다. min(64px, 15%, 10vw)를 사용하면 이 요소는 min안에 적힌 3개의 값 모두를 넘어서지 못한다.

이 min함수가 사용된 요소는 64px를 절대 넘어서지 못함과 동시에 최소 15%또는 10vw의 사이즈를 가진다.

min()을 사용한 다른 특성

min()은 background-size에도 활용될 수 있다. 어떠한 배경 이미지가 유동적으로 확장되고자 할 때 이에 대한 경계를 min()이 지정할 수 있다.

1
2
3
4
.background-image {
  background: #1F1B1C url(https://source.unsplash.com/RapCPd_mJTU/800x800) no-repeat center;
  background-size: min(600px, 100%);
}

이 예시를 보면 이미지가 600px을 넘지 않을 것을 보증한다. 그리고 600px보다 작은 경우에는 알아서 크기를 줄인다.

max()

max는 반응형 요소에서 최소값의 경계를 지정한다.

max()의 경우 min()의 반대다.

max()로 문맥상 여백 주기

Web Content Accessibility Guidelines (WCAG) Success Criterion 1.4.10에 따르면 사이트를 최대 400%까지 확대할 수 있어야한다. 이때 px과 rem은 표준에 맞지 않는 단위이다.

만약에 1280px사이즈의 데스크톱에 400% 줌을 준다면 뷰포트 너비가 320px로 줄어든다. 이때 모바일에서 이를 한다면, 방향은 가로로 계속 유지된다. 이러한 뷰포트의 축소는 읽기와 상호작용 영역이 감소했음을 의미한다. 더하여 휴대폰에서는 적합한 크기가 확대된 창에서는 훨씬 커보일 수 있다.

이때 쓸 수 있는 것이 max()이다. 원문의 저자는 작은 여백에는 rem단위를 선호한다. 하지만 영역 간의 큰 여백을 줘야하는 경우에는 아래와 같은 코드를 사용한다. 이렇게 하면 뷰포트에 따라 조정이 된다.

1
2
3
.element + .element {
  margin-top: max(8vh, 2rem);
}

뷰포트의 너비가 큰 경우 8vh가 쓰이고 그것보다 작거나 확대된 창에서는 2rem이 적용된다.

max를 활용한 iOS 브라우저 자동 줌인 방지

iOS에선 16px보다 작은 입력창을 가지고 있으면 자동으로 줌인이 된다. 이 떄 아래와 같은 코드를 사용하면 이 문제를 해결 할 수 있다.

1
2
3
input {
  font-size: max(16px, 1rem);
}

max()를 통해 어느 값이던 수용할 수 있고, 최소 16px을 유지할 수 있게 된다.

max()를 활용한 포커싱 아웃라인

max를 활용하면 포커싱 아웃라인에 대한 상대적인 크기를 설정할 수 있다. 아래 코드를 통해 아웃라인의 최소 너비를 2px로 설정하고, em값에 따라 너비가 상대적으로 조절될 수 있다.

1
2
3
4
5
6
7
8
9
10
a {
  --outline-size: max(2px, 0.08em);
  --outline-style: solid;
  --outline-color: currentColor;
}

a:focus {
  outline: var(--outline-size) var(--outline-style) var(--outline-color);
  outline-offset: var(--outline-size);

max()와 타겟 사이즈

타겟 사이즈란 말은 WCAG Success Criterion (SC) 2.5.5에 나오며 타겟은 포인터 이벤트를 받을 수 있는 것을 말한다. 곧 나올 WCAG 2.2버전에서는 이런 타겟 사이즈를 최소 44px로 설정할 것을 권고한다.

이 때도 max()를 활용할 수 있다. 만약 프로필을 눌러 프로필 페이지로 이동해야하는 경우 프로필 버튼에 다음과 같은 스타일링을 줄 수 있다.

1
2
3
4
.icon-button {
  width: max(44px, 2em);
  height: max(44px, 2em);
}

aspect-ratio의 보완책 max()

aspect-ratio를 지원하지 않는 브라우저에서 max()에 높이를 지정하는 방식으로 비슷하게 흉내낼 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
img {
  /* Fallback for `aspect-ratio` of defining a height */
  height: max(18vh, 12rem);
  object-fit: cover;
  width: 100%;
}

/* When supported, use `aspect-ratio` */
@supports (aspect-ratio: 1) {
  img {
    aspect-ratio: var(--img-ratio);
    height: auto;
  }
}