CSS에서 요소를 숨기는 10 가지 방법-CSS 튜토리얼-php.cn

CSS 요소 숨기기 방법 및 성능 비교에 대한 자세한 설명

CSS는 요소를 숨길 수있는 다양한 방법을 제공하지만 접근성, 레이아웃, 애니메이션, 성능 및 이벤트 처리에 미치는 영향은 다양합니다. 이 기사는 이러한 방법에 대해 자세히 논의하고 장점과 단점을 분석합니다. 10 Ways to Hide Elements in CSS 키 포인트

CSS에는 접근성, 레이아웃, 애니메이션, 성능 및 이벤트 처리에 영향을 미치는 요소를 숨길 수있는 다양한 방법이 있습니다.

및 속성은 요소를 완전히 투명하게 만들 수 있지만 요소는 페이지에 남아 있으며 여전히 이벤트를 트리거 할 수 있습니다.

다른 숨겨진 요소에는 HTML opacity 특성, 절대 포지셔닝, 다른 요소를 덮어 쓰기 및 크기 감소, 각각 고유 한 장점과 단점이 있습니다. filter: opacity()
애니메이션 효과 transform 일부 CSS 숨겨진 옵션은 전부 또는 전혀 없습니다. 요소는 중간 상태없이 완전히 눈에 띄거나 완전히 보이지 않습니다. 투명성과 같은 다른 옵션은 다양한 값을 가질 수 있으므로 보간 된 CSS 애니메이션을 구현할 수 있습니다.
display 아래에 설명 된 각 방법은 요소를 시각적으로 숨기지 만 보조 기술의 요소 내용을 숨기지 않을 수 있습니다. 예를 들어, 스크린 리더는 여전히 작은 투명 텍스트를 발표 할 수 있습니다. 추가 CSS 속성 또는 ARIA 속성 (예 : )은 적절한 작업을 설명하기 위해 필요할 수 있습니다.

애니메이션은 일부 사람들이 방향 감각 상실, 편두통, 발작 또는 기타 신체적 불편 함을 경험하게 할 수 있습니다. 사용자 기본 설정에 지정할 때 미디어 쿼리를 사용하여 애니메이션을 끄는 것을 고려하십시오.

이벤트 처리 hidden 요소를 숨기면 이벤트가 해당 요소에 트리거되지 않거나 효과가 없습니다. 즉, 요소는 보이지 않지만 다른 사용자 상호 작용으로 클릭하거나 수신 할 수 있습니다.

성능

브라우저가 HTML DOM 및 CSS 객체 모델을로드하고 구문 분석 한 후 페이지는 3 단계로 표시됩니다. 레이아웃 : 각 요소의 형상과 위치를 생성합니다 드로우 : 각 요소의 픽셀을 그립니다 구성 : 적절한 순서로 요소 레이어를 배열하십시오

합성 변화만을 일으키는 효과는 레이아웃에 영향을 미치는 것보다 훨씬 부드럽습니다. 경우에 따라 브라우저는 하드웨어 가속도를 사용할 수도 있습니다.

1 속성은 0과 1 사이의 숫자 또는 0%에서 100% 사이의 백분율을 전달할 수 있으며, 이는 각각 전체 투명성과 총 불투명성을 나타냅니다.

뷰 예

최신 브라우저에서는 두 가지 효과가 동시에 적용되면 (퍼지, 대비, 그레이 스케일 등) 사용해야하지만 두 가지 사이에는 실질적인 차이가 거의 없습니다. 는 애니메이션을 만들고 뛰어난 성능을 제공 할 수 있지만 완전히 투명한 요소가 페이지에 남아 있으며 이벤트를 트리거 할 수 있습니다.

filter 2

> 전체 요소에 영향을 미치지 만 ,

및 opacity 속성도 별도로 설정할 수 있습니다. 알파 채널을 제로로 적용하기 위해

또는 이와 유사한 방법을 사용하면 프로젝트가 완전히 투명 해집니다.

指标	效果
浏览器支持	良好，但IE仅支持opacity 0到1
可访问性	如果设置为0或0%，则内容不会被读取
布局影响	否
渲染需求	合成
性能	最佳，可以使用硬件加速
动画帧	是
隐藏时触发事件	是

뷰 예

각 속성은 흥미로운 효과를 만들기 위해 별도로 애니메이션 될 수 있습니다. 또는 유사한 방법을 사용하여 생성되지 않는 한 이미지 배경이있는 요소에 투명성을 적용 할 수 없습니다. Alpha 채널은 다음 방법을 사용하여 설정할 수 있습니다. : 완전히 투명한 (중간 애니메이션을 수행 할 수 없음)

: 빨간색, 녹색, 파란색 및 알파 : 색조, 채도, 밝기 및 알파 opacity color 및 background-color border-color rgba(0,0,0,0)

3 특성을 사용하여 (이동), 스케일, 회전 또는 기울기 요소를 사용하는 데 사용할 수 있습니다. 또는 transform (화면 밖으로 나가는) 요소가 숨겨집니다. 뷰 예

는 요소가 실제로 별도의 레이어로 이동하여 2D 또는 3D로 애니메이션 할 수 있으므로 탁월한 성능 및 하드웨어 가속도를 제공합니다. 원래 레이아웃 공간은 동일하게 유지되지만 완전히 숨겨진 요소는 이벤트를 트리거하지 않습니다.

transform scale(0) 4 속성 요소가 보이는 부분을 결정하는 클립 영역을 만듭니다. translate(-999px, 0px)와 같은 값을 사용하면 요소가 완전히 숨 깁니다.

뷰 예

는 현대식 브라우저에서만 사용할 수 있지만 흥미로운 애니메이션 범위를 제공합니다.

5 transform 속성은 요소를 보여주고 숨기려면

또는

指标	效果
浏览器支持	良好
可访问性	内容仍然会被读取
布局影响	否——原始尺寸保持不变
渲染需求	合成
性能	最佳，可以使用硬件加速
动画帧	是
隐藏时触发事件	否

로 설정할 수 있습니다.

뷰 예 clip-path

6 속성은 아마도 가장 일반적으로 사용되는 요소를 숨기는 방법 일 것입니다. display 값은 마치 DOM에 존재하지 않은 것처럼 요소를 효과적으로 제거합니다. 뷰 예

그러나 그러나 대부분의 경우 최악의 CSS 속성 일 것입니다. 를 사용하여 요소가 문서 스트림에서 옮겨 지거나 새로운

속성이 채택되지 않는 한 애니메이션 및 페이지 레이아웃을 트리거 할 수 없습니다. display 도 과부하가 걸리며 , , none,

, , 등과 같은 옵션이 있습니다.

이후에 올바른 값으로 재설정하는 것이 번거 롭을 수 있습니다 (가 도움이 될 수 있지만).

당신은 모든 요소에 html position: absolute 속성을 추가 할 수 있습니다. contain 이것은 브라우저의 기본 스타일을 적용합니다 :

이것은

와 동일한 장점과 단점이 있지만 스타일을 변경할 수없는 컨텐츠 관리 시스템을 사용할 때 유용 할 수 있습니다. display block 8 inline 속성을 사용하면 , table, flexbox 및 grid를 사용하여 페이지 레이아웃의 기본 정적 위치에서 요소를 이동할 수 있습니다. 따라서 절대적으로 배치 된 요소는 display: none; 또는 이와 유사한 방법을 사용하여 화면 밖으로 이동할 수 있습니다. unset 뷰 예

指标	效果
浏览器支持	极佳
可访问性	内容不会被读取
布局影响	是
渲染需求	布局
性能	差
动画帧	否
隐藏时触发事件	否

9 요소는 상단의 배경과 같은 색상으로 다른 요소를 배치하여 시각적으로 숨겨 질 수 있습니다. 이 예에서, pseudo element는 덮어 쓰기를, 모든 자식 요소를 사용할 수 있습니다. 뷰 예

10 요소의 크기를 최소화하기 위해 , ::after,

및/또는 를 사용하여 요소를 숨길 수 있습니다. 컨텐츠가 오버플로되지 않도록 를 적용해야 할 수도 있습니다. 뷰 예

는 흥미로운 애니메이션을 달성 할 수 있지만 성능은

指标	效果
浏览器支持	极佳
可访问性	内容仍然会被读取
布局影响	否，如果绝对定位
渲染需求	绘制
性能	如果小心谨慎，则性能合理
动画帧	是，当覆盖伪元素或子元素时
隐藏时触发事件	是，当覆盖伪元素或子元素时

보다 훨씬 낫습니다.

숨겨진 요소의 선택

몇 년 동안

는 숨겨진 요소에 선호되는 솔루션 이었지만 더 유연하고 애니메이션이 쉬운 옵션으로 대체되었습니다. 여전히 작동하지만 모든 사용자의 컨텐츠를 영구적으로 숨기려는 경우에만 사용될 수 있습니다. 성능을 고려할 때 또는 width가 더 나은 선택입니다. height (CSS를 사용하여 이미지를 보여주고 숨기는 방법에 대한 멋진 데모 링크) padding border-width faq font-size overflow: hidden (FAQ 섹션은 여기에 삽입하고 원래 콘텐츠에 따라 조정 및 보충해야합니다. 원래 FAQ 섹션을 더 명확한 구조로 재구성하고 더 간단한 언어로 표현하는 것이 좋습니다.)

요소를 숨기기로 선택하는 방법은 특정 응용 프로그램 시나리오 및 요구 사항에 따라 달라지며 성능, 접근성 및 애니메이션 효과와 같은 요소를 평가해야합니다. 및 는 일반적으로 성능이 우수한 옵션이며

는 액세스 할 필요가없는 컨텐츠를 영구적으로 숨기는 데 적합합니다. 접근성과 사용자 경험을 항상 우선 순위로 삼는 것을 잊지 마십시오.

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