소개
다른 프로그래밍 언어와 마찬가지로 CSS에는 함수가 있습니다. 값을 배치 할 위치에 삽입하거나 경우에 따라 다른 값 선언을 동반 할 수 있습니다. 일부 CSS 함수를 사용하면 다른 함수를 중첩 시킬 수도 있습니다!
프로그래밍에서 함수는 특정 작업을 수행하는 코드의 명명 된 부분입니다. 예를 들어 sayWoof()라는 JavaScript로 작성된 함수가 있습니다.
function sayWoof() { console.log("Woof!"); }
원하는 동작을 정의한 후 나중에 이 함수를 코드에서 사용할 수 있습니다. 이 예에서는 웹 사이트 또는 웹앱의 JavaScript에 sayWoof()를 입력 할 때마다“Woof!”가 인쇄됩니다. 브라우저의 콘솔에
함수는 인수를 사용할 수도 있습니다. 인수는 함수의 논리에 입력하여 수정하도록 할 수 있는 텍스트의 숫자 나 비트와 같은 슬롯입니다.
JavaScript에서 다음과 같이 작동합니다.
function countDogs(amount) { console.log("There are " + amount + " dogs!"); }
여기에는 count라는 인수가 있는 countDogs()라는 함수가 있습니다. 금액에 숫자가 제공되면 해당 숫자를 사용하여 미리 지정된 문장에 추가합니다. 이를 통해 우리가 몇 마리의 개를 세는지 알려주는 문장을 만들 수 있습니다.
countDogs(3); // There are 3 dogs! countDogs(276); // There are 276 dogs! countDogs("many"); // There are many dogs!
일부 프로그래밍 언어에는 베이크 인 기능이 포함되어있어 모든 새 프로젝트에서 휠을 재발견하지 않아도 됩니다.
일반적으로 이러한 기능은 언어의 주요 강점과 기능을 보다 쉽게 사용할 수 있도록 만들어졌습니다.
예를 들어 라이브러리를 사용하십시오. 라이브러리는 유연한 비디오 요소를 만들기 위해 FitVids.js를 생각하는 것처럼 효과적으로 함수화 된 컬렉션을 보다 빠르고 쉽게 개발할 수 있도록 도와주는 의견이 많은 코드 모음입니다.
CSS 함수의 기초
다른 프로그래밍 언어와 달리 우리는 CSS 자체로 함수를 만들 수 없습니다. 이러한 종류의 논리는 CSS 선택기에 예약되어 있으므로 강력한 조건부 스타일 규칙을 만들 수 있습니다.
함수의 출력이 일반적으로 다른 로직에 영향을 미치지 않는 다른 프로그래밍 언어와 달리 CSS 함수의 출력은 본질적으로 시각적입니다. 이 출력은 컨텐츠의 레이아웃과 프리젠 테이션을 모두 제어하는 데 사용됩니다. 예를 들면 다음과 같습니다.
.has-orange-glow { filter: drop-shadow(0.25rem 0 0.75rem #ef9035); }
CSS 필터 함수 drop-shadow()는 우리가 제공하는 인수를 사용하여 적용되는 모든 것에 주황색 외부 광선 효과를 만듭니다.
다음 데모에는 CSS-Tricks 로고에서 클래스 .has-orange-glow의 응용 프로그램을 전환하는 toggleOrangeGlow라는 JavaScript 함수가 있습니다. 이것을 CSS 전환과 결합하여 멋진 빛나는 효과를 만들 수 있습니다.
일부 CSS 기능에 익숙 할 수도 있지만 언어에는 놀라 울 정도로 광범위한 목록이 있습니다!
웹의 다른 기술과 마찬가지로 다른 CSS 기능은 서로 다른 수준의 브라우저 지원을 갖습니다. 귀하의 경험이 모든 사람에게 적합한 지 확인하고 조사하고 테스트하고 @supports와 같은 것을 사용하여 양질의 대체 경험을 제공하십시오.
CSS 사용자 정의 속성
var() 함수는 문서에서 앞서 선언 한 사용자 정의 속성을 참조하는 데 사용됩니다.
html { --color: orange; } p { color: var(--color); }
calc()와 결합하면 매우 강력합니다.
html { --scale: 1.2; --size: 0.8rem; } .size-2 { font-size: calc(var(--size) * var(--scale)); } .size-2 { font-size: calc(var(--size) * var(--scale) * var(--scale)); }
이것의 또 다른 예는 --ratio : 1.618;이라는 사용자 정의 속성을 선언하는 것입니다. 문서의 루트에서 CSS의 나중에 호출하여 line-height와 같은 행 높이를 제어하십시오. var (-ratio) ;.
여기에서 var()는 브라우저에 "문서에서 앞서 선언 한 --ratio라는 인수를 찾아서 값을 가져 와서 여기에 적용하십시오"라는 지시 사항 세트입니다.
생각해 내다! calc()를 사용하면 var()를 통해 제공하는 인수를 포함하여 작업을 동적으로 조정할 수 있습니다.
이를 통해 몇 줄의 코드만으로 CSS로 모듈식 스케일 시스템과 같은 것을 만들 수 있습니다. --ratio 값을 변경하면 전체 모듈 형 스케일 시스템이 일치하도록 업데이트 됩니다.
다음 CodePen 데모에서는 정확히 그렇게 했습니다. 펜의 CSS에서 --scale 값을 다른 숫자로 변경하여 의미를 확인하십시오.
또한 JavaScript의 setProperty 메소드는 사용자 정의 특성을 실시간으로 업데이트 할 수 있습니다. 이를 통해 이전에는 많은 복잡한 코드가 필요했던 것들을 빠르고 효율적으로 동적으로 변경할 수 있습니다.
의사 클래스 선택기 함수
이 선택기는 선택할 항목의 패턴을 지정하는 특수 인수 표기법을 사용합니다. 이를 통해 다른 모든 요소, 다섯 번째 요소, 일곱 번째 요소 다음의 세 번째 요소 등을 선택할 수 있습니다.
의사 클래스 선택기는 매우 다양하지만 종종 간과되고 평가되지 않습니다. 여러 선택기 중 일부를 신중하게 적용하면 하나 이상의 노드 패키지 작업을 수행 할 수 있습니다.
:nth-child()
nth-child()를 사용하면 DOM (Document Object Model) 트리에서 동일한 수준에 있는 요소 그룹에 있는 하나 이상의 요소를 대상으로 지정할 수 있습니다.
오른손에 : nth-child ()는 엄청나게 강력합니다. 당신은 그것으로 fizzbuzz를 해결할 수 있습니다! 시작하는 좋은 방법을 찾고 있다면 Chris는 유용한 의사 선택기 레시피 모음을 제공합니다.
:nth-last-child()
이 의사 클래스 선택기는 DOM에서 동일한 레벨에 있는 하나 이상의 요소 그룹에서 요소를 대상으로 합니다. 그룹의 마지막 요소부터 계산을 시작하고 사용 가능한 DOM 노드 목록에서 거꾸로 작동합니다.
:nth-of-type()
: nth-of-type()은 지정된 유형의 지정된 요소 컬렉션과 일치합니다. 예를 들어 img : nth-of-type(5) 선언은 페이지의 다섯 번째 이미지를 대상으로 합니다.
:nth-last-of-type()
이 유사 클래스 선택기는 유사한 유형의 요소 그룹에서 요소를 대상으로 할 수 있습니다. : nth-last-child()와 마찬가지로 그룹의 마지막 요소부터 계산을 시작합니다. : nth-last-child와 달리 뒤로 작동하므로 적용되지 않는 요소는 건너 뜁니다.
Sizing & Scaling Functions
우리가 애니메이션으로 하는 일반적인 일 중 하나는 스트레치와 스쿼시입니다. 다음 기능을 사용하면 정확하게 수행 할 수 있습니다. 그러나 CSS 함수는 변환 속성으로 만 작동 할 수 있다는 점에서 특별한 부분 집합입니다.
scaleX(), scaleY(), scaleZ(), scale3d(), and scale()
스케일링 기능을 사용하면 하나 이상의 축을 따라 무언가의 크기를 늘리거나 줄일 수 있습니다. scale3d()를 사용하면 3 차원으로도 할 수 있습니다!
translateX(), translateY(), translateZ(), translate3d(), and translate()
변환 함수를 사용하면 하나 이상의 축을 따라 요소를 재배치 할 수 있습니다. 스케일 기능과 마찬가지로 이 조작을 3 차원으로 확장 할 수도 있습니다.
perspective()
이 기능을 사용하면 객체의 모양을 조정하여 배경에서 위로 튀어 나오고 있는 것처럼 보이게 합니다.
rotateX(), rotateY(), rotateZ(), rotate3d(), and rotate()
회전 기능을 사용하면 공을 잡고 손으로 돌리는 것처럼 하나 이상의 축을 따라 요소를 회전 시킬 수 있습니다.
skewX(), skewY(), and skew()
기울이기 기능은 단일 점을 기준으로 왜곡 효과를 적용한다는 점에서 비율 조정 및 회전 기능과 약간 다릅니다. 왜곡의 양은 선언 된 각도와 거리에 비례합니다. 즉, 효과가 한 방향으로 더 멀리 있을수록 효과가 더욱 두드러집니다.
Jorge Moreno는 또한 우리 모두에게 호의를 베풀었고 CSS Transform Functions Visualizer라는 훌륭한 도구를 만들었습니다. 크기와 스케일링을 실시간으로 조정하여 이러한 모든 기능이 함께 작동하는 방식을 더 잘 이해할 수 있습니다.
책임감 있는 웹 전문가 인 우리는 사용자와 컨텐츠를 보기 위해 새롭거나 강력한 하드웨어를 사용하지 않을 수 있다는 사실을 기억해야 합니다. 크고 복잡한 애니메이션은 경험을 늦추거나 극단적 인 시나리오에서 브라우저 충돌을 일으킬 수 있습니다.
이를 방지하기 위해 will-change와 같은 기술을 사용하여 매장에 브라우저를 준비하고 미디어 업데이트 기능을 사용하여 빠른 새로 고침 빈도를 지원하지 않는 기기에서 애니메이션을 제거 할 수 있습니다.
그라디언트 함수
하나의 색상을 하나 이상의 다른 색상으로 전환하면 그라디언트가 생성됩니다. 숙련 된 디자이너와 개발자가 최신 사용자 인터페이스를 사용하여 작업에 세련미와 세련미를 불어 넣습니다.
그라디언트 함수를 사용하면 다음을 포함하여 전체 속성 범위를 지정할 수 있습니다.
그렇습니다. 짐작할 수 있습니다. 그래디언트에서 사용하는 색상은 CSS 색상 함수를 사용하여 설명 할 수 있습니다!
linear-gradient() and repeating-linear-gradient()
선형 그라디언트는 한 점에서 다른 점으로 직선으로 색상 변환을 적용합니다.이 선은 각도로 설정할 수도 있습니다. 그래디언트보다 면적이 더 큰 경우 repeating-linear-gradient()를 사용하면 사용 가능한 모든 영역이 채워질 때까지 설명한 그래디언트를 반복합니다.
radial-gradient() and repeating-radial-gradient()
방사형 그래디언트는 선형 그래디언트와 매우 유사하며 직선 대신에 색 변환이 중심점에서 바깥쪽으로 방사됩니다. 반투명 스크린을 만들어 배경과 모달을 구분하는 데 종종 사용됩니다.
conic-gradient() and repeating-conical-gradient
원추형 그래디언트는 원 주위에서 색상이 회전한다는 점에서 방사형 그래디언트와 다릅니다. 이 때문에 도넛 형 차트 만들기와 같은 깔끔한 작업을 수행 할 수 있습니다. 불행히도, 원추형 그라디언트에 대한 지원은 지속적으로 열악하므로 주의해서 사용하십시오.
Shape Functions
filter() 및 transform()과 마찬가지로 shape CSS 함수는 clip-path 속성 하나만 사용할 수 있습니다. 이 속성은 무언가의 일부를 가리는 데 사용되어 모든 종류의 멋진 효과를 만들 수 있습니다.
circle()
이 함수는 마스크의 원형을 만들어 반경과 위치를 지정할 수 있습니다.
ellipse()
circle()과 마찬가지로 ellipse()는 완벽한 원 대신 둥근 모양을 그리며 ellipse()를 사용하면 긴 마스크를 만들 수 있습니다.
polygon()
polygon()을 사용하면 임의의 수의 점을 지정하여 복잡한 모양을 그릴 수 있습니다. polygon()은 모양의 어느 부분이 내부 부분인지를 지정하는 선택적 채우기 규칙 인수도 사용합니다.
inset()
이 함수는 적용한 요소 내부의 사각형을 마스킹 합니다.
프라임 타임 준비 완료
다른 프로그래밍 언어와 마찬가지로 CSS에는 활발히 작업 중인 기능이 포함되어 있습니다.
이러한 함수는 때때로 가장자리에 접근 할 수 있는 브라우저를 사용하여 미리 볼 수 있습니다. Firefox Nightly와 Chrome Canary는 그러한 브라우저입니다. 다른 특징과 기능은 매우 새롭기 때문에 W3C에서 적극적으로 논의하는 내용에만 존재합니다.
annotation()
이 함수는 표기법 및 주석과 같은 것을 표시하기 위해 예약 된 문자 인 대체 주석 양식을 활성화합니다. 이러한 문자는 일반적으로 원, 사각형 또는 다이아몬드 모양으로 표시됩니다.
대체 서체 양식을 포함하는 서체가 많지 않으므로 annotation()을 사용하기 전에 사용 중인 서체에 서체가 포함되어 있는지 확인하는 것이 좋습니다. Wakamai Fondue와 같은 도구가 도움이 될 수 있습니다.
counter() and counters()
HTML로 정렬 된 목록을 만들면 브라우저가 자동으로 숫자를 생성하여 목록 항목 내용 앞에 놓습니다. 이러한 브라우저 생성 목록 내용을 카운터라고 합니다.
:: marker pseudo-element selector, content 속성 및 counter() 함수의 조합을 사용하여 정렬 된 목록에서 카운터의 내용 및 표시를 제어 할 수 있습니다. counter() 또는 counters()를 아직 지원하지 않는 브라우저의 경우 브라우저가 자동으로 생성 된 컨텐츠로 다시 돌아 가기 때문에 여전히 괜찮은 경험을 얻습니다.
중첩 된 순서 목록이 있는 경우 counters() 함수를 사용하면 자식 순서 목록이 부모 목록에 액세스 할 수 있습니다. 이를 통해 컨텐츠와 프리젠 테이션을 제어 할 수 있습니다. :: marker, counter() 및 counters()의 강력한 기능에 대해 자세히 알아 보려면 Rachel Andrew의 "CSS 목록, 마커 및 카운터"를 읽으십시오.
cross-fade()
이 기능을 사용하면 하나의 배경 이미지를 하나 이상의 다른 배경 이미지로 혼합 할 수 있습니다. 제안 된 구문은 그라디언트 함수와 유사하며 이미지 시작 및 종료 위치를 지정할 수 있습니다.
dir()
이 기능을 사용하면 언어의 읽기 순서 방향을 바꿀 수 있습니다. 영어의 경우 왼쪽에서 오른쪽 (ltr) 읽기 순서가 오른쪽에서 왼쪽 (rtl)으로 바뀝니다. Firefox에서만 현재 dir()을 지원하지만 [dir = "rtl"]과 같은 속성 선택기를 사용하여 Chromium 기반 브라우저에서 동일한 효과를 얻을 수 있습니다.
env()
환경의 약어 인 env()를 사용하면 장치의 사용자 에이전트가 일치하는 경우 트리거 되는 조건부 논리를 만들 수 있습니다. 그것은 노치와 함께 작동하는 방법으로 iPhone X에 의해 대중화되었습니다.
즉, 장치 스니핑은 잘못된 일입니다. env()를 속이는 방법으로 생각해서는 안됩니다. 대신 의도 한대로 사용하십시오. 뷰포트에 고유 한 하드웨어 제약 조건을 적용하는 장치에서 설계가 작동하는지 확인하십시오.
has()
has()는 HTML 소스에 하나 이상의 일치 항목이 있는 경우 다른 요소를 포함하는 요소를 대상으로 하는 관계형 의사 클래스입니다. 예를 들어 a : has (> img)는 브라우저에 이미지가 포함 된 모든 링크를 대상으로 지정합니다.
흥미롭게도 has()는 현재 JavaScript로만 작성할 수 있는 CSS로 제안 되고 있습니다. 이것이 왜 그런지 추측하려면 성능상의 이유로 선택기를 범위 지정하는 것입니다. 이 방법을 사용하면 브라우저가 조건부 논리를 처리하도록 명령 한 후에 만 상태를 쿼리 한 후에 has()가 트리거 됩니다.
image()
이 함수를 사용하면 정적 이미지 (url()로 참조)를 삽입하거나 그라디언트 및 element()를 통해 동적으로 이미지를 그릴 수 있습니다.
삼각법 함수
이러한 기능을 통해보다 고급 수학 연산을 수행 할 수 있습니다.
저보다 더 영리한 사람들이 이 기능을 사용하여 특히 애니메이션과 같은 일을 하는 것에 대해 특히 기쁘게 생각합니다.
clamp()
최소값, 최대 값 및 기본 설정 값을 인수로 제공 할 때 clamp()는 최소값과 최대 경계를 초과하지 않는 한 기본 설정 값을 준수합니다.
clamp()를 사용하면 크기가 뷰포트의 크기와 함께 확장되지만 특정 크기를 초과하여 축소되거나 커지지 않는 구성 요소와 같은 것을 작성할 수 있습니다. 이 기능은 CSS 잠금을 만드는 데 특히 유용합니다. CSS 잠금 형식은 읽을 수 없을 정도로 반응 형 크기가 작아지지 않도록 할 수 있습니다.
:host() and :host-context()
솔직히 말해서, 저는 Shadow DOM을 구동하는 전문 용어와 역학의 특성에 대해 조금 흐릿합니다. MDN이 host()를 설명하는 방법은 다음과 같습니다.
": host() CSS 의사 클래스 함수는 내부에서 사용되는 CSS를 포함하는 섀도 DOM의 섀도 호스트를 선택합니다 (따라서 섀도 DOM 내부에서 사용자 정의 요소를 선택할 수 있음). 섀도 호스트와 일치합니다."
그리고 다음은 그들이 말해야 할 내용입니다 : host-context() :
": host-context() CSS 의사 클래스 함수는 내부에서 사용되는 CSS를 포함하는 섀도 DOM의 섀도 호스트를 선택합니다 (따라서 섀도 DOM 내부에서 사용자 정의 요소를 선택할 수 있음). 함수의 매개 변수는 DOM 계층 구조 내에 위치하는 섀도우 호스트의 조상과 일치합니다."
:is() and :where()
: is()는 약간의 정체성 위기를 겪었습니다. 이전에는 match() 및 공급 업체 접두사가 : -webkit-any / :-moz-any로 모두 언급되었으므로 이제 표준화 된 합의 된 이름을 사용합니다. 선택기 범위를 인수로 받아들이는 의사 클래스 선택기입니다.
이를 통해 저자는 다양한 선택기를 효율적으로 그룹화 하고 타겟팅 할 수 있습니다. : where()는 : is()와 매우 유사하며, 0의 고유성을 갖지만, : is()의 특수성은 제공된 선택기 목록에서 가장 높은 고유성으로 설정됩니다.
: is() 및 : where()는 특히 웹 사이트 나 웹 앱의 스타일 시트를 많이 제어 할 수 없는 상황 (예 : 타사 통합)에서 스타일을 지정할 항목을 선택하는 방법에 대해 상당한 유연성을 제공합니다. , 광고 등).
https://twitter.com/argyleink/status/1192562385489260544
max() and min()
이 함수를 사용하면 제공 한 값 범위에서 최대 값 또는 최소값을 선택할 수 있습니다. clamp ()와 유사하게,이 함수들은 우리가 특정 지점까지 반응 할 수 있게 합니다.
:nth-col() and :nth-last-col()
이 유사 클래스를 사용하면 CSS 그리드에서 하나 또는 지정된 시리즈 열을 선택하여 스타일을 적용 할 수 있습니다. 이러한 함수의 작동 방식에 대한 좋은 정신 모델은 CSS 의사 클래스 선택기가 작동하는 방식입니다. 의사 클래스 선택기와 달리 : nth-col() 및 : nth-last-col()은 암시적 그리드 열을 대상으로 할 수 있어야 합니다.
symbols()
이 함수을 사용하면 목록 글 머리 기호에 사용할 다양한 종류의 문자 목록을 지정할 수 있습니다. annotation()과 마찬가지로, 사용하는 서체에 symbol()을 사용하기 전에 심볼로 사용할 글리프가 포함되어 있는지 확인해야 합니다.
왜 그렇게 많은가요?
CSS는 잘못 이해 될 때마다 잘못 정렬됩니다. 이러한 모든 기능을 사용할 수 있는 이유를 이해하려는 지침은 CSS가 규범 적이 지 않다는 것을 알고 있습니다. 모든 웹 사이트가 Microsoft Word 문서처럼 보일 필요는 없습니다.
웹을 구동하는 기술은 충분한 관심을 가진 사람이 원하는 대로 구축 할 수 있도록 설계되었습니다. 강력하고 혁신적인 개념으로 웹이 왜 보편적으로 사용 되는지에 대한 큰 부분을 차지합니다.
https://css-tricks.com/complete-guide-to-css-functions
일반적인 CSS 함수
url()
.el { background: url(/images/image.jpg); }
url()을 사용하면 다른 리소스에 연결하여 로드 할 수 있습니다. 여기에는 이미지, 글꼴 및 기타 스타일 시트가 포함될 수 있습니다. 성능상의 이유로 각 선언은 추가 HTTP 요청이므로 url()을 통해 로드 하는 항목을 제한하는 것이 좋습니다.
attr()
/* <div data-example="foo"> */ div { content: attr(data-example); }
이 함수를 사용하면 HTML에 도달하고 속성의 내용을 포착하여 CSS 내용 속성에 제공 할 수 있습니다. 텍스트 뒤에 링크의 URL을 표시하는 데 사용되는 인쇄 스타일 시트에 일반적으로 사용되는 attr()이 표시됩니다. 이 기능의 또 다른 훌륭한 응용 프로그램은 이 기능을 사용하여 이미지가 로드 되지 않은 경우 이미지의 대체 설명을 표시하는 것입니다.
calc()
.el { width: calc(100vw - 80px); }
한 가지 함수가 있다면 실험에 시간을 소비해야 하며 calc()입니다. calc()에 대한 완전한 안내서가 있습니다.
이 함수는 두 개의 인수를 사용하고 제공하는 연산자 (+,-, *, /)에서 결과를 계산합니다 (이 인수가 수반되는 단위가 있거나 없는 숫자 인 경우).
Sass와 같은 CSS 전처리 기와 달리 calc()는 단위를 혼합하여 6rem을 100 %에서 빼는 것과 같은 작업을 수행 할 수 있습니다. calc ()도 즉시 업데이트 되므로 100 %가 너비를 나타내는 경우 해당 너비가 변경 되어도 여전히 작동합니다. calc()는 CSS 사용자 정의 속성을 인수로 허용하여 놀라운 유연성을 제공합니다.
lang()
p:lang(en) { quotes: "\201C" "\201D" "\2018" "\2019" "\201C" "\201D" "\2018" "\2019"; }
HTML에 lang 속성을 포함 시키는 것은 정말로 중요한 일입니다. HTML에 있으면 lang () 함수를 사용하여 속성 값의 존재를 대상으로 하고 이를 기반으로 조건부로 스타일을 적용 할 수 있습니다.
이 선택기의 일반적인 용도 중 하나는 언어 별 따옴표를 설정하는 것인데, 이는 국제화와 같은 경우에 유용합니다.
영리한 디자이너와 개발자는 사이트의 번역 된 버전을 스타일링 하 기위한 후크로 사용할 수도 있습니다. 문화 및 / 또는 언어 고려 사항은 부정적인 공간과 같은 것에 대한 인식이 다르다는 것을 의미합니다.
:not()
h3:not(:first-child) { margin-top: 0; }
이 의사 클래스 선택기는 사용자가 지정하지 않은 것을 선택합니다. 예를 들어 body : not(img)가 아닌 이미지가 아닌 대상을 타겟팅 할 수 있습니다. 이 예제는 매우 강력하지만 BEM의 블록 클래스와 같이 더 집중된 선택자에 대해 : not() 범위를 지정하면 다양한 기능을 사용할 수 있습니다.
현재 : not()은 인수에 대해 하나의 선택기를 지원하지만 쉼표로 구분 된 여러 인수 (예 : div : not (.this, .that))에 대한 지원이 진행되고 있습니다!
Color Functions
CSS 함수에서 볼 수 있는 또 다른 일반적인 위치는 색상으로 작업 할 때입니다.
rgb() and rgba()
.el { color: rgb(255, 0, 0); color: rgba(255, 0, 0, 0.5); color: rgb(255 0 0 / 0.5); }
이 기능을 사용하면 숫자를 사용하여 색상의 빨강 (r), 초록 (g), 파랑 (b) 및 알파 (a) 레벨을 설명 할 수 있습니다. 예를 들어 16 진수 값이 # fb1010 인 붉은 색도 rgba (251, 16, 16, 1)로 설명 할 수 있습니다. 색상이 대부분 빨간색 정보로 구성되므로 빨간색 값 251은 녹색 및 파란색 값 (16 및 16)보다 훨씬 높습니다.
알파 값 1은 완전히 불투명하며 색상이 적용된 색상 뒤에 아무 것도 표시하지 않음을 의미합니다. 알파 값을 0.5로 변경하면 색상이 50 % 투명 해집니다. rgba() 대신 rgb() 함수를 사용하는 경우 알파 값을 제공 할 필요가 없습니다. 이렇게 하면 간결한 코드가 생성되지만 투명성을 사용하지 못하게 됩니다.
hsl() and hsla()
.el { background: hsl(100, 100%, 50%); background: hsla(100, 100%, 50%, 0.5); background: hsl(100 100% 50% / 0.5); }
rgb() 및 rgba()와 유사하게 hsl() 및 hsla()는 색상을 설명 할 수 있는 함수입니다. 빨강, 녹색 및 파랑을 사용하는 대신 hue (h), saturation (s) 및 lightness (l)를 사용합니다.
색상을 설명하는 모델이 체계화 된 색상 시스템에서 실제로 잘 작동하기 때문에 rgba()보다 hsla()를 사용하는 것이 좋습니다. 이러한 함수의 각 색상 수준 값은 CSS 사용자 정의 속성 일 수 있으며 강력하고 동적 인 코드를 작성할 수 있습니다.
새로운 색상 함수
다가오는 CSS 색상 모듈 레벨 4 사양에서는 rgba() 및 hsla()의 일부와 쉼표를 무시할 수 있습니다. 이제 공백은 rgb 및 hsl 인수를 구분하는 데 사용되며 알파 레벨을 나타내는 / 옵션이 있습니다.
이 새로운 형식을 사용하는 lab() 및 lch()와 같은 새로운 기능도 볼 수 있습니다.
애니메이션 함수
애니메이션은 웹 사이트 나 웹앱에 특정 콘텐츠를 추가 할 때 중요한 부분입니다. 사용자의 요구를 최우선으로 하고 애니메이션 기본 설정을 존중해야 합니다.
애니메이션을 만들려면 시간이 지남에 따라 사물의 상태를 제어해야 하므로 함수는 자연스럽게 적용 할 수 있습니다.
cubic-bezier()
ease, in-out-out 또는 linear와 같은 키워드 값 대신 cubic-bezier()를 사용하여 애니메이션에 대한 사용자 정의 타이밍 함수를 만들 수 있습니다. 입방 형 베 지어를 강화하는 수학에 대해 읽을 수는 있지만, 대신 하나를 만들어 놀아 보는 것이 훨씬 더 재미 있다고 생각합니다.
path()
이 함수는 오프셋 경로 특성과 쌍을 이룹니다. 다른 요소를 애니메이션으로 따라갈 수 있는 SVG 경로를 "그릴"수 있습니다.
Michelle Barker와 Dan Wilson은 애니메이션에 대한 이러한 접근 방식에 대해 자세히 설명하는 훌륭한 기사를 발표했습니다.
steps()
이 비교적 새로운 기능을 사용하면 애니메이션 전체에서 여유 시간을 설정할 수있어 애니메이션이 언제 발생하는지에 대한 제어력이 향상됩니다. 댄 윌슨 (Dan Wilson)은 기존 애니메이션 완화 환경에 어떻게 적용되는지에 대한 훌륭한 글을 썼습니다.
Filter Functions
CSS 필터 함수는 CSS 함수의 또 다른 특수 하위 집합으로, 필터 속성으로 만 작동 할 수 있습니다. 필터는 요소와 같은 특수 효과로 Photoshop과 같은 그래픽 편집 프로그램의 기능을 모방합니다.
인스타 그램의 게시물에 적용 할 수 있는 효과를 재현하는 것과 같은 CSS 필터 기능을 사용하여 정말 거친 일을 할 수 있습니다!
brightness()
이 함수는 음, 밝은 물체가 나타나는 방식을 조정합니다. 낮은 레벨로 설정하면 그림자가 드리워진 것처럼 보입니다. 높은 수준으로 설정하면 노출 과다 사진처럼 날려 버립니다.
blur()
Photoshop의 가우시안 블러 필터에 익숙하다면 blur()의 작동 방식을 알고 있습니다. 이 중 더 많이 적용할수록 적용 대상이 더 명확 해집니다.
contrast()
contrast()는 적용된 부분의 가장 밝은 부분과 가장 어두운 부분의 차이 정도를 조정합니다.
grayscale()
grayscale()은 적용된 정보에서 색상 정보를 제거합니다. 이것은 전혀 또는 전혀 문제가 아님을 기억하십시오! 부분적으로 회색조 효과를 적용하여 풍화되거나 씻겨 보일 수 있습니다.
어두운 모드가 활성화되어있을 때 grayscale()의 재미있는 응용 프로그램은 이미지에 가볍게 적용하여 사용자가 눈의 피로를 덜 원하는 상황에서 전체적인 색상의 진동을 약간 감소 시킬 수 있습니다.
invert()
invert()를 사용하여 사진을 부정적으로 보이게 할 수 있지만, 내가 좋아하는 기술은 사진을 반전 된 색상 미디어 쿼리에서 사용하여 반전 된 이미지와 비디오를 반전 시키는 것입니다.
@media (inverted-colors: inverted) { img, video { filter: invert(100%); } }
이를 통해 사용자의 표현 된 브라우징 모드 환경 설정에 관계없이 이미지 및 비디오 콘텐츠가 원하는 방식으로 표시됩니다.
opacity()
이 함수는 함수가 적용된 요소 (및 자식 요소)를 통해 표시되는 배경의 양을 제어합니다.
불투명도가 0 % 인 요소는 여전히 DOM에 존재하지만 완전히 투명합니다. 객체를 완전히 제거해야 하는 경우 숨겨진 속성과 같은 다른 기술을 사용하십시오.
saturate()
이 필터를 적용하면 적용되는 색상의 강도를 높이거나 낮출 수 있습니다. 이미지의 채도를 높이는 것은 사진 작가가 노출 부족 사진을 수정하는 데 사용하는 일반적인 기술입니다.
sepia()
이것을 설명하는 더 멋진 방법이 있지만 사실적으로 그것은 오래된 사진처럼 보이게 만드는 기능입니다.
drop-shadow()
그림자는 개체가 페이지에서 움직이는 것처럼 보이게 하는 시각적 효과입니다. CSS는 텍스트와 요소에 그림자 효과를 적용 할 수 있다는 점에서 약간의 트릭이 있습니다. box-shadow 속성과 구별되는 점은 요소의 실제 상자가 아닌 요소 모양에 그림자를 적용한다는 것입니다.
숙련 된 디자이너와 개발자는 이를 활용하여 복잡한 시각 효과를 만들 수 있습니다.
hue-rotate()
hue-rotate()가 포함 된 선언이 있는 클래스가 요소에 적용되면 해당 요소를 그리는 데 사용되는 각 픽셀의 색상 값이 지정한 양만큼 이동합니다. hue-rotate()의 효과는 적용된 모든 픽셀에 적용되므로 모든 색상은 색조 값의 시작점을 기준으로 업데이트 됩니다.
이렇게 하면 사진과 같이 많은 색상 정보가 포함 된 항목에 적용될 때 실제로 환각 효과를 낼 수 있습니다.
SVG filters
filter()를 사용하면 특수한 시각 효과를 만드는 데 사용할 SVG 필터를 가져올 수 있습니다. 이 기사에서 주제를 정의하기에는 너무 복잡합니다. 좋은 출발점을 찾고 있다면 Dirk Weber의“SVG 필터의 예술과 그 이유가 무엇입니까”를 추천합니다.
그리드 함수
CSS 그리드는 비교적 새로운 언어 기능입니다. 이를 통해 여러 화면 크기에 맞게 적응적이고 강력한 레이아웃을 효율적으로 만들 수 있습니다.
우리의 뿌리를 인정할 가치가 있습니다. Grid 이전에 CSS의 레이아웃은 주로 학술 문서를 형식화 하기 위해 설계된 언어로 작업하기 위한 일련의 체계화 된 해킹이었습니다. 그리드의 도입은 언어의 의도가 바뀌었다는 것을 더욱 인정합니다.
최신 CSS는 광범위한 장치 폼 팩터에서 프레젠테이션 및 레이아웃을 제어하기 위한 효율적이고 내결함성이 있는 언어입니다. Grid 및 flexbox와 같은 다른 속성을 갖추고 있기 때문에 CSS의 초기 반복에서는 만들 수 없었던 레이아웃을 만들 수 있습니다.
Grid는 다음 CSS 함수를 소개합니다.
fit-content()
이 함수는 그리드 행 또는 열의 크기를 "클램프"하여 그리드 트랙이 확장 할 수 있는 최대 크기를 지정할 수 있습니다. fit-content()는 다양한 값을 허용하지만 그중 가장 주목할만한 것은 min-content와 max-content입니다. 이 값을 사용하면 레이아웃을 포함하는 내용에 레이아웃을 연결할 수 있습니다. 인상적인 것들!
minmax()
minmax()를 사용하면 그리드 행과 열의 최소 및 최대 원하는 높이와 너비를 설정할 수 있습니다. 이 함수는 min-content와 max-content도 사용할 수 있으므로 많은 기능과 유연성을 제공합니다.
repeat()
repeat()을 사용하여 그리드 열과 행의 패턴을 반복 할 수 있습니다. 이것은 두 가지 시나리오에 유용합니다.
Miscellaneous Functions
이들은 분류 할 수 없는 CSS 함수이며 다른 곳에는 적합하지 않습니다.
element()
자체 비디오 피드로 카메라를 지적한 적이 있습니까? 그것은 element()가하는 일입니다. 다른 요소의 ID를 지정하여 해당 요소의 모양에 대한 "이미지"를 만들 수 있습니다. 그런 다음 CSS 필터와 같은 것을 포함하여 다른 CSS를 해당 이미지에 적용 할 수 있습니다!
개념을 둘러싼 머리를 감싸는 데 약간의 시간이 걸릴 수 있으며 약간의 지원 문제가 있지만 element()는 잠재적으로 매우 강력합니다.
Preethi Sam의“알려지지 않은 CSS element() 함수를 사용하여 미니 맵 네비게이터 만들기”는이 코드를 사용하여 코드 미니 맵을 만드는 방법을 보여 주며 훌륭한 자료입니다.
image-set()
이 함수를 사용하면 디스플레이 기능 및 연결 속도에 대해 알고 있는 내용을 기반으로 브라우저가 배경 이미지를 선택할 이미지 목록을 지정할 수 있습니다. srcset 속성으로 수행 할 작업과 유사합니다.
::slotted()
HTML 템플릿 내부의 슬롯에 배치 된 요소를 대상으로 하는 의사 요소 선택기입니다. :: slotted()는 개발자가 정의한 사용자 정의 HTML 요소 인 웹 구성 요소를 사용할 때 사용하기 위한 것입니다.
더 이상 사용되지 않는 함수
때로는 생각대로 작동하지 않는 경우가 있습니다. 더 이상 사용되지 않는 CSS 함수는 레거시 지원 이유로 브라우저에서 계속 렌더링 될 수 있지만 앞으로는 사용하지 않는 것이 좋습니다.
matrix() and matrix3d()
이러한 함수는 보다 개별적인 크기 조정 및 스케일링 기능으로 바뀌었습니다.
rect()
이 함수는 더 이상 사용되지 않는 클립 속성의 일부였습니다. 대신 clip-path 속성과 해당 값을 사용하십시오.
target-counter(), target-counters(), and target-text()
이 함수들은 페이징 된 (인쇄 된) 미디어의 조각 URL을 다루는 데 도움을 주기 위한 것입니다. 자세한 내용은 W3C의 페이지 미디어 모듈 용 CSS 생성 컨텐츠 설명서를 참조하십시오.
Typography
웹은 타이포그래피이므로 유형에 따라 주의를 기울여야 합니다. CSS는 웹 사이트 또는 웹앱에서 선택한 서체의 잠재력을 발휘할 수 있도록 특별히 설계된 일부 기능을 제공하지만 이러한 고급 기능에 액세스하기 위해 다음 기능을 사용하지 않는 것이 좋습니다.
대신 글꼴 기능 설정을 통해 하위 수준 구문을 사용하십시오. Wakamai Fondue와 같은 도구를 사용하여 사용 중인 글꼴이 이러한 기능을 지원하는지 확인할 수 있습니다.
character-variant(), styleset(), and stylistic()
전문 파운드리가 만든 많은 서체에는 특정 문자에 대한 대체 처리 또는 문자 조합이 포함됩니다. 사용 사례의 한 예는 필기처럼 보이도록 디자인 된 서체에 일반적으로 사용되는 다양한 문자를 제공하여보다 자연스럽게 보이도록 하는 것입니다.
이 함수를 사용하면 글꼴의 글리프 세트에 있는 특수 대체 문자가 활성화됩니다.
불행히도, 그것은 표준화 된 제안이 아닙니다. 타이포 그래퍼가 선택한 항목에 따라 서체마다 지원 범위가 다릅니다. 코드를 작성하기 전에 사용 중인 글꼴이 이러한 특수 기능을 지원하는지 확인하는 것이 좋습니다.
format()
url() 함수를 통해 글꼴을 가져올 때 format() 함수는 글꼴의 파일 형식을 수동으로 지정할 수 있는 선택적 힌트입니다. 이 힌트가 제공되면 지정된 파일 형식을 인식하지 못하면 브라우저에서 글꼴을 다운로드하지 않습니다.
@font-face { font-family: 'MyWebFont'; src: url('mywebfont.woff2') format('woff2'), /* Cutting edge browsers */ url('mywebfont.woff') format('woff'), /* Most modern Browsers */ url('mywebfont.ttf') format('truetype'); /* Older Safari, Android, iOS */ }
leader()
식당에서 메뉴를 읽을 때 어떤 메뉴 항목에 어떤 가격이 연결되어 있는지 알아내는 데 도움이 되는 일련의 기간이 있습니까? 이들은 지도자입니다.
W3C는 Paged Media Module에 대한 CSS Generated Content를 사용하여 계획을 세웠지 만 불행히도 leader()는 결코 이륙하지 못한 것처럼 보입니다. 다행히도 W3C는 콘텐츠 속성을 영리하게 적용하여 이 효과를 달성하는 방법에 대한 예를 제공합니다.
local()
local()을 사용하면 로컬에 설치된 글꼴을 지정할 수 있습니다. 이는 글꼴이 장치에 있음을 의미합니다. 로컬 글꼴은 장치와 함께 제공되거나 수동으로 설치할 수 있습니다.
글꼴을 설치하는 사람에게 베팅하여 원하는 방식으로 보는 것은 매우 위험합니다! 이 때문에 수동으로 설치해야 하는 로컬 글꼴을 지정하지 않는 것이 좋습니다. 대체 글꼴을 지정하지 않으면 사이트가 의도 한대로 보이지 않습니다.
@font-face { font-family: 'FeltTipPen'; src: local('Felt Tip Pen Web'), /* Full font name */ local('FeltTipPen-Regular'); /* Postscript name */ }
ornaments()
이 함수를 사용하여 특수 딩뱃 문자를 활성화 할 수 있습니다. 사용자가 글꼴을 변경하거나 특수한 브라우징 모드를 사용하는 경우 제대로 작동하는 방식으로 모든 딩뱃 문자가 올바르게 코딩 되지는 않으므로주의하십시오.
swash()
스와시는 글자를 번갈아 가며 번갈아 가며 번갈아 가며 번갈아 가며 번갈아 가며 번갈아 가며 보냅니다. 이탤릭체와 필기체 스타일의 서체에서 일반적으로 발견됩니다.
등록된 댓글이 없습니다.
