잘 알려지지 않은 CSS 속성 이름에 대해 이야기해 보겠습니다.

CSS는 강력하고 유연한 스타일 시트 언어로, 특히 웹 디자인에서 HTML 및 XML과 같은 마크업 언어의 시각적 표현에 사용되어 웹 페이지 표현을 더욱 아름답고 깔끔하고 대화형으로 만듭니다. 그러나 CSS 속성 모듈에는 수백 개의 표준화된 속성 이름이 있지만 여전히 알려지지 않은 속성 이름이 많이 있습니다.

그래서 이번 글에서는 잘 알려지지 않은 CSS 속성 이름을 소개하고, 이러한 속성 이름의 특징과 응용 시나리오를 하나씩 공개하겠습니다.

1. overscroll-behavior
   이 속성은 터치 장치가 스크롤될 때 요소의 스크롤 동작을 정의합니다. 이 속성에는 auto, contain, none 및 unset의 네 가지 속성 값이 포함됩니다.

우선, 자동이 기본 동작입니다. 사용자가 스크롤 경계에 도달하면 터치 장치는 기본 스크롤 작업을 수행합니다. Contain은 스크롤 영역의 오버플로를 금지하고 침투 스크롤 동작을 유지합니다. 즉, 사용자가 스크롤 경계에 도달하기 위해 장치를 터치하면 페이지의 배경 요소가 스크롤될 수 있습니다. none 속성은 전체 페이지의 스크롤 동작을 비활성화하고 unset은 요소의 상위 요소의 속성 값을 사용합니다.

2. clip-path
   clip-path 속성을 사용하면 개발자가 경로를 정의하여 요소에 불규칙한 모양을 정의할 수 있습니다. 이는 전통적인 직사각형 경계의 제약을 깨는 무언가를 달성하는 방법입니다.

clip-path 속성은 URL(SVG 파일을 가리키는)로 정의하거나 기하학적 모양을 지정할 수 있는 클립 경로 기능을 정의합니다. 특정 모양을 지정해야 하는 경우 ellipse(), Polygon() 및 inset()과 같이 미리 정의된 일부 모양 중에서 선택할 수 있습니다.

3. object-position
   이미지를 배경으로 사용하는 경우 일반적으로 background-position을 사용하여 이미지의 위치를 ​​설정해야 합니다. 인라인 이미지의 경우 object-position 속성을 사용하여 동일한 효과를 얻을 수 있습니다.

object-position을 사용하면 요소에서 매핑된 이미지의 위치를 ​​조정할 수 있습니다. 이 속성을 사용하면 기본적으로 개체가 표시되어야 하는 위치를 지정할 수 있습니다. 일반적으로 이 속성은 매핑된 이미지의 위치를 ​​조정하기 위해(예: 자르기) 요소의 너비 또는 높이 속성과 함께 사용됩니다.

4. mix-blend-mode
   mix-blend-mode는 두 요소의 색상 혼합 방식을 제어하는 ​​데 사용할 수 있습니다.

예를 들어 두 요소 사이에 텍스트 마스크를 배치할 때 혼합-혼합 모드를 사용하여 일부 색상을 혼합하고 특정 위치에 오버레이 작업을 통해 고유하게 표시되도록 할 수 있습니다. 이 속성에는 다양한 속성 값(예: 곱하기, 화면, 오버레이, 어둡게 하기, 밝게 하기 등)이 포함됩니다.

5. text-align-last
   text-align-last 속성은 마지막 줄의 텍스트 정렬을 결정합니다.

일반적으로 텍스트는 텍스트 정렬을 사용하여 요소의 경계에 맞춰 정렬됩니다. 그러나 텍스트가 다른 줄로 넘치면 마지막 줄의 텍스트 정렬이 전체 텍스트 블록의 정렬과 다를 수 있습니다. 이 속성을 사용하면 개발자가 마지막 줄의 텍스트 정렬을 지정할 수 있습니다.

6. shape-outside
   이 CSS 속성을 사용하여 텍스트에 대한 적응형 모양을 설정하세요. 예를 들어, 전통적인 텍스트 배열을 사용하는 대신 이미지나 일부 도형 주위에 텍스트를 배열하려는 경우 이 속성이 유용합니다.

shape-outside는 SVG 경로 유사 구문을 통해 적응형 모양을 지정하는 네 가지 모양 함수를 지원합니다. 이러한 모양에는 원, 타원, 다각형 및 삽입이 포함됩니다.

7. font-variant-ligatures
   웹에서 통과 스크립트를 렌더링할 때 렌더링은 여전히 ​​여러 문자 구성 요소가 있는 문자를 제대로 렌더링하지 못합니다.

font-variant-ligatures 속성을 사용하면 브라우저가 더 나은 렌더링 효과를 얻기 위해 특정 글꼴 모양을 무시하는 글리프 대체를 사용할 수 있습니다. 이 속성에는 모든 반자 문자 대체, 합자 대체(합자), 숫자 문자 대체, 구두점 문자 대체 및 음성 문자 대체가 포함됩니다.

요약
여기에 나열된 7개의 CSS 속성 이름은 널리 알려져 있지 않지만 그렇다고 유용하지 않다는 의미는 아닙니다. 실제로 이러한 속성 이름을 알면 웹 페이지를 더욱 효율적으로 개발하는 동시에 페이지를 더욱 훌륭하고 완벽하게 만들 수 있습니다.

앞으로 인터넷 기술의 발전과 변화에 따라 새로운 속성 이름이 계속해서 등장하게 될 것입니다. 그러므로 우리는 훌륭한 프론트엔드 엔지니어가 되기 위해서는 시대의 흐름에 발맞추어 계속해서 배우고 노력해야 합니다.

위 내용은 잘 알려지지 않은 CSS 속성 이름에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!