display: none을 활용한 element의 숨김/표시는 가장 기본적인 방식의 show/hide 처리방법.
다만 CSS transition이 적용되지 않기 때문에 애니메이션을 구현하기 위해서는 약간의 추가적인 작업을 필요
렌더링 경로 Critical Rendering Path
- DOM, CSSOM 트리 생성 : 파싱 한 HTML과 CSS를 이용해 document object model과 css object model을 각각 생성한다.
- 렌더링 트리 생성 : 앞 단계에서 생성한 트리 정보를 바탕으로, '화면에 표시'할 요소들의 정보를 정리해 렌더링 트리를 만든다
- 레이아웃(혹은 리플로우) : 요소가 실제 화면(뷰포트) 상에 너비, 높이, 위치가 어떻게 될 것인지 계산(만)한다. (아직 화면에는 보이지 않음)
- 페인트 : 실제로 화면에 픽셀을 그림 쨔잔
display
요소를 어떻게 보여줄지 결정.
display: none은 요소를 아예 사라지게 한다. 보이지도 않고 해당 요소의 공간 또한 사라진다.
visibility
visibility 속성은 문서의 레이아웃을 변경하지 않고 요소를 보이거나 숨긴다.
vsibility: hidden 을 하더라도 요소는 보이지 않으나 요소의 영역은 그대로 남아있다.
opacity
투명도를 설정. 투명도만 조절하는 것이기 때문에 보이지 않더라도 요소는 존재한다.
해결을 위한 방법들(순수 CSS)
- transition이 아니라, keyframe animation 활용
- display 대신에 visibility 이용
- pointer-event 활용
출처
display none이 transition이 안먹히는 이유
해결방법 말고 원인 궁금하지 않나요..?🤓
velog.io
[CSS 기초] 엘리먼트 보이고 감추기 (display, visibility, opacity)
요소를 보이고 감추는 법에 대해 알아보겠습니다. 🔷 display 요소를 어떻게 보여줄지 결정합니다. display: none 은 요소를 아예 사라지게 합니다. 보이지도 않고 해당 요소의 공간 또한 사라집니다.
jwss.tistory.com
display: none에 애니메이션 추가하기
display: none을 활용한 element의 숨김/표시는 가장 기본적인 방식의 show/hide 처리방법입니다. 다만 CSS transition이 적용되지 않기 때문에 자연스러운 애니메이션을 구현하기 위해서는 약간의 추가적인
uxdev.org
css display none 애니메이션 오류 수정하기
오늘의 문제 display:none; display:block; 에 transition 애니메이션이 적용되지 않는다! See the Pen display none animation1 by ylem76 (@ylem76) on CodePen. 메뉴를 마우스 오버했을 때 하위 메뉴가 보이고..
songsong.dev
'Development > CSS & SCSS' 카테고리의 다른 글
| 카테고리 탭 구현하기 (0) | 2022.05.13 |
|---|---|
| 반응형 웹 단계별 해상도 (0) | 2022.05.03 |
| [CSS] 트랜지션(Transition)과 애니메이션(Animation) (0) | 2022.04.30 |
| calc (0) | 2022.03.27 |
| Font Awesome 사용하기 ( + react ) (0) | 2022.03.26 |