CSS가 설정되지 않은 상태로 재설정

지난 몇 년 동안 저는 CSS 속성을 재설정하기 위해 unset 키워드를 자주 활용했습니다. 속성을 재설정하기 위해 직관적으로 사용하고 있다는 것을 알았습니다. 하지만 나에게는 직관적인 것이 당신에게는 직관적이지 않을 수도 있습니다. 명확히 말씀드리겠습니다.

설정 해제

예를 들어 요소에서 테두리를 제거하기 위해 age에 대해 border: none을 사용했습니다. 요즘 border:unset 을 사용하는데 테두리가 없어져요.

테두리는 상속되지 않는 속성이므로 하위 요소가 상위 요소의 값을 상속받지 않는다는 의미입니다.

정기적으로 재설정해야 하는 여백과 패딩도 마찬가지입니다.

그러나 상속 재산은 어떻습니까? 아래 예에서는 마지막 버튼이 파란색으로 표시됩니다. 설정되지 않은 속성은 본질적으로 상속된 속성 색상에 대한 상속을 의미하기 때문에 버튼이 색상을 파란색으로 설정했습니다.

상속과 계단식

이러한 내용은 상속에 대해 알고 있는 숙련된 CSS 개발자인 저에게 이해가 됩니다. 그러나 초보자에게는 이러한 개념이 사소한 것이 아닙니다. 나는 대부분의 초보자들이 상속된 속성과 상속되지 않은 속성에 대해 들어본 적도 없거나 잊어버릴 수도 있다고 감히 말하고 싶습니다. 그들은 동일하지 않은 캐스케이드에 대해 배울 수도 있습니다.

최종 스타일은 계단식, 특이성, 상속 등을 기반으로 합니다. MDN에는 계단식, 특이성 및 상속 이해에 대한 매우 탄탄한 기사가 있습니다.

여기서 중요한 점은 상속 개념입니다. 즉, 일부 CSS 속성은 기본적으로 현재 요소의 상위 요소에 설정된 값을 상속하고 일부는 상속하지 않는다는 의미입니다. 이로 인해 예상하지 못한 동작이 발생할 수도 있습니다.

—MDN

마지막 문장은 상속에 대해 무엇을 기대해야 할지 알 수 없어 무섭게 보입니다. 어떤 부동산이 상위 자산으로부터 가치를 상속받을 것인지 기억하면 도움이 될 수 있지만 시간이 지나면 그렇게 됩니다. 해당 정보를 찾는 것은 지루할 수 있습니다. 문서로 이동하거나 노트에서 검색하는 것입니다. 중요한 것은 상속이 존재하며 특히 unset 키워드를 사용할 때 문제가 발생할 수 있다는 점을 아는 것입니다.

이러한 속성을 안전하게 설정 해제

상속되지 않아 설정 해제해도 안전한 속성 중 자주 설정 해제하는 속성을 나열하는 것이 유용할 것이라고 생각했습니다.

• 배경(및 배경색, 배경 이미지 등과 같은 모든 속성)
• 테두리(및 테두리 너비, 테두리 스타일 등과 같은 모든 속성)
• border-radius(및 border-top-left-radius, border-start-start-radius 등과 같은 모든 속성)
• margin(및 margin-top, margin-block-start 등과 같은 모든 속성)
• 패딩(및 padding-top, padding-block-start 등과 같은 모든 속성)
• 최소 높이
• 최소 블록 크기
• 최소 너비
• 최소 인라인 크기
• 최대 높이
• 최대 블록 크기
• 최대 너비
• 최대 인라인 크기
• 위치
• 상단
• 하단
• 왼쪽
• 그렇습니다
• inset(및 inset-block, inset-inline 등과 같은 모든 속성)
• 그리드(및 그리드-템플릿-열, 그리드-열, 정렬 항목, 행 간격 등과 같은 모든 속성)
• flex(그리고 flex-basis, flex-direction, align-items, row-gap 등과 같은 모든 속성)

결론

CSS 속성을 재설정할 때 unset 키워드가 유용할 수 있습니다. 그러나 작업 중인 자산의 상속을 고려하는 것이 중요합니다.

최대한의 안전성을 보장하려면 상속되지 않은 속성을 설정 해제하는 것이 최선의 선택일 수 있습니다. 이렇게 하면 잠재적인 위험을 제거하고 스타일시트가 안전하다는 사실을 알고 안심할 수 있습니다.

위 내용은 CSS가 설정되지 않은 상태로 재설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!