CSS 함수

1. CSS 함수

CSS 함수는 CSS 속성 값으로 계산식을 지정할 수 있는 도구입니다. 주로 calc(), min(), max(), clamp() 함수가 사용됩니다.

1.1 calc()

CSS 속성 값을 계산할 때 사용합니다. +, -, *, / 사칙연산이 가능하며, 서로 다른 단위끼리 계산할 수 있습니다.

+와 - 연산자의 좌우 공백을 꼭 요구합니다!

calc(50% -80px)는 유효하지 않습니다. calc(8px + -50%)는 길이와 음의 백분율 간의 덧셈으로 처리됩니다. *, / 연산자는 좌우 공백을 요구하지 않지만, 일관성을 위해 넣는 것이 좋습니다.

예시: 요소를 화면에 여백과 함께 배치하기

<div class="container">
  <h1>반응형 컨테이너</h1>
  <p>
    이 컨테이너는 최대 1400px 너비를 가지며, 화면이 작아지면 양쪽에 30px의
    여백을 유지합니다.
  </p>
</div>

.container {
  width: 1400px;
  margin: auto;
  max-width: calc(100% - 60px);
  background-color: #f0f0f0;
  padding: 20px;
}

h1 {
  color: #333;
}

p {
  line-height: 1.6;
}

예시: 레이아웃 단 구성하기

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

li {
  float: left;
  width: calc((100% - (24px * 2)) / 3);
}
li:not(:first-child) {
  margin-left: 24px;
}

1.2 min(), max()

min()과 max() 함수는 여러 값 중 최소값 또는 최대값을 선택합니다.

<div class="responsive-box">
  <h2>반응형 박스</h2>
  <p>이 박스는 화면 크기에 따라 너비가 조절됩니다.</p>
</div>

.responsive-box {
  width: min(600px, 90%);
  margin: auto;
  padding: 20px;
  background-color: #e0e0e0;
  border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999)));
}

h2 {
  color: #444;
}

p {
  font-size: max(14px, min(16px, 4vw));
}

1.3 clamp() 함수

clamp() 함수는 값을 지정된 범위 내로 고정합니다.

clamp(최소값, 선호값, 최대값)

작동 방식은 아래와 같습니다.

선호값이 최소값과 최대값 사이에 있으면 선호값을 사용합니다.
선호값이 최소값보다 작으면 최소값을 사용합니다.
선호값이 최대값보다 크면 최대값을 사용합니다.

<div class="text-container">
  <h3>반응형 텍스트</h3>
  <p class="responsive-text">
    이 텍스트의 크기는 화면 너비에 따라 변하지만, 최소 및 최대 크기가
    제한됩니다.
  </p>
</div>

.text-container {
  width: 80%;
  margin: auto;
  padding: 20px;
  background-color: #f5f5f5;
}

h3 {
  font-size: clamp(20px, 4vw, 32px);
  color: #333;
}

.responsive-text {
  font-size: clamp(16px, 2.5vw, 24px);
  line-height: 1.5;
  color: #666;
}