모든 프런트엔드 개발자가 알아야 할 10가지 CSS 기능

CSS(Cascading Style Sheets)는 HTML로 작성된 문서의 모양과 서식을 설명하는 데 사용되는 스타일 시트 언어입니다. 이는 개발자가 웹 사이트와 애플리케이션의 모양을 제어할 수 있게 해주기 때문에 웹 개발의 중요한 부분입니다.

이 글에서는 모든 프런트엔드 개발자가 숙지해야 할 가장 유용한 CSS 기능 중 일부에 대해 논의하겠습니다. 이러한 기능은 웹사이트나 애플리케이션에 스타일과 서식을 추가하는 데 사용할 수 있으며 사용자 경험을 크게 향상시킬 수 있습니다.

다른 프로그래밍 언어와 마찬가지로 CSS의 기능은 한 줄 솔루션을 제공하여 작업을 단순화합니다. 그러나 다른 프로그래밍 언어와 달리 CSS 기능의 결과는 실제로 웹 사이트의 논리에 영향을 주지 않으며 웹 사이트에 있는 시각적 요소에 영향을 미치는 데에만 사용됩니다.

아래에는 CSS에서 사용할 수 있는 다양한 유형의 기능이 나열되어 있습니다.

• 맞춤 속성 기능

• 색상 기능

• 의사 클래스 선택기 기능

• 애니메이션 기능

• 필터 기능

• 차원 및 크기 조정 기능

• 비교 기능

• 논리 함수

CSS에는 그 밖에도 다양한 유형의 기능이 있습니다. 하지만 이 기사에서는 우리가 사용할 수 있는 10가지 항목에 대해서만 설명합니다.

var() 함수

CSS에서 사용할 수 있는 유일한 사용자 정의 속성 함수는 var 함수입니다. CSS에서 사용자 정의 속성을 사용해야 할 때마다 var 함수를 사용하여 이를 참조합니다

예

아래는 var 함수를 사용하여 사용자 정의 속성을 참조하는 예입니다. -

으아아아

calc() 함수

CSS에서 수학/산술 계산에 사용되는 가장 일반적인 함수는 calc 함수입니다. 위에서 설명한 var 함수와 함께 속성 값을 동적으로 계산하는 데 널리 사용됩니다.

예

으아아아

calc를 em, rem 등과 같은 다른 형식 단위와 함께 사용할 수도 있습니다.

url() 함수

웹사이트에 추가해야 하는 리소스는 여러 위치에 있는 경우가 많습니다. 따라서 이때 이러한 리소스를 CSS 파일로 로드하는 데 사용할 수 있는 함수가 필요합니다. url 함수는 바로 그 일을 하며, 소스 위치에서 CSS 파일인 대상 위치로 리소스를 연결하고 로드합니다. 이미지, svgs, 글꼴, 스타일시트 등

과 같은 모든 유형의 리소스를 연결할 수 있습니다.

예

으아아아

rgb() 함수

웹사이트를 디자인할 때 색상을 사용해야 하는 경우가 많습니다. CSS는 16진수 코드, 색상 이름 등 색상을 사용하는 다양한 방법을 제공합니다. 색상을 표현하는 한 가지 방법은 RGB 값을 사용하는 것이며, rgb() 함수를 사용하면 이러한 16진수 코드를 RGB로 변환하여 스타일시트에 사용할 수 있습니다.

예

으아아아

정의된 색상의 불투명도를 제어하는 ​​데 사용할 수 있는 또 다른 기능인 rgba를 사용할 수 있습니다.

hsl() 함수

색상을 표현하는 데 사용할 수 있는 또 다른 함수는 hsl 함수입니다. 색상을 색조, 채도, 밝기 값으로 정의합니다. 일부 개발자는 RGB 대신 이를 사용하는 것을 선호합니다.

예

으아아아

rgb와 마찬가지로 hsl에도 정의된 색상의 불투명도를 제어하는 ​​변경된 버전 hsla이 있습니다.

blur() 함수

요소를 구별하기 위해 흐림 기능을 사용합니다.

예

으아아아

불투명도() 함수

요소의 불투명도는 해당 요소의 가시성을 의미합니다. 이 배경을 통해 보이는 배경의 양을 지정합니다.

예

으아아아

The nth-child() function

의 중국어 번역은 다음과 같습니다:

nth-child() function

상위 요소의 특정 하위 요소를 선택해야 하는 경우 nth-child 기능을 사용할 수 있습니다. 이는 다양한 요소를 대상으로 하기 위한 요구 사항에 따라 일부 변경된 의사 클래스 선택기 기능입니다.

예

으아아아

일부 변형에는 n번째 마지막 자식, n번째 유형, n번째 마지막 유형 등이 있습니다.

scale() 함수

이 기능을 사용하면 요소와 해당 하위 요소의 크기를 제어할 수 있습니다. 또한 이 변경이 발생하기를 원하는 축을 정의할 수도 있습니다.

예

으아아아

translate() 기능

이 기능을 사용하면 요소의 위치를 ​​변경할 수 있습니다. 요소가 변경되어야 하는 축을 지정할 수도 있습니다.

예

으아아아

결론

이 기사에서는 함수, CSS에서의 목적, 함수 및 기타 프로그래밍 언어와의 차이점에 대해 논의했습니다. 또한 CSS에서 사용할 수 있는 다양한 유형의 기능에 대해서도 배웠습니다. 마지막으로 모든 프런트엔드 개발자가 알아야 할 CSS에서 가장 일반적으로 사용되는 10가지 기능을 살펴보았습니다. 이는 가장 인기 있는 기능 중 일부일 뿐이지만, 항상 배울 것이 더 많이 있습니다.

위 내용은 모든 프런트엔드 개발자가 알아야 할 10가지 CSS 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!