반응형 HTML2 [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 다음