CSS에는 덜 알려졌지만 유용한 기능이 있습니다. 그 중 몇 가지를 살펴보겠습니다.

1. CSS 스크롤-스냅-유형 속성 및 스크롤-스냅-스톱 속성

스크롤-스냅-스톱

상위 요소 아래의 각 하위 요소에 대해 이 속성을 설정하면 화면을 빠르게 스크롤할 때 트랙패드 또는 터치스크린을 사용하여 빠르게 스크롤하는 동안 다음 요소가 통과되지 않습니다.

Gif :

예 :

값 :

• 보통 : ​​기본값입니다. 스크롤은 기본 동작입니다

• 항상: 터치패드나 터치스크린을 빠르게 스와이프한 후 스크롤이 중지되고 다음 요소에 초점이 맞춰집니다.

스크롤 스냅 유형 속성

슬라이더를 수평으로 끌고 놓으면 효과가 나타납니다.
상자를 클릭한 다음 왼쪽 및 오른쪽 화살표 키

Gif :

예 :

값 :

• 없음 : 기본값입니다.

• X : 효과는 x축에 설정됩니다.

• Y : 효과는 y축에 설정됩니다.

• 둘 다 : x축과 y축에 효과가 설정됩니다.

• 필수 : 스크롤이 끝난 후 자동으로 캡쳐 지점으로 스크롤이 이동합니다.

2. CSS 장소 항목 속성

place-items 속성에 설정된 값은 align-items 및 justify-items 속성 모두에 적용됩니다.

예 :

값 :

• 시작 : 그리드 셀의 시작 부분에 항목 정렬

• End : 그리드 셀 끝에 항목 정렬

• 중앙: 항목을 그리드 셀 중앙에 정렬

3. CSS 모든 속성

요소 또는 해당 상위 요소에 적용된 모든 속성을 초기 값으로 변경합니다.

예 :

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

값 :

• 설정 해제: 요소 또는 요소의 상위에 적용된 모든 속성을 상속 가능한 경우 상위 값으로 변경하고 그렇지 않은 경우 초기 값으로 변경합니다.

4. CSS 사용자 선택 속성

사용자가 텍스트를 선택하는 것을 방지합니다.

예:

The text of this div element cannot be selected.

5. CSS 캐럿 색상 속성

텍스트 입력 필드의 커서(캐럿) 색상을 변경합니다.

6. CSS 텍스트 장식-스킵 잉크 속성

text-꾸밈-skip-ink CSS 속성은 선과 밑줄 위로 글리프를 전달할 때 윗선과 밑줄이 그려지는 방식을 지정합니다.

값 :

• 없음:

예 :

text-decoration-skip-ink: none;

• 자동:

예 :

text-decoration-skip-ink: auto;

7. CSS 포인터 이벤트 속성

pointer-events 속성은 요소가 포인터 이벤트에 반응하는지 여부를 정의합니다.

예 :

Google


 Google

값:

• 없음 : 기본값

• 자동: 요소가 포인터 이벤트에 반응하지 않습니다.

결론

우리는 잘 알려지지 않은 CSS의 기능을 조사했습니다. 귀하의 애플리케이션에 유용한 기능을 배웠습니다.