{ display : none } & { visibility : hidden }

 

element{
    visibility : hidden
}

element{
  display : none
}

 

display : none 과 visibility : hidden 은 사용자의 화면에 보이지 않게 해준다는 공통점이 있다. 그렇다면 어떤 차이점이 있을까?

• display : none은 해당 요소가 페이지에서 완전히 제거되고 레이아웃에 영향을 주지 않는다.(스크린 리더도 해당 요소를 읽을 수 없다.)
• visibility : hidden은 해당 요소를 화면에 보이지 않게 하지만, 레이아웃에 그대로 남아있어 빈 상자로 렌더링 된다.

 

See the Pen Untitled by DJ Shin (@DJ-Shin) on CodePen.

 

 

 

"display : none" 또는 "visibility : hidden" 을 하게 되면 DOM 트리에 있을까, 없을까?
둘다 DOM 트리에 포함되어 있다. 둘의 차이는 렌더 트리에서 나타나게 된다. "display : none"의 경우 렌더 트리에서 와전히 제거되어 레이아웃에서 보이지 않게 되는 반면에,  "visibility : hidden"의 경우 해당 요소가 화면에 보이지 않지만 레이아웃에 그대로 존재한다. 

 

"display : none" 와 "visibility : hidden"의 차이를 명확하게 알고 상황에 적절하게 사용하도록 하자.