CSS - 수학 함수: 초보자 가이드

안녕하세요, 미래의 CSS 마법사 여러분! 오늘 우리는 CSS 수학 함수의 세계로 흥미로운 여정을 떠납니다. 코드를 한 줄도 적어본 적 없으신 분들도 걱정 마세요 - 저는 여러분의 친절한 안내자가 되어, 단계별로 이를 안내하겠습니다. 이 튜토리얼의 끝을 맺을 때, 단 몇 가지 수학적인 트릭만으로도 CSS에서 얼마나 많은 것을 할 수 있는지 놀라게 될 것입니다!

CSS - Math Functions

기본 산술 함수

먼저 기본적인 것으로 시작해보겠습니다. CSS는 우리에게 몇 가지 간단한 산술 함수를 제공하여, 웹 페이지 디자인 시 우리의 삶을 훨씬 수월하게 만들어줍니다. 이 함수들은 우리가 CSS 코드 내에서 직접 계산을 수행할 수 있게 합니다.

calc() 함수

calc() 함수는 CSS 수학의 슈вейцар 아ーノ이 knife입니다. 이 함수는 CSS 내에서 기본적인 산술 연산을 수행할 수 있게 해줍니다. 예를 들어보겠습니다:

.box {
width: calc(100% - 20px);
}

이 예제에서, 우리는 클래스 "box"를 가진 요소의 너비를 부모 요소의 너비의 100%에서 20ピクセル을 뺀 값으로 설정하고 있습니다. 이는 다양한 화면 크기에 맞게 반응하는 레이아웃을 만들 때 매우 유용합니다.

다음과 같이 설명해보겠습니다:

100%는 부모 요소의 전체 너비를 나타냅니다.
-20px는 그 너비에서 20ピクセル을 뺍니다.
calc() 함수는 이 계산을 우리 대신 수행합니다.

calc() 함수에서는 사칙 연산 모두 사용할 수 있습니다: 덧셈 (+), 뺄셈 (-), 곱셈 (*), 나눗셈 (/). 다른 예제를 보겠습니다:

.column {
width: calc(33.33% - 10px);
margin-right: calc(10px * 2);
}

이 경우, 우리는 세 칸 레이아웃을 만들고 있습니다. 각 칸은 너비의 세분의 1(33.33%)에서 10ピクセル을 뺀 공간을 차지하며, 오른쪽 여백은 공간의 두 배 크기입니다.

비교 함수

기본적인 것을 배운 다음, 비교 함수로 넘어가보겠습니다. 이 함수들은 다양한 조건에 맞게 반응하는 반응형 디자인을 만들 때 매우 유용합니다.

min() 함수

min() 함수는 주어진 값 목록 중 가장 작은 값을 반환합니다. 이는 요소 크기의 최대한을 설정하는 데 완벽합니다. 예를 들어:

.responsive-text {
font-size: min(5vw, 30px);
}

이는 폰트 크기를 뷰포트 너비의 5%로 설정하지만, 30ピクセル보다 커지지 않도록 합니다. 이는 큰 화면에서 텍스트가 너무 커지지 않도록 하는 좋은 방법입니다.

max() 함수

max() 함수는 min()과 반대로 작동합니다. 주어진 값 목록 중 가장 큰 값을 반환합니다. 다음과 같이 사용할 수 있습니다:

.responsive-image {
width: max(300px, 50%);
}

이는 이미지가 항상 최소 300ピクセル 너비이지만, 50%의 컨테이너보다 작지 않도록 합니다.

clamp() 함수

clamp() 함수는 min()과 max()의 조합과 같습니다. 이 함수는 최소值, 선호值, 최대值를 받습니다. 예를 들어:

.responsive-element {
width: clamp(200px, 50%, 500px);
}

이는 너비를 컨테이너의 50%로 설정하지만, 최소 200ピクセル이고 최대 500ピクセル이 되도록 합니다.

고급 CSS 수학 함수

이제 기본적인 것을 다루고 보니, CSS 스킬을 다음 단계로 끌어올릴 수 있는 더 고급 함수들을 탐구해보겠습니다.

abs() 함수

abs() 함수는 숫자의 절대值를 반환합니다. 이는 애니메이션에서나 항상 양수인 값이 필요할 때 유용합니다. 예를 들어:

.box {
transform: translateX(abs(var(--x)));
}

이는 --x 커스텀 프로퍼티의 값에 따라 수직 방향으로 이동시키지만, 항상 양수 방향으로 이동합니다.

round() 함수

round() 함수는 숫자를 가장 가까운 정수로四捨五入합니다. 이는 값들을 그리드에 고정하는 데 유용합니다. 예를 들어:

.grid-item {
width: calc(round(100% / 3));
}

이는 각 칸의 너비를 100%를 3으로 나눈 값을 가장 가까운 정수로四捨五入한 값으로 설정합니다.

단계별 값 함수

단계별 값 함수는 값들이 부드럽게 변하는 대신, 특정 단계에서 변화하는 값을 만들 수 있습니다.

mod() 함수

mod() 함수는 나눗셈 후 나머지를 반환합니다. 이는 반복 패턴을 만드는 데 사용할 수 있습니다. 예를 들어:

.striped-background {
background-color: hsl(0, 0%, mod(var(--i) * 10, 100)%);
}

이는 각 줄의 밝기를 그 인덱스(--i)에 따라 결정하고, 10줄마다 반복합니다.

삼각 함수

마지막으로, 삼각 함수에 대해 살펴보겠습니다. 이 함수들은 복잡한 애니메이션과 레이아웃을 만드는 데 매우 강력합니다.

sin()과 cos() 함수

sin()과 cos() 함수는 각도의 사인과 余弦을 반환합니다. 이는 주로 애니메이션에서 사용됩니다. 간단한 예제를 보겠습니다:

@keyframes orbit {
from {
transform: rotate(0deg) translateX(100px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(100px) rotate(-360deg);
}
}

.orbiting-element {
animation: orbit 5s linear infinite;
}

이는 원 중앙을 중심으로 원운동하는 애니메이션을 만듭니다.

함수 참조 표

이제 우리가 다루었던 모든 CSS 수학 함수의 빠른 참조 표를 제공하겠습니다:

함수	설명	예제
calc()	기본 산술 연산 수행	calc(100% - 20px)
min()	가장 작은 값을 반환	min(5vw, 30px)
max()	가장 큰 값을 반환	max(300px, 50%)
clamp()	최소值와 최대值 사이에서 값 고정	clamp(200px, 50%, 500px)
abs()	절대值 반환	abs(var(--x))
round()	가장 가까운 정수로 四捨五入	round(100% / 3)
mod()	나머지 반환	mod(var(--i) * 10, 100)
sin()	각도의 사인 반환	sin(45deg)
cos()	각도의 余弦 반환	cos(45deg)

이제 여러분은 많은 내용을 다루었습니다. 기본 산술에서 고급 삼각 함수까지, 이를 습득하는 열쇠는 연습입니다. 이를 CSS에 통합하고, 다양한 조합을 실험하여, 쉽게 아름다운 반응형 디자인을 만들 수 있게 되세요. 행복한 코딩을 기원합니다!

Credits: Image by storyset