CSS display & visibility

Created

Created

2020 Apr 28 2:47

Refs

Refs

display: none) 스타일이면 돔 조작이나 스타일 변경시에도 레이아웃, 리페인트가 생기지 않음

visibility: hidden일 경우 리페인트는 발생하지 않아도 레이아웃은 계산

content-visibility: hidden: 숨기며 렌더링 상태는 유지. 상태를 변경할 일이 생기면 화면에 표시될 때만 변경

content-visibility - CSS: Cascading Style Sheets | MDN

The content-visibility CSS property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed.

content-visibility - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility

content-visibility - CSS: Cascading Style Sheets | MDN

[스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링

레이아웃에 영향을 미치는 것들에 대한 정리는 What forces layout/reflow 란 글이 잘 설명해준다. 3.1.1 CSS 속성 개요 분류: CSS 이야기가 나온김에 리플로우에 영향을 미치는 유명한 CSS 요소들을 뽑아보자면 [ CSS Triggers, 20 Tips for Optimizing CSS Performance] 이 있다. 그리고 재계산을 유발하기로 유명한 속성은 다음이 있으며 불필요하게 값을 수정하지 않는게 좋다.

[스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링

https://black7375.tistory.com/79

[스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링

display:none 과 visibility:hidden 의 차이

아예 사라지게 하는것. 보이지도 않고 해당 공간도 존재하지 않게 됨 2. visibility:hidden visible 보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재하게 됨 3. display = "" 하면 디폴트 값이 쓰여지게 되는데 이때 span 태그 안에 있으면 inline div 태그 안에 있으면 block 가 쓰여지게 된다.

display:none 과 visibility:hidden 의 차이

https://unabated.tistory.com/entry/displaynone-%EA%B3%BC-visibilityhidden-%EC%9D%98-%EC%B0%A8%EC%9D%B4

display:none 과 visibility:hidden 의 차이

Recommendations

//////////