CSS 기능 가이드

CSS 기능 안내서 : 스타일을 제어하는 ​​강력한 도구

다른 프로그래밍 언어와 마찬가지로 CSS에는 기능이 있습니다. 이러한 함수는 값의 위치에 삽입되거나 경우에 따라 다른 값 선언에 사용될 수 있습니다. 일부 CSS 기능은 다른 기능을 할 수 있습니다!

더

프로그래밍에서 함수는 특정 작업을 수행하는 명명 된 코드입니다. 예를 들어 javaScript의 함수는 sayWoof() :

 함수 sayswoof () {
 Console.log ( "Woof!");
}

원하는 동작을 정의한 후이 기능을 사용할 수 있습니다. 이 예에서는 웹 사이트 또는 웹 애플리케이션의 JavaScript에 sayWoof() 입력 할 때마다 "Woof!"를 인쇄합니다. 브라우저의 콘솔에.

함수는 숫자 또는 텍스트 조각의 슬롯 인 매개 변수를 사용할 수 있으며,이를 수정하기 위해 함수의 논리에 입력 할 수 있습니다. JavaScript에서는 다음과 같이 작동합니다.

 함수 countdogs (금액) {
 Console.log ( "금액"개가 있습니다! ");
}

여기에는 countDogs() 라는 함수가 있으며, 이는 amount 이라는 매개 변수가 있습니다. 숫자가 amount 으로 제공되면 해당 숫자를 가져 와서 사전 지정 된 문장에 추가합니다. 이를 통해 우리는 몇 마리의 개를 세 었는지 알려주는 문장을 만들 수 있습니다.

 Countdogs (3); // 개 3 마리가 있습니다!
Countdogs (276); // 276 마리의 개가 있습니다!
Countdogs ( "많은"); // 개가 많습니다!

일부 프로그래밍 언어에는 내장 기능이있어 새로운 프로젝트마다 휠을 재창조하지 않도록 도와줍니다. 일반적으로 이러한 기능은 언어의 주요 장점과 기능을보다 쉽게 ​​사용할 수 있도록 설계되었습니다.

예를 들어, 라이브러리. 라이브러리는 유연한 비디오 요소를 만들기 위해 FitVids.js와 같은 개발 속도를 높이고 단순화하도록 설계된 신중하게 선택된 기능 컬렉션으로 구성된 코드 모음입니다.

### CSS 기능의 기본 사항

다른 프로그래밍 언어와 달리 CSS에서 우리 자신의 기능을 만들 수 없습니다. 이 논리는 CSS 선택기를 위해 예약되어있어 강력한 조건부 스타일 규칙을 만들 수 있습니다.

다른 프로그래밍 언어 (다른 프로그래밍 언어의 함수 출력)와 달리 일반적으로 후속 논리에 암시 적으로 영향을 미칩니다. CSS 기능의 출력은 본질적으로 시각적입니다. 이 출력은 컨텐츠의 레이아웃 및 프리젠 테이션을 제어하는 ​​데 사용됩니다. 예를 들어:

 .Has-Orange-Glow {
  필터 : Drop-Shadow (0.25REM 0 0.75REM #EF9035);
}

CSS filter 기능 drop-shadow() 우리가 제공하는 매개 변수를 사용하여 적용되는 모든 것에 대한 주황색 외부 글로우 효과를 만듭니다.

다음 데모에는 CSS- 트릭 로고에서 .has-orange-glow 클래스의 응용 프로그램을 전환하는 toggleOrangeGlow 라는 JavaScript 함수가 있습니다. 이를 CSS 전환과 함께 사용하면 멋진 글로우 효과를 만들 수 있습니다.

일부 CSS 기능에 익숙 할 수도 있지만 언어에는 놀랍도록 광범위한 목록이 있습니다!

웹의 다른 기술과 마찬가지로 다른 CSS 기능마다 다른 수준의 브라우저 지원이 있습니다. 경험이 모든 사람에게 효과가 있는지 확인하고 @supports 와 같은 것을 사용하여 고품질의 대안 경험을 제공하도록 연구 및 테스트를 수행하십시오.

일반적으로 사용되는 CSS 기능

url()

 .el {
  배경 : url (/images/image.jpg);
}

url() 사용

url() 사용하면 다른 리소스에 링크하여로드 할 수 있습니다. 여기에는 이미지, 글꼴 및 기타 스타일 시트가 포함될 수 있습니다. 성능의 이유로 각 선언은 추가 HTTP 요청이므로 url() 을 통해로드 한 내용을 제한하는 것이 가장 좋습니다.

#### attr()

 /*<div data-example="foo"> */
div {
  내용 : attr (data-example);
}<p><details><summary> <code>attr()</code> 사용</summary><p> 이 기능을 사용하면 HTML을 입력하고 속성의 내용을 가져 와서 CSS <code>content</code> 속성에 제공 할 수 있습니다. 일반적으로 스타일 시트에 사용 된 <code>attr()</code> 가 링크 텍스트 다음에 링크의 URL을 표시하는 데 사용됩니다. 이 기능의 또 다른 적용은 이미지가로드되지 않은 경우 이미지의 대체 설명을 표시하는 데 사용하는 것입니다.</p></details></p>
<p> #### <code>calc()</code></p>
<pre class="brush:php;toolbar:false"> .el {
  너비 : calc (100VW -80px);
}

calc() 사용

실험하는 데 시간이 걸리는 기능이있는 경우 calc() 입니다. calc() 에 대한 완전한 안내서가 있습니다.

이 함수는 두 개의 매개 변수를 사용하고 제공하는 연산자 (, -, *, /)를 기반으로 결과를 계산합니다.

Sass와 같은 CSS 전 처리기와 달리 calc() 단위를 혼합 할 수 있으므로 6REM을 100%에서 빼는 것과 같은 작업을 수행 할 수 있습니다. calc() 도 동적으로 업데이트되므로 100%가 너비를 나타내는 경우 너비가 변경되면 여전히 작동합니다. calc() CSS 사용자 정의 속성을 매개 변수로 받아 들일 수 있으며, 이는 놀라운 유연성을 제공합니다.

#### lang()

 P : Lang (en) {
  따옴표 : "\ 201c" "\ 201d" "\ 2018" "\ 2019" "\ 201c" "\ 201d" "\ 2018" "\ 2019";
}

lang() 사용

HTML에 lang 속성을 포함하는 것은 매우 중요한 것입니다. HTML에 나타나면 lang() 함수를 사용하여 속성 값의 모양을 찾아서 조건부에 따라 스타일을 적용 할 수 있습니다.

이 선택기의 일반적인 사용은 국제화 등에 매우 유용한 언어 별 인용문을 설정하는 것입니다.

스마트 디자이너와 개발자는 또한 스타일 번역 버전을 가진 웹 사이트의 훅으로 사용할 수 있으며, 문화 및/또는 언어 적 고려 사항은 부정적인 공간과 같은 것들에 대한 다른 인식을 의미합니다.

#### :not()

 H3 : NOT (: First-Child) {
  마진 탑 : 0;
}

사용 not()

이 의사 급 선택기는 귀하가 지정 하지 않은 것을 선택합니다. 예를 들어, body:not(img) 사용하여 이미지가 아닌 것을 찾을 수 있습니다. 이 예제는 매우 강력하지만 다음과 같은 범위를 :not() 보다 중앙 집중식 선택기 (예 : BEM의 블록 클래스)가 많은 다양성을 줄 수 있습니다.

현재, :not() 하나의 선택기를 매개 변수로만 지원하지만 여러 쉼표로 구분 된 매개 변수에 대한 지원이 개발되고 있습니다 (예 : div:not(.this, .that) )!

함수에 대한 자세한 내용은 원본 텍스트를 참조하십시오. 공간 제한으로 인해 원본 텍스트의 나머지 많은 CSS 기능은 여기에서 생략됩니다. 완전한 정보는 원본 텍스트를 참조하십시오.