Petflix - display와 visibility

🌼 display와 visibility

display와 visibility는 HTML 요소를 화면에 표시하거나 감출 때 사용하는 속성이지만, 두 속성에는 중요한 차이점들이 있다.

 

display

 

• display: none은 요소를 완전히 숨긴다. 이 상태에서는 해당 요소가 페이지의 레이아웃에서 아예 제외된다. 즉, 공간을 차지하지 않으며, 마치 그 요소가 존재하지 않는 것처럼 동작한다.
• 반대로 display: block, display: inline 등으로 설정하면 해당 요소가 다시 레이아웃에 포함되어 공간을 차지하고 보이게 된다.

 

👉 display는 요소를 다시 보이게 만들 때마다 브라우저가 해당 요소의 위치와 레이아웃을 재계산해야 하므로 성능적으로 부담이 될 수 있다. 특히 복잡한 레이아웃일수록 레이아웃 계산에 시간이 더 걸릴 수 있다.

 

visibility

 

visibility: hidden은 요소가 화면에 보이지 않게 하지만, 해당 요소가 레이아웃 상의 공간은 여전히 차지한다. 즉, 요소는 화면에는 보이지 않지만, 해당 위치는 빈 공간으로 남아 있다.

 

👉 visibility는 단순히 보이느냐 안 보이느냐만을 제어하기 때문에 display처럼 레이아웃 재계산이 필요하지 않습니다. 이로 인해 성능 부담이 적고, 특히 opacity와 함께 애니메이션을 적용할 때 더 자연스러운 효과를 낼 수 있다.

 

전환 애니메이션을 적용할 때는 visibility와 opacity를 사용하는 것이 더 자연스럽고 성능이 좋다.

 

---

 

🌼 opacity

 

css 속성 중 하나로, 요소의 투명도를 제어한다. 서서히 보이거나 사라지게 하는 애니메이션을 구현할 때 자주 사용된다.

opacity 값은 0에서 1 사이의 값을 가집니다.

• 0은 완전히 투명한 상태를 의미한다. 즉, 요소가 보이지 않게 된다.
• 1은 불투명한 상태를 의미한다. 요소가 완전히 보이는 상태이다.

.header__profile--modal {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease;
}

.header__profile--modal.show {
  visibility: visible;
  opacity: 1;
}

 

opacity는 CSS의 transition이나 animation 속성과 함께 사용하면, 더욱 부드럽고 자연스러운 투명도 변화를 만들 수 있다.

 

transition: visibility 0s, opacity 0.3s ease;는 두 가지 CSS 속성인 visibility와 opacity에 대해 전환 효과를 적용하는 것을 의미한다. 각각의 속성에 대해 다른 전환 시간을 설정하여 좀 더 복잡한 애니메이션 효과를 구현할 수 있다.

 

---

 

🌼 border-radius가 적용되지 않는  문제( overflow: hidden )

 

overflow: hidden;을 해주지 않으면 테투리 둥글게가 적용되지 않는다. 

.header__profile--modal {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease;
  border-radius: 10px;
}
.header__profile--modal.show {
  border-radius: 10px;
  visibility: visible;
  opacity: 1;
}

 

👉 overflow: hidden을 추가해야 border-radius가 제대로 적용되는 이유는

 

요소 내부의 내용이 둥근 모서리를 벗어날 수 있기 때문이다. 쉽게 설명하면, border-radius는 요소의 외곽만 둥글게 만들어 주지만, 그 안에 있는 내용은 별도로 처리하지 않으면 둥근 모서리를 넘어서 나타날 수 있다.

 

결론적으로, border-radius만으로는 내부 내용이 둥근 테두리를 넘어서 보일 수 있기 때문에, overflow: hidden을 추가해서 모서리가 깔끔하게 표현되도록 하는 것이다.