[CSS] 함수 (calc(), min(), max())

다양한 CSS함수 calc(), min(), max() 등을 활용하여 웹 페이지를 더욱 동적이고 반응형으로 만들 수 있습니다.

• 유연한 레이아웃 구현: 다양한 화면 크기와 기기에 맞춰 웹 페이지를 최적화할 수 있습니다.
• 동적인 스타일링: 사용자의 상호 작용이나 콘텐츠의 변화에 따라 스타일을 동적으로 변경할 수 있습니다.
• 복잡한 계산: 단순한 값뿐만 아니라 다양한 수학적 연산을 통해 정확한 값을 계산할 수 있습니다.
• 코드 재사용성: 반복되는 계산을 함수로 정의하여 코드의 가독성을 높이고 유지보수를 용이하게 합니다.

CSS 함수의 종류와 활용법

1. calc() 함수:

• 설명: 사칙연산, 백분율, 다른 단위를 조합하여 값을 계산합니다.
• 문법: calc(expression)
• 예시:

  .container {
    width: calc(100% - 20px); /* 전체 너비에서 20px 빼기 */
    padding: calc(1rem + 10px); /* 1rem과 10px 더하기 */
  }
  

• 활용:
  • 여백, 패딩, 마진 값 계산
  • 다양한 단위 조합 (px, em, rem, %, vw, vh)
  • 반응형 디자인에서 동적인 값 계산

2. min() 함수:

• 설명: 여러 값 중 가장 작은 값을 반환합니다.
• 문법: min(value1, value2, ...)
• 예시:

  .element {
    font-size: min(2rem, 5vw); /* 2rem과 화면 너비의 5% 중 작은 값 */
  }
  

• 활용:
  • 최소값 제한
  • 반응형 디자인에서 최소 크기 설정

3. max() 함수:

• 설명: 여러 값 중 가장 큰 값을 반환합니다.
• 문법: max(value1, value2, ...)
• 예시:

  .container {
    width: max(300px, 50%); /* 300px와 화면 너비의 50% 중 큰 값 */
  }
  

• 활용:
  • 최대값 제한
  • 반응형 디자인에서 최대 크기 설정

4. clamp() 함수:

• 설명: 최소, 기본, 최대값을 설정하여 유연한 값을 지정합니다.
• 문법: clamp(min, preferred, max)
• 예시:

  .font {
    font-size: clamp(1rem, 1.5vw, 2rem); /* 최소 1rem, 기본 1.5vw, 최대 2rem */
  }
  

• 활용:
  • 텍스트 크기를 다양한 화면 크기에 맞춰 조절
  • 요소의 크기를 유연하게 관리

CSS 함수를 활용한 실제 예시

• 반응형 레이아웃:

  .container {
    width: calc(100vw - 2rem); /* 화면 너비에서 2rem 빼기 */
    padding: 2rem;
  }
  

• 다양한 화면 크기에 맞는 폰트 크기:

  h1 {
    font-size: clamp(2rem, 5vw, 3rem);
  }
  

• 동적인 콘텐츠 영역:

  .content {
    height: calc(100vh - 100px); /* 화면 높이에서 100px 빼기 */
  }