[HTML/CSS] 요소 없애기 - display:none과 visibility:hidden

 

이번 글은 요소를 없애는 2가지 방법 display:none과 visibility:hidden에 대한 설명글이다.

 

---

 

[ 설명 예제 ]

아래 예제는 빨간색 border에 마우스가 hover될 경우 검정색 말풍선이 뜨는 구조이다.

이때 여러개의 말풍선이 배치되어져 있을 때 첫번째 border에 hover되어 해당 말풍선이 나오고 두번째 말풍선에 마우스가 hover되면 첫번째 말풍선은 사라져야하는 구조일 경우의 상황이다.

---

 

 

이럴 경우, 첫번째 말풍선의 존재를 없애줘야한다.

없애는 방법으로는 display : none;과 visiblity : hidden;이 있다.

• display : none : 자리값과 존재 모두 사라지게 하는 것
• visibility : hidden : 자리값은 유지하되 존재 자체를 사라지게 하는 것

 

그리고 display 속성의 경우 transition과 같이 사용할 수 없으므로 display속성이 사용되었다면 visibility를 사용하면 된다.

 

---