요소를 숨기는 CSS 속성

김민서·2024년 11월 26일

DOKBARO

목록 보기

1/6

1. clip-path

요소의 일부 또는 전체를 잘라내어 숨기는 데 사용할 수 있다.
보여주고 싶은 부분만 선택하는 도구라고 생각하면 되고, 숨겨진 영역도 여전히 요소의 영역으로 계산되기 때문에 다른 요소와의 간격이나 위치에 영향을 미칠 수 있다.

예시)

.hidden {
  clip-path: circle(0); /* 완전히 숨김 */
}
.visible {
  clip-path: circle(50%); /* 원형으로 잘림 */
}

clip-path: circle(0);에서 clip-path 속성은 요소의 보여지는 영역(클리핑 영역)을 설정한다.
circle(0)은 반지름이 0인 원의 클리핑 영역을 의미하기 때문에, 아무것도 보이지 않게 된다.
하지만 요소 자체는 여전히 DOM에 존재하며, 화면에서 차지하는 공간은 그대로 유지된다.

2. transform: scale(0)

요소의 크기를 축소하여 완전히 보이지 않게 만들 수 있다.
요소의 크기를 0으로 줄이기 때문이 시각적으로는 완전히 사라진 것처럼 보이지만, 요소의 위치와 공간은 여전히 유지된다.

예시)

.hidden {
  transform: scale(0); /* 숨김 (크기 0으로 축소) */
}
.visible {
  transform: scale(1); /* 원래 크기로 보임 */
}

3. filter: opacity(0)

CSS의 filter 속성을 사용해 요소를 완전히 투명하게 만드는 방법이다.

이 속성은 opacity: 0과 비슷하지만, 다른 필터 효과(예: blur, grayscale)와 함께 조합하여 다양한 시각적 효과를 만들 수 있다.

예시)

.hidden {
  filter: opacity(0); /* 숨김 (완전히 투명) */
}
.visible {
  filter: opacity(1); /* 보임 (투명도 100%) */
}

opacity(0)은 요소를 완전히 투명하게 만들어 화면에서 보이지 않게 만든다.
하지만 요소는 DOM에 여전히 존재하며, 공간을 차지하고 클릭 등의 이벤트도 발생할 수 있다.

4. z-index: -1

요소를 화면에서 다른 요소 뒤로 보내 보이지 않게 만드는 방법이다. 그러나 요소가 배경 뒤에 있을 뿐, 여전히 공간과 이벤트 처리가 가능하다.

예시)

.hidden {
  z-index: -1; /* 화면 뒤로 숨김 */
  position: relative;
}

z-index: -1은 요소를 스택 순서에서 다른 모든 요소 뒤로 보내며, 이 속성을 적용하려면 position이 relative, absolute, fixed, 또는 sticky로 설정되어야 한다.

5. height: 0 및 width: 0

요소의 크기를 0으로 설정하여 보이지 않게 만든다.
요소는 공간을 차지하지 않지만, DOM 구조에서는 여전히 존재한다.

예시)

.hidden {
  height: 0;
  width: 0;
  overflow: hidden; /* 자식 요소도 숨김 */
}

이때 overflow: hidden은 부모 요소의 크기가 0일지라도, 자식 요소의 콘텐츠 크기가 있으면 자식 요소가 화면에 보이기 때문에 이를 방지하기 위해 적용되었다.

6. overflow: hidden

부모 요소의 크기를 초과하는 자식 요소의 콘텐츠를 잘라내어 숨기는 CSS 속성이다. 요소의 크기를 벗어난 내용은 보이지 않게 처리되며, 초과된 부분에 스크롤이나 다른 시각적 효과는 제공되지 않는다.

예시)

.container {
  width: 100px;
  height: 100px;
  overflow: hidden; /* 초과된 부분 숨김 */
}

7. pointer-events: none

요소를 화면에 보이게 유지하면서, 모든 마우스 및 포인터 이벤트를 차단하는 CSS 속성이다.
요소는 클릭, 호버, 포커스 등의 상호작용이 불가능해지지만, 시각적으로는 그대로 표시되며 공간도 유지된다.

예시)

.hidden {
  pointer-events: none; /* 이벤트 차단 */
}

8. position: absolute; top: -9999px;

요소를 화면 밖으로 완전히 이동시키는 방식으로 요소를 숨긴다.
요소는 DOM 구조에 남아 있지만, 레이아웃에는 영향을 미치지 않는다.

예시)

.hidden {
  position: absolute;
  top: -9999px; /* 화면 밖으로 이동 */
}

요소를 화면 위로 멀리 이동시켜 보이지 않게 만든다.
보통 화면에 표시되지 않을 만큼 충분히 큰 값(예시에서 -9999px)을 사용한다.
요소는 DOM 구조에 남아 있으므로, JavaScript로 접근하거나 스타일을 변경할 수 있다.
기본적으로 사용자 이벤트(예: 클릭, 포커스)는 발생하지 않고, 스크린 리더기도 이렇게 숨긴 요소를 읽지 않는다.

특정 상황에서 임시로 숨길 경우나, 애니메이션이나 화면 전환 중 요소를 화면 밖으로 이동시키는 데 사용한다. 하지만 많은 요소를 이 방식으로 숨기면, 브라우저가 모든 요소를 렌더링하기 때문에 성능에 영향을 줄 수 있다.

9. CSS Grid/Flex 숨기기 (grid-template-areas나 order)

CSS Grid 또는 Flexbox를 사용해 요소를 재배치하거나 숨긴다.
display: none과 유사하게 보이진 않지만, 레이아웃은 조정된다.

예시) (CSS Grid)

.container {
  display: grid;
  grid-template-areas:
    "header"
    "content"
    "footer";
}
.hidden {
  grid-area: none; /* 그리드에서 제외 */
}

.container는 display: grid를 사용하여 그리드 레이아웃을 정의한다.
.hidden 클래스는 grid-area: none을 설정하여, 해당 요소를 그리드에서 제외시킨다.
요소는 여전히 DOM에 존재하지만, 레이아웃에서 보이지 않거나 다른 자리에 배치되지 않게 된다.

예시) (Flexbox)

.hidden {
  order: -1; /* 순서를 뒤로 이동 */
  visibility: hidden; /* 숨김 */
}

order: -1을 사용하여 해당 요소를 다른 요소 뒤로 이동시킵니다. 기본적으로 order는 0이며, 음수 값을 주면 순서를 조정할 수 있습니다.
visibility: hidden은 요소를 숨기지만 공간은 유지하게 만듭니다. 즉, 요소는 화면에 보이지 않지만 레이아웃에서 그 자리를 차지합니다.

CSS Grid에서 grid-area: none을 사용하는 방법은 요소를 그리드에서 완전히 사라지게 하는 방법이고, Flexbox에서의 두 가지 방법은 요소를 숨길 수는 있지만, 공간은 여전히 차지하게 한다. (visibility: hidden은 보이지 않지만 스크린 리더에서는 여전히 읽힌다.)

10. content-visibility: hidden

요소의 내용을 렌더링하지 않도록 지연시켜 성능 최적화와 숨김을 동시에 처리한다. 이 속성은 요소가 보이지 않거나 화면에 표시되지 않으면, 해당 요소의 렌더링을 지연시켜 페이지 로딩 성능을 향상시킨다. 그러나 공간은 여전히 차지하게 된다.

예시)

.hidden {
  content-visibility: hidden; /* 보이지 않으면 렌더링 지연 */
}

요소가 화면에 보이지 않으면 렌더링을 지연시켜, 페이지의 초기 로딩 성능을 향상시킬 수 있다.
이 속성은 큰 콘텐츠나 숨겨진 콘텐츠에 유용하다. 예를 들어, 스크롤되는 페이지의 맨 아래에 있는 콘텐츠를 미리 렌더링하지 않고 사용자가 스크롤할 때 렌더링할 수 있다.
요소는 화면에 보이지 않지만, 공간을 차지한다. 즉, 해당 요소는 레이아웃에서 차지하는 공간을 유지한다.

[정리] 숨김 속성 비교

속성	공간 유지	이벤트 차단	화면에 숨김 방식
`visibility: hidden`	✅	✅	가시성만 숨김
`display: none`	❌	✅	완전히 제거
`opacity: 0`	✅	❌	투명하게 숨김
`clip-path: circle(0)`	✅	❌	잘라내어 숨김
`transform: scale(0)`	✅	❌	축소하여 숨김
`pointer-events: none`	✅	✅	이벤트만 비활성화
`z-index: -1`	✅	❌	화면 뒤로 숨김
`position: absolute`	❌	✅	화면 밖으로 이동

김민서