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()
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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()
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
min()
함수는 전달된 하나 이상의 인수에서 가장 작은 계산된 값을 반환합니다.
max()
함수는 그 반대로 합니다. 즉, 하나 이상의 전달된 인수 중에서 가장 큰 값을 가져옵니다.
.my-element {
width: min(20vw, 30rem);
height: max(20vh, 20rem);
}
이 예에서
너비는 20vw
사이의 최소 값이어야 합니다.
즉, 표시 영역 너비의 20% 이고 30rem
입니다.
높이는 20vh
에서 가장 큰 값이어야 합니다.
이는 표시 영역 높이의 20% 이고 20rem
입니다.
clamp()
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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
속성과 함께 사용됩니다.
회전
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
요소를 회전하려면
rotate()
드림
함수를 사용하여 중심축에서 요소를 회전합니다.
또한
rotateX()
님,
rotateY()
및
rotateZ()
함수를 사용하여 특정 축에서 요소를 회전할 수 있습니다.
각도, 회전, 라디안 단위를 전달하여 회전 수준을 결정할 수 있습니다.
.my-element {
transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}
rotate3d()
함수는 4개의 인수를 취합니다.
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
처음 3개 인수는 X, Y, Z 좌표를 정의하는 숫자입니다. 네 번째 인수는 순환게재로, 은 다른 회전 함수와 마찬가지로 각도, 각도 및 회전을 허용합니다.
.my-element {
transform: rotate3d(1, 1, 1, 10deg);
}
확장
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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 배율이라는 세 가지 인수가 필요합니다.
번역
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
translate()
함수는 문서 흐름에서 위치를 유지하는 동안 요소를 이동합니다.
길이 및 백분율 값을 인수로 허용합니다.
translate()
함수는 하나의 인수가 정의된 경우 X축을 따라 요소를 변환합니다.
두 인수가 모두 정의된 경우 X축과 Y축을 따라 요소를 변환합니다.
.my-element {
transform: translatex(40px) translatey(25px);
}
다른 변환 함수와 마찬가지로 특정 축에 특정 함수를 사용할 수 있습니다.
사용
translateX
님,
translateY
및
translateZ
:
또한
translate3d
드림
하나의 함수에 X, Y, Z 변환을 정의할 수 있습니다.
편향
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
skew()
드림
각도를 인수로 허용하는 함수.
skew()
함수는 translate()
와 매우 유사한 방식으로 작동합니다.
인수를 하나만 정의하면 X축에만 영향을 미치며 둘 다 정의하는 경우
X축과 Y축에 영향을 미칩니다.
또한
skewX
및
skewY
아이콘을 클릭하여 각 축에 독립적으로 영향을 줍니다.
.my-element {
transform: skew(10deg);
}
사용자 시점
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
마지막으로
perspective
속성
를 사용하여 사용자와 Z 평면 사이의 거리를 변경합니다.
이렇게 하면 거리감이 느껴지고 디자인에 피사계 심도를 더할 수 있습니다.
데이비드 데산드로(David Desandro)의 유용한 기사에서 이 예시는
perspective-origin-x
및 perspective-origin-y
속성과 함께 사용하여 진정한 3D 환경을 만들 수 있습니다.
애니메이션 함수, 그라데이션, 필터
CSS는 또한 요소에 애니메이션을 적용하는 데 도움이 되는 함수를 제공하여 그라데이션을 적용하고 그래픽 필터를 사용해 모양을 조작할 수 있습니다. 이 모듈을 최대한 간결하게 유지하려면 관련 모듈에서 다룹니다 모두 이 모듈에서 설명하는 함수와 유사한 구조를 따릅니다.
이해도 확인
함수에 관한 지식 테스트
CSS 함수는 어떤 문자로 식별할 수 있나요?
{}
()
::
[]
:
CSS에는 수학 함수가 내장되어 있나요?
calc()
함수는 font-size: calc(10px + calc(5px * 3));
와 같은 다른 calc()
내부에 배치할 수 있습니다.
다음 중 CSS 도형 함수는 무엇인가요?
inset()
ellipse()
rect()
circle()
polygon()
square()