당신이 모르는 CSS 속성 5가지

CSS에는 많은 속성이 있으며 이를 통해 놀라운 것을 만들 수 있습니다.

우리는 모두 기본 속성을 알고 있지만 숨겨진 보석 중 일부에 대해 모르십니까?
이 기사에서는 일반적으로 사용되지 않는 몇 가지 놀라운 속성을 다룰 것입니다.

캐럿 컬러

caret-color 속성은 입력, 텍스트 영역 또는 편집 가능한 모든 요소의 커서(캐럿) 색상을 지정합니다.
캐럿은 일반적으로 눈에 잘 띄게 하기 위해 깜박이는 얇은 수직선입니다.

input {
caret-color: red;
}

뒷면 가시성

backface-visibility는 사용자를 향할 때 요소의 뒷면이 표시되어야 하는지 여부를 정의합니다.backface-visibility의 기본값은 표시됩니다. 보이는 대신 숨길 수도 있습니다.

.box {
backface-visibility: hidden;
}

탭 사이즈

tab-size는 탭 문자의 너비를 지정합니다.tab-size 속성의 기본값은 공백 8자이며 모든 양의 정수 값을 허용할 수 있습니다.

pre {
tab-size: 16;
}

격리

isolation 속성은 요소가 새 누적 콘텐츠를 생성해야 하는지 여부를 정의합니다.
쌓인 콘텐츠는 웹 페이지의 요소가 다른 요소 위에 놓이는 방식을 나타냅니다.

#element {
isolation: isolate;
}

크기 조정

resize 속성은 사용자가 요소의 크기를 조정할 수 있는지 여부와 그 방법을 정의합니다. 요소의 오른쪽 하단 모서리를 클릭하고 드래그하여 간단히 요소의 크기를 조정할 수 있습니다.
이 속성은 오버플로가 표시되도록 설정된 인라인 요소나 블록 요소에는 적용되지 않습니다.

textarea {
resize: none; /* Disables resizability */
}

We can do pretty much everything with CSS.