CSS 팟캐스트 - 020: 함수
지금까지 이 과정에서 여러 CSS 함수를 살펴봤습니다.
그리드 모듈에서는 요소의 크기를 조절하는 데 도움이 되는 minmax() 및 fit-content()를 알아봤습니다.
color 모듈에서는 색상 정의에 도움이 되는 rgb() 및 hsl()를 알아봤습니다.
다른 많은 프로그래밍 언어와 마찬가지로 CSS에는많은 기본 제공 함수가 필요할 때마다 액세스할 수 있습니다.
모든 CSS 함수에는 특정한 목적이 있습니다. 이 강의에서는 CSS 함수를 어디에 어떻게 사용하는 지를 훨씬 더 잘 이해할 수 있도록 대략적인 개요를 제공합니다.
함수란 무엇인가요?
함수는 이름이 지정된 독립적인 코드로, 특정 작업을 완료합니다. 함수는 코드 내에서 호출할 수 있고 함수에 데이터를 전달할 수 있도록 이름이 지정됩니다. 이를 인수 전달이라고 합니다.
많은 CSS 함수는 순수 함수입니다. 즉, 동일한 인수를 전달하면 코드의 나머지 부분에서 발생하는 상황에 관계없이 항상 동일한 결과가 반환됩니다.
이러한 함수는 currentColor와 같이 계산된 계단식 값 등 언어의 다른 요소와 유사하게 CSS에서 값이 변경될 때 다시 계산되는 경우가 많습니다.
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()
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);
}
이 예에서 너비는 20vw(표시 영역 너비의 20%)과 30rem 사이의 가장 작은 값이어야 합니다.
높이는 20vh(표시 영역 높이의 20%)과 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 속성과 함께 사용됩니다.
rotation
중심 축을 기준으로 요소를 회전하는 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를 사용하여 특정 축에 특정 함수를 사용할 수 있습니다.
translate3d를 사용하여 하나의 함수에서 X, Y, Z 변환을 정의할 수도 있습니다.
편향
각도를 인수로 허용하는 skew() 함수를 사용하여 요소를 왜곡할 수 있습니다.
skew() 함수는 translate()와 매우 유사한 방식으로 작동합니다.
인수를 하나만 정의하면 X축에만 영향을 미치고, 둘 다 정의하면 X축과 Y축에 영향을 미칩니다.
skewX 및 skewY를 사용하여 각 축에 독립적으로 영향을 미칠 수도 있습니다.
.my-element {
transform: skew(10deg);
}
사용자 시점
마지막으로, 속성 변환 계열의 일부인 perspective 속성을 사용하여 사용자와 Z 평면 간의 거리를 변경할 수 있습니다.
거리감이 느껴지며 디자인에 피사계 심도를 연출하는 데 사용할 수 있습니다.
데이비드 데산드로가 작성한 이 예에서는 매우 유용한 도움말을 통해 perspective-origin-x 및 perspective-origin-y 속성과 함께 실제 3D 환경을 만드는 방법을 보여줍니다.
애니메이션 함수, 그라데이션, 필터
CSS는 요소에 애니메이션을 적용하고, 그래디언트를 적용하고, 그래픽 필터를 사용하여 모양을 조작하는 데 도움이 되는 함수도 제공합니다. 이 모듈을 최대한 간결하게 유지하기 위해 연결된 모듈에서 이 내용을 다룹니다. 이러한 함수는 모두 이 모듈에서 설명하는 함수와 유사한 구조를 따릅니다.
이해도 테스트
함수에 관한 지식 테스트
CSS 함수를 식별할 수 있는 문자는 무엇인가요?
[]{}():::CSS에 수학 기능이 내장되어 있나요?
calc() 함수는 font-size: calc(10px + calc(5px * 3)); 같은 다른 calc() 내에 배치할 수 있습니다.
다음 중 CSS 도형 함수는 무엇인가요?
ellipse()square()circle()rect()inset()polygon()