CSS 요소 숨기기 (display, opacity, visibility, overflow, hidden, clip 등)

• display: none;
  → 레이아웃에서 완전히 제거 (전환 효과 X)
• opacity: 0;
  → 요소는 자리를 차지하지만 보이지 않으며, 페이드 인/아웃에 적합 (전환 효과 O)
• visibility: hidden;
  → 요소가 보이지 않고, 마우스 이벤트도 막지만, 공간은 유지 (전환 효과 가능)
• max-height / height + overflow: hidden;
  → 슬라이드 효과 등 높이 변화를 애니메이션 할 때 사용
• HTML hidden input 
  → 화면에 표시되지 않고 값만 전달 (폼 데이터에 사용)
• 추가 기법 (clip-path, transform: scale, off-screen positioning)
  → 다양한 상황에 맞게 요소를 숨기거나 애니메이션 효과를 줄 수 있음

---

1. display 속성

• display: none;
  • 특징:
    • 요소를 레이아웃에서 완전히 제거하여 보이지 않게 만듭니다.
    • 해당 요소는 공간 자체도 차지하지 않습니다.
  • 주의:
    • CSS 전환(transition)이 적용되지 않으므로, 끄고 켜는(on/off) 경우에 사용합니다.
  • 사용 예:
     

.hidden {
  display: none;
}

─────────────────────────────

2. opacity 속성

• opacity: 0; / opacity: 1;
  • 특징:
    • 요소의 투명도를 조절하여 보이지 않게 만들 수 있습니다.
    • 요소는 여전히 레이아웃 내에 존재하며, 공간을 차지합니다.
    • CSS 전환(transition)이 가능하므로 페이드 효과(fade in/out)에 유용합니다.
  • 기본값: opacity: 1;
  • 사용 예:
     

.fade {
  opacity: 0;
  transition: opacity 0.5s;
}
.fade.show {
  opacity: 1;
}

─────────────────────────────

3. visibility 속성

• visibility: hidden; / visibility: visible;
  • 특징:
    • 요소를 눈에 보이지 않게 하지만, 해당 요소가 차지하는 공간은 그대로 유지합니다.
    • 마우스 반응(hover 등)도 하지 않게 할 수 있습니다.
    • CSS 전환(transition)이 가능한 경우도 있으나, 일부 브라우저에서는 즉각적 전환 없이 단순 토글되는 경우가 있음.
  • 기본값: visibility: visible;
  • 사용 예:

.invisible {
  visibility: hidden;
  transition: visibility 0.5s, opacity 0.5s;
  opacity: 0;
}
.invisible.show {
  visibility: visible;
  opacity: 1;
}

─────────────────────────────

4. 높이 조절 (max-height / height)와 overflow

• max-height: 0; 또는 height: 0; 와 overflow: hidden;
  • 특징:
    • 요소의 높이를 0으로 설정하여 콘텐츠가 보이지 않도록 합니다.
    • overflow: hidden;을 사용하여 내부 콘텐츠가 넘치지 않도록 감춥니다.
    • 높이 변화에 대해 CSS 전환(transition)을 적용할 수 있어, 슬라이드 업/다운(slide up/down) 효과를 낼 수 있습니다.
  • 사용 예:

.collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}
.collapse.expand {
  max-height: 500px; /* 콘텐츠 높이에 맞게 설정 */
}

─────────────────────────────

5. HTML의 hidden input

• <input type="hidden">
  • 특징:
    • 사용자가 볼 수 없는 폼 요소로, 데이터(value) 전달 목적으로 사용됩니다.
    • 스타일이나 전환 효과와는 무관하며, 단순히 화면에 표시되지 않는 요소입니다.
  • 사용 예:

<input type="hidden" value="100" name="age">

─────────────────────────────

6. 추가 비슷한 효과

• clip / clip-path
  • 설명:
    • clip (또는 최신 문법인 clip-path)을 사용하여 요소의 일부만 보이도록 잘라낼 수 있습니다.
    • 예를 들어, clip-path: inset(100%);를 적용하면 요소 전체가 잘려 보이지 않게 할 수 있습니다.
  • 사용 예:

.clipped {
  clip-path: inset(100%);
  transition: clip-path 0.5s;
}
.clipped.show {
  clip-path: inset(0%);
}

• transform: scale(0)
  • 설명:
    • transform: scale(0);을 사용하면 요소를 축소하여 보이지 않게 만들 수 있으며, 전환 효과와 결합할 수 있습니다.
  • 사용 예:

.scale {
  transform: scale(0);
  transition: transform 0.5s;
}
.scale.show {
  transform: scale(1);
}

• position off-screen
  • 설명:
    • position: absolute; left: -9999px;와 같이 위치를 화면 밖으로 이동시켜 보이지 않게 할 수도 있습니다.
  • 사용 예:

.offscreen {
  position: absolute;
  left: -9999px;
}

 

*** input type="hidden"을 제외하고 모두 CSS입니다.