화면에서 사라짐과 보이지 않음 사이에 있는 display: none과 visibility: hidden의 차이

1. display: none과 visibility: hidden의 차이점

display: none과 visibility: hidden은 둘 다 요소를 화면에서 사라지게 하는 CSS 속성이지만, 그 동작 원리와 차이점이 존재합니다.

• display: none: 요소를 화면에서 완전히 제거합니다. 즉, 해당 요소를 포함한 레이아웃에서 공간도 차지하지 않습니다. 다른 요소들은 이 부분을 알 수 없고, 해당 요소와 관련된 이벤트도 동작하지 않습니다.
• visibility: hidden: 요소는 여전히 존재하지만, 화면에서 보이지 않게 됩니다. 즉, 요소가 사라지긴 하지만 요소가 포함된 레이아웃에서 여전히 공간을 차지하게 됩니다. 이 경우에도 다른 요소들은 이 부분을 알 수 없지만, 해당 요소와 관련된 이벤트는 여전히 동작할 수 있습니다.

기본적으로 display: none과 visibility: hidden은 요소의 표시 여부를 조절하기 위해 사용되지만, 사용 목적과 의도에 따라 선택되어야 합니다. 즉, 요소를 완전히 제거하고 싶을 경우에는 display: none을 사용하고, 공간은 유지하면서 요소를 숨기고 싶을 경우에는 visibility: hidden을 사용해야 합니다.

2. display: none의 특징과 사용 예시

특징:

• display: none은 요소를 화면에서 완전히 제거합니다.
• 해당 요소는 레이아웃에서 공간을 차지하지 않습니다.
• 다른 요소들은 이 부분을 알 수 없고, 해당 요소와 관련된 이벤트도 동작하지 않습니다.
• display: none이 적용된 요소의 자식 요소들도 숨겨집니다.

사용 예시:

1. 토글 버튼: 버튼을 클릭할 때마다 요소를 표시하거나 숨길 수 있습니다. display: none을 사용하여 요소를 숨겨두었다가, 버튼 클릭 시 display: none을 제거하여 요소를 표시합니다.

<button id="toggle-btn">토글</button>
<div id="content" style="display: none;">
  표시할 내용
</div>

<script>
  const toggleBtn = document.getElementById('toggle-btn');
  const content = document.getElementById('content');

  toggleBtn.addEventListener('click', function() {
    if (content.style.display === 'none') {
      content.style.display = 'block';
    } else {
      content.style.display = 'none';
    }
  });
</script>

2. 미디어 쿼리: 반응형 웹 디자인에서 특정 해상도 이상에서 요소를 숨기고 싶을 경우, display: none을 사용할 수 있습니다.

@media screen and (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

위 예시에서는 화면 너비가 768px 이하일 때, .sidebar 클래스를 가진 요소를 숨깁니다.

3. visibility: hidden의 특징과 사용 예시

특징:

• visibility: hidden은 요소를 화면에서 보이지 않게 만듭니다.
• 요소는 여전히 존재하지만, 레이아웃에서 공간을 차지하게 됩니다.
• 다른 요소들은 이 부분을 알 수 없지만, 해당 요소와 관련된 이벤트는 여전히 동작할 수 있습니다.
• visibility: hidden이 적용된 요소의 자식 요소들도 숨겨집니다.

사용 예시:

1. 마우스 오버: 요소에 마우스를 올렸을 때 다른 요소를 표시하고 싶을 때, visibility: hidden을 사용하여 요소를 보이지 않게 한 후, 마우스 오버 이벤트 발생 시 visibility: visible로 변경하여 요소를 표시합니다.

<div id="box" style="visibility: hidden;">
  숨겨진 요소
</div>

<div id="tooltip" style="visibility: hidden;">
  툴팁
</div>

<script>
  const box = document.getElementById('box');
  const tooltip = document.getElementById('tooltip');

  box.addEventListener('mouseover', function() {
    tooltip.style.visibility = 'visible';
  });

  box.addEventListener('mouseout', function() {
    tooltip.style.visibility = 'hidden';
  });
</script>

2. 요소 숨기기: 특정 상태에 따라 요소를 숨기고 싶을 때, visibility: hidden을 사용할 수 있습니다. 예를 들어, 사용자가 어떠한 액션을 취하지 않았거나 특정 조건을 만족하지 않을 경우에 해당하는 요소를 숨길 수 있습니다.

if (userLoggedIn === false) {
  document.getElementById('welcome-message').style.visibility = 'hidden';
}

위 예시에서는 사용자가 로그인하지 않은 경우, id가 'welcome-message'인 요소를 숨깁니다.