함수

CSS 팟캐스트 - 020: 함수 를 통해 개인정보처리방침을 정의할 수 있습니다.

지금까지 여러 CSS 함수를 살펴봤습니다. grid 모듈에서 minmax() 및 fit-content()에 관해 알아봤습니다. 이는 요소의 크기를 조정하는 데 도움이 됩니다. color 모듈에서 색상을 정의하는 데 도움이 되는 rgb() 및 hsl()를 알아봤습니다.

다른 많은 프로그래밍 언어와 마찬가지로 CSS에는 많은 기본 제공 함수가 있습니다. 언제든지 액세스할 수 있습니다.

모든 CSS 함수에는 특정 목적이 있으므로 이 강의에서는 대략적인 개요와 어디서 어떻게 사용해야 하는지 훨씬 더 잘 이해할 수 있습니다.

함수란 무엇인가요?

함수는 특정 작업을 완료하는, 이름이 지정된 독립 실행형 코드입니다. 함수에는 코드 내에서 호출할 수 있도록 이름이 지정되며, 함수에 데이터를 전달할 수 있습니다. 이를 인수 전달이라고 합니다.

위에 설명된 함수의 다이어그램

많은 CSS 함수가 순수 함수이지만 즉, 동일한 인수를 전달하면 항상 동일한 결과를 얻게 되지만 할 수 있습니다. 이러한 함수는 CSS의 값이 변경되면 다시 계산되므로 언어의 다른 요소와 유사하지만 currentColor와 같은 계산된 계단식 값과 같은 특성이 있습니다.

CSS에서는 제공된 함수만 사용할 수 있습니다. 직접 작성하는 대신 함수는 일부 컨텍스트에서 서로 중첩될 수 있습니다. 유연성을 제공합니다 이에 대해서는 이 모듈의 후반부에서 자세히 다루겠습니다.

함수 선택기

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

함수 선택기에 관해서는 의사 클래스 모듈 예를 들어 :is() 및 :not() 이 함수에 전달되는 인수는 CSS 선택자, 평가되어야 합니다 요소와 일치하는 항목이 있는 경우 CSS 규칙의 나머지 부분이 적용됩니다.

맞춤 속성 및 var()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

맞춤 속성은 CSS 코드의 값을 토큰화할 수 있는 변수입니다. 맞춤 속성은 캐스케이드의 영향을 받습니다. 문맥적으로 조작되거나 재정의될 수 있습니다. 커스텀 속성 앞에는 대시 2개 (--)를 붙여야 하며 대소문자를 구분합니다.

var() 함수는 필수 인수 한 개를 사용합니다. 반환합니다. 위 스니펫에서 var() 함수는 --base-color를 인수로 전달했습니다. --base-color가 정의되면 var()는 값을 반환합니다.

.my-element {
    background: var(--base-color, hotpink);
}

대체 선언 값을 var() 함수에 전달할 수도 있습니다. 즉, --base-color를 찾을 수 없으면 전달된 선언이 대신 사용되며 이 샘플에서는 hotpink 색상입니다.

값을 반환하는 함수

var() 함수는 값을 반환하는 CSS 함수 중 하나일 뿐입니다. 다음과 같은 기능 attr() 및 url()는 var()와 유사한 구조를 따릅니다. 하나 이상의 인수를 전달하여 CSS 선언의 오른쪽에서 사용합니다.

a::after {
  content: attr(href);
}

여기서 attr() 함수 <a> 요소의 href 속성 콘텐츠를 가져옵니다. ::after 의사 요소의 content로 설정합니다. <a> 요소의 href 속성 값을 변경하려는 경우 이는 이 content 속성에 자동으로 반영됩니다.

.my-element {
    background-image: url('/path/to/image.jpg');
}

url() 함수는 문자열 URL을 사용하며 이미지, 글꼴, 콘텐츠를 로드하는 데 사용됩니다. 유효한 URL이 전달되지 않았거나 URL이 가리키는 리소스를 찾을 수 없는 경우 url() 함수에서 아무것도 반환하지 않습니다.

색상 함수

색상 함수에 관해서는 color 모듈에서 모두 알아봤습니다. 아직 읽어보지 않았다면 읽어볼 것을 적극 권장합니다.

CSS에서 사용할 수 있는 일부 색상 함수는 rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch() 모두 구성 인수가 전달되고 색상이 반환되는 비슷한 형식을 갖습니다.

수식

다른 많은 프로그래밍 언어와 마찬가지로 CSS는 유용한 수학 함수를 제공하여 다양한 계산 유형을 지원합니다.

calc()

브라우저 지원

  • Chrome: 26. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 7. <ph type="x-smartling-placeholder">

소스

calc() 함수는 단일 수학 표현식을 매개변수로 사용합니다. 이 수학 표현식은 길이, 숫자, 각도, 주파수 등을 예로 들 수 있습니다. 단위도 혼합할 수 있습니다.

.my-element {
    width: calc(100% - 2rem);
}

이 예에서는 calc() 함수를 사용하여 요소의 너비 크기를 조정합니다. 포함된 상위 요소의 100% 로 간주되므로 그런 다음 계산된 값에서 2rem를 삭제합니다.

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

calc() 함수는 다른 calc() 함수 내에 중첩될 수 있습니다. var() 함수에 커스텀 속성을 표현식의 일부로 전달할 수도 있습니다.

min() 및 max()

브라우저 지원

  • Chrome: 79 <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 75 <ph type="x-smartling-placeholder">
  • Safari: 11.1. <ph type="x-smartling-placeholder">

소스

min() 함수는 전달된 하나 이상의 인수에서 가장 작은 계산된 값을 반환합니다. max() 함수는 그 반대로 합니다. 즉, 하나 이상의 전달된 인수 중에서 가장 큰 값을 가져옵니다.

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

이 예에서 너비는 20vw 사이의 최소 값이어야 합니다. 즉, 표시 영역 너비의 20% 이고 30rem입니다. 높이는 20vh에서 가장 큰 값이어야 합니다. 이는 표시 영역 높이의 20% 이고 20rem입니다.

clamp()

브라우저 지원

  • Chrome: 79 <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 75 <ph type="x-smartling-placeholder">
  • Safari 13.1. <ph type="x-smartling-placeholder">

소스

clamp() 함수는 최소 크기, 지정할 수 있습니다.

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

이 예에서 font-size는 표시 영역의 너비에 따라 유동적으로 변합니다. vw 단위는 rem 단위에 추가되어 화면 확대/축소를 지원합니다. 이는 확대/축소 수준과 관계없이 vw 단위가 동일한 크기가 되기 때문입니다. 루트 글꼴 크기에 따라 rem 단위를 곱합니다. clamp() 함수에 상대적인 계산 지점을 제공합니다.

min(), max(), clamp() 함수에 관한 자세한 내용은 다음을 참고하세요. 이 도움말을 참고하세요.

도형

이 clip-path님, offset-path 및 shape-outside CSS 속성은 도형을 사용하여 상자를 시각적으로 자르거나 콘텐츠가 흐를 수 있는 도형을 제공합니다.

이러한 두 속성과 함께 사용할 수 있는 도형 함수가 있습니다. 다음과 같은 단순한 도형 circle()님, ellipse() 및 inset() 구성 인수를 사용하여 크기를 조정합니다 다음과 같이 더 복잡한 도형 polygon() 드림 쉼표로 구분된 X축 및 Y축 값 쌍을 가져와서 맞춤 도형을 만듭니다.

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

polygon()와 마찬가지로 SVG 채우기 규칙을 인수로 사용하는 path() 함수도 있습니다. 이렇게 하면 그래픽 도구로 그릴 수 있는 매우 복잡한 도형을 그릴 수 있습니다. Illustrator 또는 Inkscape를 사용한 다음 CSS에 복사됩니다.

변환

마지막으로 CSS 함수에 대한 개요에서 변환 함수는 요소의 깊이를 변경 및 왜곡할 수 있습니다. 다음 함수는 모두 transform 속성과 함께 사용됩니다.

회전

브라우저 지원

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 3.5 <ph type="x-smartling-placeholder">
  • Safari: 3.1. <ph type="x-smartling-placeholder">

소스

요소를 회전하려면 rotate() 드림 함수를 사용하여 중심축에서 요소를 회전합니다. 또한 rotateX()님, rotateY() 및 rotateZ() 함수를 사용하여 특정 축에서 요소를 회전할 수 있습니다. 각도, 회전, 라디안 단위를 전달하여 회전 수준을 결정할 수 있습니다.

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

rotate3d() 함수는 4개의 인수를 취합니다.

브라우저 지원

  • Chrome: 12. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 10. <ph type="x-smartling-placeholder">
  • Safari: 4. <ph type="x-smartling-placeholder">

소스

처음 3개 인수는 X, Y, Z 좌표를 정의하는 숫자입니다. 네 번째 인수는 순환게재로, 은 다른 회전 함수와 마찬가지로 각도, 각도 및 회전을 허용합니다.

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

확장

브라우저 지원

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 3.5 <ph type="x-smartling-placeholder">
  • Safari: 3.1. <ph type="x-smartling-placeholder">

소스

transform 및 scale() 함수 이 함수는 하나 또는 두 개의 숫자를 양수 또는 음수 배율을 결정하는 값으로 허용합니다. 숫자 인수를 하나만 정의하는 경우 X축과 Y축은 모두 동일하게 조정되며 두 축은 X와 Y의 약칭으로 정의합니다. rotate()와 마찬가지로 그 어떤 플랫폼보다도 scaleX(), scaleY() 및 scaleZ() 함수를 사용하여 특정 축의 요소의 크기를 조정할 수 있습니다.

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

또한 rotate 함수와 마찬가지로 scale3d() 함수 scale()와 비슷하지만 X, Y, Z 배율이라는 세 가지 인수가 필요합니다.

번역

브라우저 지원

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 3.5 <ph type="x-smartling-placeholder">
  • Safari: 3.1. <ph type="x-smartling-placeholder">

소스

translate() 함수는 문서 흐름에서 위치를 유지하는 동안 요소를 이동합니다. 길이 및 백분율 값을 인수로 허용합니다. translate() 함수는 하나의 인수가 정의된 경우 X축을 따라 요소를 변환합니다. 두 인수가 모두 정의된 경우 X축과 Y축을 따라 요소를 변환합니다.

.my-element {
  transform: translatex(40px) translatey(25px);
}

다른 변환 함수와 마찬가지로 특정 축에 특정 함수를 사용할 수 있습니다. 사용 translateX님, translateY 및 translateZ: 또한 translate3d 드림 하나의 함수에 X, Y, Z 변환을 정의할 수 있습니다.

편향

브라우저 지원

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 3.5 <ph type="x-smartling-placeholder">
  • Safari: 3.1. <ph type="x-smartling-placeholder">

소스

skew() 드림 각도를 인수로 허용하는 함수. skew() 함수는 translate()와 매우 유사한 방식으로 작동합니다. 인수를 하나만 정의하면 X축에만 영향을 미치며 둘 다 정의하는 경우 X축과 Y축에 영향을 미칩니다. 또한 skewX 및 skewY 아이콘을 클릭하여 각 축에 독립적으로 영향을 줍니다.

.my-element {
  transform: skew(10deg);
}

사용자 시점

브라우저 지원

  • Chrome: 36. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

소스

마지막으로 perspective 속성 를 사용하여 사용자와 Z 평면 사이의 거리를 변경합니다. 이렇게 하면 거리감이 느껴지고 디자인에 피사계 심도를 더할 수 있습니다.

데이비드 데산드로(David Desandro)의 유용한 기사에서 이 예시는 perspective-origin-x 및 perspective-origin-y 속성과 함께 사용하여 진정한 3D 환경을 만들 수 있습니다.

애니메이션 함수, 그라데이션, 필터

CSS는 또한 요소에 애니메이션을 적용하는 데 도움이 되는 함수를 제공하여 그라데이션을 적용하고 그래픽 필터를 사용해 모양을 조작할 수 있습니다. 이 모듈을 최대한 간결하게 유지하려면 관련 모듈에서 다룹니다 모두 이 모듈에서 설명하는 함수와 유사한 구조를 따릅니다.

이해도 확인

함수에 관한 지식 테스트

CSS 함수는 어떤 문자로 식별할 수 있나요?

[]
이러한 문자는 JavaScript의 배열용입니다.
{}
이러한 문자는 CSS에서 규칙을 래핑합니다.
()
함수는 이러한 문자를 사용하여 인수를 래핑합니다.
::
이러한 문자는 CSS의 의사 요소에 사용됩니다.
:
이러한 문자는 CSS의 의사 클래스에 사용됩니다.

CSS에는 수학 함수가 내장되어 있나요?

참
사용할 수 있는 도구가 많아지고 있으며 앞으로 사양과 브라우저에 더 많은 기능이 추가되고 있습니다.
거짓
다시 시도해 보세요.

calc() 함수는 font-size: calc(10px + calc(5px * 3));와 같은 다른 calc() 내부에 배치할 수 있습니다.

참
🎉
거짓
다시 시도해 보세요.

다음 중 CSS 도형 함수는 무엇인가요?

ellipse()
🎉
square()
다시 시도해 보세요.
circle()
🎉
rect()
다시 시도해 보세요.
inset()
🎉
polygon()
🎉