CSS로 페이지 요소를 숨기는 5가지 방법

CSS를 사용하여 페이지 요소를 숨기는 방법에는 여러 가지가 있습니다. 불투명도를 0으로, 가시성을 숨김으로, 표시를 없음으로, 위치를 절대로 설정한 다음 위치를 보이지 않는 영역으로 설정할 수 있습니다.

요소를 숨기는 기술이 왜 이렇게 많은데 모두 같은 효과를 내는지 궁금해하신 적이 있나요? 각 방법은 실제로 다른 방법과 약간의 미묘한 차이가 있으며 이러한 차이점은 특정 상황에서 어떤 방법이 사용되는지를 결정합니다. 이 튜토리얼에서는 위의 방법 중 상황에 따라 요소를 숨기는 방법을 선택할 수 있도록 염두에 두어야 할 작은 차이점을 다룹니다.

Opacity

opacity 속성은 요소의 투명도를 설정하는 것을 의미합니다. 요소의 경계 상자를 변경하도록 설계되지 않았습니다. 즉, 불투명도를 0으로 설정하면 요소가 시각적으로만 숨겨집니다. 요소 자체는 여전히 자체 위치를 차지하고 웹 페이지 레이아웃에 기여합니다. 또한 사용자 상호 작용에도 응답합니다.

.hide {
opacity: 0;
}

불투명하게도 화면 읽기 소프트웨어에서 요소를 숨기기 위해 opacity 속성을 사용할 계획이라면, 당신은 그렇게 할 수 없습니다. 요소와 해당 콘텐츠는 웹페이지의 다른 요소와 마찬가지로 스크린 리더로 읽혀집니다. 즉, 요소는 불투명한 것처럼 동작합니다.

또한 불투명도 속성을 사용하여 멋진 애니메이션을 얻을 수 있다는 점을 상기시켜 드리고 싶습니다. opacity 속성 값이 1보다 작은 모든 요소도 새로운 스택 컨텍스트를 생성합니다.

숨겨진 두 번째 블록 위로 마우스를 이동하면 요소 상태가 완전 투명에서 완전 불투명으로 부드럽게 전환됩니다. 블록에는 또한 사용자가 블록과 상호 작용할 수 있음을 나타내는 포인터로 설정된 커서 속성이 있습니다.

가시성

두 번째로 이야기할 속성은 가시성입니다. 값을 숨김으로 설정하면 요소가 숨겨집니다. 불투명도 속성과 마찬가지로 숨겨진 요소도 웹 페이지 레이아웃에 영향을 미칩니다. 불투명도와의 유일한 차이점은 사용자 상호 작용에 반응하지 않는다는 것입니다. 또한 화면 읽기 소프트웨어에서는 요소가 숨겨집니다.

이 속성은 초기 상태와 종료 상태가 다른 한 애니메이션 효과를 얻을 수도 있습니다. 이를 통해 가시성 상태 전환 사이의 전환 애니메이션이 시간에 맞춰 원활하게 진행될 수 있습니다(실제로 이는 요소의 지연된 표시 및 숨기기를 구현하기 위해 숨김을 사용하는 데 사용될 수 있습니다 - 번역가의 메모).

.hide {
visible: hide;
}

요소의 가시성이 숨김으로 설정되어 있고 해당 하위 요소 중 하나를 표시하려는 경우, 해당 요소의 가시성을 명시적으로 표시하도록 설정하십시오(예제의 .o-hide p - 번역가의 메모). p 태그의 숫자가 아닌 숨겨진 요소에만 마우스를 올려 놓으면 마우스 커서가 손가락으로 바뀌지 않는 것을 볼 수 있습니다. 이때 마우스를 클릭해도 클릭 이벤트가 발생하지 않습니다.

태그 내의

태그는 여전히 모든 마우스 이벤트를 캡처할 수 있습니다. 마우스를 텍스트 위로 이동하면

자체가 표시되고 이벤트 등록이 적용됩니다.

디스플레이

디스플레이 속성은 단어의 의미에 따라 요소를 실제로 숨깁니다. 표시 속성을 없음으로 설정하면 요소가 표시되지 않고 상자 모델도 생성되지 않습니다. 이 속성을 사용하면 숨겨진 요소가 공간을 차지하지 않습니다. 뿐만 아니라 표시가 없음으로 설정되면 요소에 대한 직접적인 사용자 상호 작용 작업이 효과적이지 않습니다. 또한 화면 읽기 소프트웨어는 요소의 내용을 읽지 않습니다. 이렇게 하면 해당 요소가 전혀 존재하지 않는 것처럼 효과가 나타납니다.

이 요소의 모든 하위 요소도 숨겨집니다. 이 속성에 전환 애니메이션을 추가해도 효과가 없습니다. 다른 상태 값 사이의 전환은 항상 즉시 적용됩니다.

그러나 이 요소는 여전히 DOM을 통해 액세스할 수 있습니다. 따라서 다른 요소와 마찬가지로 DOM을 통해 이를 조작할 수 있습니다.

.hide {
display: none;
}

두 번째 블록 요소 안에

요소가 있는 것을 볼 수 있습니다. 자체 표시 속성이 차단으로 설정되어 있지만 여전히 표시되지 않습니다. 이는 가시성:숨김과 표시:없음의 또 다른 차이점입니다. 이전 예에서 하위 요소의 가시성을 명시적으로 표시로 설정하면 해당 요소가 표시될 수 있지만 표시 자체 표시 값이 무엇이든 관계없이 상위 요소의 표시가 없음이면 모두 표시됩니다. 보이지 않습니다.

이제 첫 번째 블록 요소 위로 마우스를 몇 번 이동한 후 클릭하세요. 이 작업을 수행하면 번호가 0보다 큰 두 번째 블록 요소가 표시됩니다. 이는 요소가 사용자에게 숨겨지도록 설정되어 있어도 JavaScript를 통해 계속 조작될 수 있기 때문입니다.

직위

.hide { position:absolute;
top: -9999px;
left: -9999px;
}

이 방법의 주요 원리는 요소의 상단과 왼쪽을 화면에 보이지 않을 정도로 큰 음수로 설정하는 것입니다. 이 기술을 사용하면 숨겨진 요소의 내용을 화면 판독 소프트웨어로 읽을 수 있다는 이점(또는 잠재적인 단점)이 있습니다. 이는 사용자가 볼 수 없도록 요소를 가시 영역 밖으로 이동하기만 하면 되기 때문에 완전히 이해할 수 있습니다.

이 방법을 사용하여 포커스 가능한 요소를 숨기면 안 됩니다. 그렇게 하면 사용자가 해당 요소에 포커스를 둘 때 예측할 수 없는 포커스 전환이 발생하기 때문입니다. 이 방법은 사용자 정의 체크박스와 라디오 버튼을 만들 때 자주 사용됩니다. (DOM을 사용하여 체크박스와 라디오 버튼을 시뮬레이션하지만 이 방법을 사용하여 실제 체크박스와 라디오 요소를 숨겨 포커스 스위치를 "수신"합니다 - 번역가의 메모)

클립 경로

요소를 숨기는 또 다른 방법은 요소를 자르는 것입니다. 이전에는 클립 속성을 통해 이를 달성할 수 있었지만 이 속성은 더 이상 사용되지 않고 클립 경로라는 더 나은 속성을 사용합니다. 이 속성의 고급 사용법을 알아보려면 Nitish Kumar의 최근 SitePoint 기사 "clicp-path 속성 소개"를 읽어보세요.

clip-path 속성은 아직 IE 또는 Edge에서 완전히 지원되지 않습니다. 클립 경로에서 외부 SVG 파일을 사용하려는 경우 브라우저 지원 수준이 훨씬 낮습니다. 클립 경로 속성을 사용하여 요소를 숨기는 코드는 다음과 같습니다:

.hide { 클립 경로: 다각형(0px 0px,0px ​​0px,0px ​​​0px, 0px ​​0px);
}

첫 번째 요소 위로 마우스를 가져가면 두 번째 요소가 클립 경로를 통해 숨겨지더라도 여전히 두 번째 요소에 영향을 미칠 수 있습니다. 이를 클릭하면 숨겨진 클래스가 제거되고 해당 위치에서 요소가 표시됩니다. 숨겨진 요소의 텍스트는 여전히 화면 읽기 소프트웨어로 읽을 수 있습니다. 많은 WordPress 사이트에서는 화면 읽기 소프트웨어용으로 특별히 제공되는 텍스트를 구현하기 위해 클립 경로 또는 이전 클립을 사용합니다.

요소 자체는 더 이상 표시되지 않지만 여전히 차지하는 직사각형의 크기를 차지하고 주변 요소는 보이는 것처럼 동작합니다. 마우스 오버나 클릭과 같은 사용자 상호 작용은 클리핑 영역 외부에서는 적용되지 않습니다. 우리의 경우 클리핑 영역 크기는 0입니다. 이는 사용자가 숨겨진 요소와 직접 상호 작용할 수 없음을 의미합니다. 또한 이 속성을 사용하면 다양한 전환 애니메이션을 사용하여 다양한 효과를 얻을 수 있습니다.

결론

이 튜토리얼에서는 CSS를 통해 요소를 숨기는 5가지 방법을 살펴보았습니다. 각 방법은 다른 방법과 약간 다릅니다. 달성하려는 목표를 알면 사용할 속성을 결정하는 데 도움이 되며, 시간이 지남에 따라 실제 요구 사항에 따라 본능적으로 최상의 접근 방식을 선택할 수 있습니다.

위 내용은 CSS로 페이지 요소를 숨기는 5가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!