반응형 css3 [CSS] Animation 최적화 ⚡ CSS 애니메이션CSS로 애니메이션을 만들어줄 때 데스크톱이나 노트북으로 부드럽게 작동하는 것을 확인했어도막상 핸드폰으로 볼 때 엄청나게 버벅이는 경우가 있습니다. 이러한 현상은 스마트폰의 성능이 아무리 좋아졌다고 해도 비교적 떨어지기 때문입니다. 즉, 애니메이션 효과는 생각보다 컴퓨팅 파워를 많이 소모하고 최적화가 되어 있지 않으면 성능에 문제가 생긴다는 말과 같습니다. 그럼 웹에서 애니메이션이 동작하는 과정과 최적화하는 방법에 대해 알아보겠습니다.📌 브라우저 렌더링 과정브라우저에서 UI를 렌더링 하는 과정을 요약하면 다음과 같습니다.Recalculate Style스타일을 계산하는 과정입니다.작성된 CSS를 파싱해 CSS Object Model을 생성합니다.Dom Tree와 CSS Object M.. 2023. 6. 19. [HTML, CSS] 이미지 로딩 속도 개선 ⚡️문제점 이번에 만든 심리테스트는 총 16문제로 구성되어있다. 문제의 상황에 맞춰 이미지도 삽입을 했는데, 100kb밖에 안되는 이미지들이 로딩하는데 2~3초가량 걸리는 문제가 있었다. ⚡️해결 방법 문제 해결을 위해 캐시메모리에 이미지들을 미리 담아두는 방법을 사용했다. .loading { width: 0; height: 0; } 사이트 접속 시 미리 이미지 정보를 보이지 않는 크기로 불러와 캐시 메모리에 담아줘, 다음 질문으로 넘어갈 시 이미지들을 바로바로 불러와 2~3초 걸리던 로딩 속도를 확실하게 줄일 수 있었다. 2021. 9. 24. [HTML, CSS] 가운데(중앙) 정렬 이번에 심리테스트 웹을 제작하며 사용한 중앙정렬이다. margin: 0 auto; margin 좌 우 위 아래 여백을 의미한다. margin: 0 그 여백을 지정하지 않는다는 뜻이다. margin: 값 좌 우 위 아래 "값" 만큼 여백을 지정해준다. margin: 값 auto 위 아래에 "값" 만큼의 여백을 주고 좌우의 여백은 자동으로 중앙에 정렬된다. margin: 0 auto 위 아래에 여백을 주지 않고 좌우의 여백을 자동으로 중앙 정렬한다. 2021. 9. 23. 반응형 이전 1 다음
오픈 채팅
