CSS 함수란

CSS에서 함수의 사용은 CSS의 진화와 함께 점차 확장되어 왔습니다. 초기의 CSS는 매우 단순한 스타일링 기능만을 제공했습니다. 예를 들어, CSS1(1996년 발표)에서는 주로 색상, 폰트, 간격 등의 기본적인 시각적 속성을 정의하는 데 초점을 맞췄습니다. 그러나 웹의 발전과 함께 더 복잡하고 다양한 디자인 요구가 생겨나기 시작했고, 이를 효율적으로 처리하기 위해 CSS도 발전해야 했습니다.

CSS 함수가 등장한 이유는 몇 가지로 요약할 수 있습니다:

1. 디자인의 복잡성 증가: 웹 페이지와 애플리케이션의 디자인이 점점 더 복잡해지면서, 개발자와 디자이너는 스타일을 더 세밀하게 제어할 수 있는 방법이 필요했습니다.
2. 유지 관리의 용이성: 함수를 사용하면 코드의 중복을 줄이고, 유지 관리를 용이하게 할 수 있습니다. 예를 들어, CSS 변수는 스타일 시트 전반에 걸쳐 일관된 디자인 값을 유지하는 데 도움이 됩니다.
3. 퍼포먼스와 접근성: 함수를 사용하면 브라우저가 계산을 처리하게 함으로써 성능을 최적화할 수 있습니다. 또한, 사용자의 시스템 설정에 따라 스타일을 동적으로 조정하는 등 접근성을 개선할 수도 있습니다.

 

calc()

•  역할: 다양한 단위의 값을 계산에 사용할 수 있습니다.
• 사용법: width: calc(100% - 80px);은 요소의 너비를 부모의 100%에서 80px을 뺀 값으로 설정합니다.

.container {
  width: calc(100% - 2em);
}

 

var() 

• 역할: CSS 변수의 값을 사용하게 합니다.
• 사용법: CSS 변수를 선언하고, var() 함수에서 CSS 변수 이름을 사용합니다.

:root {
  --main-color: #06c;
}
.text {
  color: var(--main-color);
}

 

clamp() 

• 역할: 값의 범위를 제한합니다. 최소값, 이상적 값, 최대값을 설정할 수 있습니다.
• 사용법: font-size: clamp(1rem, 2vw, 2rem);은 폰트 크기를 최소 1rem, 최대 2rem으로 설정하되, 뷰포트 너비에 따라 2vw로 조절합니다.

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

 

min() / max()

• 역할: 주어진 값들 중 최소값이나 최대값을 반환합니다.
• 사용법: width: min(100%, 500px);는 요소의 너비를 500px 이하의 100%로 설정합니다.

.box {
  width: max(300px, 50%);
}

 

filter 함수들 (blur(), brightness(), contrast() 등):

•  역할: 이미지나 요소에 다양한 시각 효과를 적용합니다.
• 사용법: filter: blur(5px);은 요소에 흐림 효과를 추가합니다.

.image {
  filter: brightness(50%) contrast(200%);
}

 

이 함수들은 CSS를 통해 더 다양하고 복잡한 디자인을 구현할 수 있게 해줍니다. 각 함수는 고유한 역할을 가지고 있으며, 복합적으로 사용될 때 더욱 강력한 효과를 발휘할 수 있습니다. CSS는 계속해서 발전하고 있으며, 앞으로도 새로운 함수와 기능이 도입될 것입니다.