CSS 팟캐스트 - 020: 함수
지금까지 이 과정에서 여러 CSS 함수를 살펴봤습니다.
그리드 모듈에서는 요소 크기를 조절하는 데 도움이 되는 minmax()
및 fit-content()
를 소개했습니다.
color 모듈에서는 색상을 정의하는 데 도움이 되는 rgb()
및 hsl()
를 소개했습니다.
다른 많은 프로그래밍 언어와 마찬가지로 CSS에는 필요할 때 언제든지 액세스할 수 있는 다수의 내장 함수가 있습니다.
모든 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 코드에서 값을 토큰화할 수 있는 변수입니다.
맞춤 속성도 계단식 적용의 영향을 받습니다. 즉, 문맥에 따라 조작하거나 재정의할 수 있습니다.
맞춤 속성의 접두사는 대시 두 개 (--
)여야 하며 대소문자를 구분합니다.
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()
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()
min()
함수는 전달된 하나 이상의 인수 중에서 계산된 가장 작은 값을 반환합니다.
max()
함수는 반대의 작업을 실행합니다. 전달된 인수 중 가장 큰 값을 가져옵니다.
.my-element {
width: min(20vw, 30rem);
height: max(20vh, 20rem);
}
이 예에서 너비는 표시 영역 너비의 20% 인 20vw
와 30rem
중 가장 작은 값이어야 합니다.
높이는 표시 영역 높이의 20% 인 20vh
와 20rem
중 가장 큰 값이어야 합니다.
clamp()
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
속성과 함께 사용됩니다.
회전
rotate()
함수를 사용하여 요소를 회전할 수 있습니다. 이 함수는 요소를 중심축을 기준으로 회전합니다.
rotateX()
, rotateY()
, rotateZ()
함수를 사용하여 특정 축에서 요소를 회전할 수도 있습니다.
각도, 회전, 라디안 단위를 전달하여 회전 수준을 결정할 수 있습니다.
.my-element {
transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}
rotate3d()
함수는 4개의 인수를 사용합니다.
처음 세 인수는 X, Y, Z 좌표를 정의하는 숫자입니다. 네 번째 인수는 다른 회전 함수와 마찬가지로 도, 각도, 회전을 허용하는 회전입니다.
.my-element {
transform: rotate3d(1, 1, 1, 10deg);
}
확장
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 배율이라는 세 가지 인수를 사용합니다.
번역
translate()
함수는 문서 흐름에서 위치를 유지하면서 요소를 이동합니다.
길이 및 비율 값을 인수로 사용합니다.
translate()
함수는 인수가 하나 정의된 경우 X 축을 따라 요소를 변환하고, 인수가 둘 다 정의된 경우 X 및 Y 축을 따라 요소를 변환합니다.
.my-element {
transform: translatex(40px) translatey(25px);
}
다른 변환 함수와 마찬가지로 translateX
, translateY
, translateZ
를 사용하여 특정 축에 특정 함수를 사용할 수 있습니다.
한 함수에서 X, Y, Z 변환을 정의할 수 있는 translate3d
도 사용할 수 있습니다.
편향
각도를 인수로 허용하는 skew()
함수를 사용하여 요소를 왜곡할 수 있습니다.
skew()
함수는 translate()
와 매우 유사한 방식으로 작동합니다.
인수를 하나만 정의하면 X 축에만 영향을 미치고 둘 다 정의하면 X 축과 Y 축에 영향을 미칩니다.
skewX
및 skewY
를 사용하여 각 축에 개별적으로 영향을 줄 수도 있습니다.
.my-element {
transform: skew(10deg);
}
사용자 시점
마지막으로, 변환 속성 패밀리의 일부인 perspective
속성을 사용하여 사용자와 Z 평면 사이의 거리를 변경할 수 있습니다.
이렇게 하면 거리감을 느낄 수 있으며 디자인에서 피사계 심도를 만드는 데 사용할 수 있습니다.
매우 유용한 도움말에서 데이비드 데산드로가 작성한 이 예에서는 perspective-origin-x
및 perspective-origin-y
속성과 함께 이를 사용하여 진정한 3D 환경을 만드는 방법을 보여줍니다.
애니메이션 함수, 그라데이션, 필터
또한 CSS는 요소에 animate하고, 그라데이션을 적용하고, 그래픽 필터를 사용하여 모양을 조작하는 데 도움이 되는 함수를 제공합니다. 이 모듈을 최대한 간결하게 유지하기 위해 링크된 모듈에서 다룹니다. 모두 이 모듈에서 설명한 함수와 유사한 구조를 따릅니다.
이해도 확인
함수에 대한 지식 테스트
CSS 함수는 어떤 문자로 식별할 수 있나요?
[]
()
:
{}
::
CSS에 수학 함수가 내장되어 있나요?
calc()
함수는 font-size: calc(10px + calc(5px * 3));
와 같이 다른 calc()
내에 배치할 수 있습니다.
다음 중 CSS 도형 함수는 무엇인가요?
ellipse()
polygon()
circle()
inset()
rect()
square()