[참고] display:none일 때, transition 불가

display:none 일때는, transition으로 효과를 넣어도 생각한대로 작동되지 않는다. 원인은? transition을 이용한 애니메이션의 특징 transition은 이전 프로퍼티의 상태와 이후 프로퍼티의 상태를 비교해서 그 차이를 부드럽게 이어준다. 일반적으로 숫자 연산 가능한 속성에 사용한다. 그러나 display와 visibility는 숫자로 연산이 안된다. 따라서 이 둘은 transition 효과도 불가능. 주요 렌더링 경로 Critical Rendering Path 인터넷 브라우저가 화면 상에 코드를 그릴 때 내부적으로 여러 단계를 거친다. 이 일련의 단계들을 중요 렌더링 경로(Critical Rendering Path)라고 부른다. 관련 내용은 4단계로 나눌 수 있다. - Dom, C..

• format_list_bulleted STYLESHEET/STYLE- 참고
• · 2023. 2. 3.
• textsms

[참고] display:flex 사용할 때 justify-content가 적용 안됨

flex로 row, column 정렬을 할 때 justify-content가 적용되지 않음 #container { dispaly: flex; justify-content : space-between; } conclude flex 내부 items이 고정되고 난 후에도, items을 묶고 있는 container에 여백이 있어야 justify-content가 잘 작동된다 이유 - if your flex items are all inflexible (flex: noone or flex: 0 0 auto), and smaller than the container. - if your flex items are flexible, But can't grow to absorb all the free space, due ..

• format_list_bulleted STYLESHEET/STYLE- 참고
• · 2022. 12. 8.
• textsms