CSS에서 요소를 숨기는 방법은 여러 가지가 있지만 접근성, 레이아웃, 애니메이션, 성능 및 이벤트 처리에 영향을주는 방식이 다릅니다.
애니메이션
일부 CSS 숨기기 옵션은 전부 또는 아무것도 아닙니다. 요소가 완전히 표시되거나 완전히 표시되지 않으며 중간 상태가 없습니다. 투명도와 같은 다른 것들은 다양한 값을 가질 수 있으므로 보간 된 CSS 애니메이션이 가능해집니다.
접근 용이성
아래에 설명 된 각 방법은 요소를 시각적으로 숨기지 만 보조 기술에서 내용을 숨기거나 숨길 수 있습니다. 예를 들어, 스크린 리더는 여전히 작은 투명 텍스트를 발표 할 수 있습니다. 추가 CSS 속성 또는 ARIA 속성 등 aria-hidden="true" 적절한 조치를 설명하기 위해 필요할 수 있습니다.
애니메이션으로 인해 방향 감각 상실, 편두통, 발작 또는 기타 신체적 불편 함이 발생할 수 있다는 점에 유의하십시오. 사용을 고려하십시오 prefers-reduced-motion 사용자 환경 설정에서 지정된 경우 애니메이션을 끄는 미디어 쿼리.
이벤트 처리
숨기면 해당 요소에서 트리거되는 이벤트가 중지되거나 효과가 없습니다. 즉, 요소가 표시되지 않지만 여전히 클릭되거나 다른 사용자 상호 작용을받을 수 있습니다.
퍼포먼스
브라우저가 HTML DOM 및 CSS 객체 모델을로드하고 구문 분석 한 후 페이지는 XNUMX 단계로 렌더링됩니다.
- 레이아웃 : 각 요소의 지오메트리와 위치를 생성
- 페인트 : 각 요소의 픽셀을 그립니다.
- 조성: 요소 레이어를 적절한 순서로 배치
컴포지션 변경 만 발생시키는 효과는 레이아웃에 영향을 미치는 효과보다 훨씬 매끄 럽습니다. 경우에 따라 브라우저에서 하드웨어 가속을 사용할 수도 있습니다.
1. opacity 과 filter: opacity()
XNUMXD덴탈의 opacity: N 과 filter: opacity(N) 속성은 0에서 1 사이의 숫자, 또는 완전히 투명하고 완전히 불투명 함을 나타내는 0 %에서 100 % 사이의 백분율로 전달 될 수 있습니다.
펜보기
불투명도로 숨기기 : 0 SitePoint 별 (@사이트포인트)
on 코드 펜.
최신 브라우저에서 둘 사이에는 실질적인 차이가 거의 없지만 filter 여러 효과가 동시에 적용되는 경우 사용 (흐림, 대비, 회색조 등)
불투명도는 애니메이션을 적용 할 수 있고 뛰어난 성능을 제공하지만 완전히 투명한 요소가 페이지에 남아 있고 이벤트를 트리거 할 수 있다는 점에주의하십시오.
| 메트릭 | 효과 |
|---|---|
| 브라우저 지원 | 좋지만 IE는 지원 만 opacity 0 ~ 1 |
| 접근성 | 0 또는 0 %가 설정된 경우 내용을 읽을 수 없습니다 |
| 레이아웃이 영향을 받습니까? | 아니 |
| 렌더링 필요 | 구성 |
| 성능 | 최고, 하드웨어 가속을 사용할 수 있습니다 |
| 애니메이션 프레임 가능? | 예 |
| 숨겨진 이벤트가 발생 했습니까? | 예 |
2. color 알파 투명도
opacity 전체 요소에 영향을 주지만 color, background-color및 border-color 개별적으로 속성. 알파 채널을 사용하여 알파 채널 적용 rgba(0,0,0,0) 또는 이와 유사하게 항목을 완전히 투명하게 만듭니다.
펜보기
컬러 알파로 숨기기 SitePoint 별 (@사이트포인트)
on 코드 펜.
각 속성을 개별적으로 애니메이션하여 흥미로운 효과를 만들 수 있습니다. 이미지 배경이있는 요소에는 투명도를 사용하여 생성하지 않으면 적용 할 수 없습니다. linear-gradient 또는 유사합니다.
알파 채널은 다음을 사용하여 설정할 수 있습니다.
transparent: 완전 투명 (애니메이션 사이에서는 불가능)rgba(r, g, b, a): 빨강, 초록, 파랑 및 알파hsla(h, s, l, a): 색조, 채도, 명도 및 알파#RRGGBBAA과#RGBA
| 메트릭 | 효과 |
|---|---|
| 브라우저 지원 | 좋지만 IE는 지원 만 transparent 과 rgba |
| 접근성 | 내용을 여전히 읽습니다 |
| 레이아웃이 영향을 받습니까? | 아니 |
| 렌더링 필요 | 그림 |
| 성능 | 좋지만 빠르지는 않습니다. opacity |
| 애니메이션 프레임 가능? | 예 |
| 숨겨진 이벤트가 발생 했습니까? | 예 |
3. transform
XNUMXD덴탈의 transform 속성은 요소를 변환 (이동), 축척, 회전 또는 기울이기 위해 사용할 수 있습니다. ㅏ scale(0) or translate(-999px, 0px) 화면 밖에서 요소를 숨 깁니다.
펜보기
변형하여 숨기기 : scale (0); SitePoint 별 (@사이트포인트)
on 코드 펜.
transform 요소가 별도의 레이어로 효과적으로 이동하고 2D 또는 3D로 애니메이션 될 수 있기 때문에 탁월한 성능 및 하드웨어 가속을 제공합니다. 원래 레이아웃 공간은 그대로 유지되지만 완전히 숨겨진 요소에 의해 이벤트가 트리거되지 않습니다.
| 메트릭 | 효과 |
|---|---|
| 브라우저 지원 | 좋은 |
| 접근성 | 내용을 여전히 읽습니다 |
| 레이아웃이 영향을 받습니까? | 아니요 — 원래 크기가 유지됩니다 |
| 렌더링 필요 | 구성 |
| 성능 | 최고, 하드웨어 가속을 사용할 수 있습니다 |
| 애니메이션 프레임 가능? | 예 |
| 숨겨진 이벤트가 발생 했습니까? | 아니 |
4. clip-path
XNUMXD덴탈의 clip-path 속성은 요소의 표시 할 부분을 결정하는 클리핑 영역을 만듭니다. 다음과 같은 값 사용 clip-path: circle(0); 요소를 완전히 숨 깁니다.
펜보기
클립 패스로 숨기기 SitePoint 별 (@사이트포인트)
on 코드 펜.
clip-path 최신 브라우저에서만 사용해야하지만 재미있는 애니메이션의 범위를 제공합니다.
| 메트릭 | 효과 |
|---|---|
| 브라우저 지원 | 최신 브라우저 만 |
| 접근성 | 일부 응용 프로그램에서 여전히 읽은 내용 |
| 레이아웃이 영향을 받습니까? | 아니요 — 원래 크기가 유지됩니다 |
| 렌더링 필요 | 그리다 |
| 성능 | 합리적인 |
| 애니메이션 프레임 가능? | 예, 최신 브라우저에서 |
| 숨겨진 이벤트가 발생 했습니까? | 아니 |
5. visibility
XNUMXD덴탈의 visibility 속성을 설정할 수 있습니다 visible or hidden 요소를 표시하거나 숨기려면
펜보기
가시성 숨기기 : 숨김 SitePoint 별 (@사이트포인트)
on 코드 펜.
요소가 사용하는 공간은 collapse 값이 사용됩니다.
| 메트릭 | 효과 |
|---|---|
| 브라우저 지원 | 우수한 |
| 접근성 | 읽지 않은 내용 |
| 레이아웃이 영향을 받습니까? | 아니, 그렇지 않으면 collapse 사용 |
| 렌더링 필요 | 구성하지 않는 한 collapse 사용 |
| 성능 | 좋은 |
| 애니메이션 프레임 가능? | 아니 |
| 숨겨진 이벤트가 발생 했습니까? | 아니 |
6. display
display 아마도 가장 많이 사용되는 요소 숨김 방법 일 것입니다. 가치 none DOM에 존재하지 않는 것처럼 효과적으로 요소를 제거합니다.
펜보기
표시와 함께 숨기기 : 없음 SitePoint 별 (@사이트포인트)
on 코드 펜.
그러나 대부분의 경우 CSS 속성이 최악 일 수 있습니다. 요소를 사용하여 문서 흐름에서 요소를 이동하지 않으면 애니메이션을 적용 할 수 없으며 페이지 레이아웃을 트리거합니다. position: absolute 또는 새로운 contain 재산이 채택됩니다.
display 또한 과부하와 같은 옵션이 있습니다 block, inline, table, flexbox, grid 그리고 더. 후 올바른 값으로 다시 재설정 display: none; 문제가 될 수있다 unset 도움이 될 수 있습니다).
| 메트릭 | 효과 |
|---|---|
| 브라우저 지원 | 우수한 |
| 접근성 | 읽지 않은 내용 |
| 레이아웃이 영향을 받습니까? | 예 |
| 렌더링 필요 | 레이아웃 |
| 성능 | 가난한 |
| 애니메이션 프레임 가능? | 아니 |
| 숨겨진 이벤트가 발생 했습니까? | 아니 |
7. HTML hidden 속성
HTML hidden 속성 모든 요소에 추가 할 수 있습니다 :
<p hidden> Hidden content
</p>
브라우저의 기본 스타일을 적용하려면
[hidden] { display: none;
}
이것은 동일한 이점과 결함이 있습니다 display: none스타일 변경을 허용하지 않는 콘텐츠 관리 시스템을 사용할 때 유용 할 수 있습니다.
8. 절대 position
XNUMXD덴탈의 position 속성을 사용하면 요소를 기본값에서 이동할 수 있습니다 static 를 사용하여 페이지 레이아웃 내에서 위치 top, bottom, left및 right. absolute따라서 배치 된 요소를 화면 밖으로 이동할 수 있습니다. left: -999px 또는 유사한 :
펜보기
위치 숨기기 : 절대 SitePoint 별 (@사이트포인트)
on 코드 펜.
| 메트릭 | 효과 |
|---|---|
| 브라우저 지원 | 사용하지 않는 한 우수 position: sticky |
| 접근성 | 내용을 여전히 읽습니다 |
| 레이아웃이 영향을 받습니까? | 예, 위치가 변경되면 |
| 렌더링 필요 | 따라 |
| 성능 | 조심하면 합리적 |
| 애니메이션 프레임 가능? | 네 top, bottom, left및 right |
| 숨겨진 이벤트가 발생 했습니까? | 예,하지만 오프 스크린 요소와 상호 작용하는 것이 불가능할 수 있습니다 |
9. 다른 요소를 오버레이
배경과 같은 색을 가진 다른 위에 다른 요소를 배치하여 요소를 시각적으로 숨길 수 있습니다. 이 예에서 ::after 모든 하위 요소를 사용할 수 있지만 의사 요소가 겹쳐집니다.
펜보기
오버레이로 숨기기 SitePoint 별 (@사이트포인트)
on 코드 펜.
기술적으로 가능하지만이 옵션에는 다른 옵션보다 더 많은 코드가 필요했습니다.
| 메트릭 | 효과 |
|---|---|
| 브라우저 지원 | 우수한 |
| 접근성 | 내용을 여전히 읽습니다 |
| 레이아웃이 영향을 받습니까? | 아니요, 절대적으로 배치 된 경우 |
| 렌더링 필요 | 그리다 |
| 성능 | 조심하면 합리적 |
| 애니메이션 프레임 가능? | 예 |
| 숨겨진 이벤트가 발생 했습니까? | 예, 의사 또는 자식 요소가 중첩 된 경우 |
10. 치수 축소
요소를 사용하여 치수를 최소화하여 요소를 숨길 수 있습니다. width, height, padding, border-width 및 / 또는 font-size. 신청해야 할 수도 있습니다 overflow: hidden; 내용물이 쏟아지지 않도록합니다.
펜보기
너비 또는 높이로 숨기기 SitePoint 별 (@사이트포인트)
on 코드 펜.
재미있는 애니메이션 효과가 가능하지만 성능이 눈에 띄게 향상됩니다. transform.
| 메트릭 | 효과 |
|---|---|
| 브라우저 지원 | 우수한 |
| 접근성 | 내용을 여전히 읽습니다 |
| 레이아웃이 영향을 받습니까? | 예 |
| 렌더링 필요 | 레이아웃 |
| 성능 | 가난한 |
| 애니메이션 프레임 가능? | 예 |
| 숨겨진 이벤트가 발생 했습니까? | 아니 |
숨겨진 선택
display: none 수년 동안 요소를 숨기는 데 가장 좋아하는 솔루션 이었지만보다 유연하고 애니메이션 가능한 옵션으로 대체되었습니다. 여전히 유효하지만 모든 사용자의 콘텐츠를 영구적으로 숨기려는 경우에만 가능합니다. transform or opacity 성능을 고려할 때 더 나은 선택입니다.
로 CSS 기술을 한 단계 끌어 올리십시오 CSS 마스터. CSS 아키텍처, 디버깅, 사용자 정의 속성, 고급 레이아웃 및 애니메이션 기술, SVG와 함께 CSS를 사용하는 방법 등을 배우십시오.
출처 : https://www.sitepoint.com/hide-elements-in-css/?utm_source=rss
