[CSS] Display : none, opacity : 0, visibility : hidden 비교

브라우저의 렌더링 과정

https://mingmeng030.tistory.com/316

브라우저의 렌더링 과정과 Reflow, Repaint

 

Parsing(DOM Tree, CSSOM Tree 구성) → Style(Render Tree 구성)

→ Layout(Render Tree 배치 : Reflow) → Paint(Render Tree 그리기 : Repaint) → Composite

 

 

  Display : none     opacity : 0     visibility : hidden
  위 세 가지 모두 화면에서 element를 보이지 않게 한다. 그렇다면 차이점은 무엇일까?

 

 

Display : none

Dom Tree에는 포함되지만 Render Tree에서 제외되어 Layout(Reflow)에 포함되지 않아 화면에서 자리를 차지하지 않는다.

그러나 Dom Tree까지는 해당 요소가 Node로 만들어 지기 때문에, Parsing 과정은 거쳐야 한다. 즉, 리렌더링에 따른 자원 소모는 피하지 못한다.

- 검색엔진이 접근하지 못한다.

- Reflow, Repaint를 하지 않는다.

 

 

visibility : hidden

Render 트리에 포함되어 Layout에 포함된다. 따라서 화면 상 자리를 차지하지만 눈에 보이지 않는다.

- javascript의 onClick 이벤트에 반응하지 않는다.

- Repaint 만 함

 

opacity : 0

Layout에는 포함되지만 눈에 보이지 않는다는 점에서 visibility : hidden과 동일하게 작동한다.

그러나 visibility : hidden과 달리 click event에 반응한다. 

- javascript의 onClick 이벤트에 반응한다.

- Repaint 만 함

opacity와 visibility는 자리를 차지하지만 display는 자리를 차지하지 않는다.

코드 보기 ↓

<div class="container">
  <div class="background">
    <div class="opacity">Opacity</div>
    <div class="display">Display</div>
    <div class="visibility">Visibility</div>
  </div><br/>

  <div class="background">
    <div class="opacity">Opacity</div>  
    <div class="click-display">Display</div>
    <div class="visibility">Visibility</div>
  </div><br/>

  <div class="background">
    <div class="display">Display</div>
    <div class="click-opacity">Opacity</div>
    <div class="visibility">Visibility</div>
  </div><br/>

  <div class="background">
    <div class="display">Display</div>
    <div class="click-visibility">Visibility</div>
    <div class="opacity">Opacity</div>
  </div><br/>
</div>

.container {
  background-color: #f1f1f1;
  width: 100%;
}

div {
  display: inline-block;
  font-family: sans-serif;
  font-size: 20px;
  text-align: center;
}

.background{
  width : 500px;
  padding : 10px 0;
  border : 1px solid lightgray;
  margin : 10px 0;
}

.display, .opacity,.visibility {
  width: 100px;
  padding : 20px 0;
  text-align : center;
}

.display {
  background-color: #dd3;
}
.opacity {
  background-color: #259;
}
.visibility {
  background-color: #f12;
}

.click-display {
  display: none;
}
.click-opacity {
  opacity: 0;
}
.click-visibility {
  visibility: hidden;
}

collapses : 페이지 공간를 차지 하지 않음 / taborder : tab 키를 사용 시 포커스 여부

---

참고

https://mycodings.fly.dev/blog/2022-12-18-css-display-none-vs-visibility-hidden