로딩 (3) 썸네일형 리스트형 레이지 로딩 레이지 로딩은 사이트가 로딩될 때 전체페이지를 한 번에 로딩하지 않고 필요한 페이지만 로딩하고 일부페이지는 해당 페이지에 요청이 있을 때 로딩하는 방식을 말합니다. 레이지 로딩은 필요한 파일만 다운로드하기 때문에 웹사이트의 속도 등 성능향상의 장점이 있습니다. 구현하기 프로젝트 생성 (생성 시 앵귤러라이터 사용 체크) 앵귤러 - 씨엘아이 앵귤러 씨엘아이는 (커맨드라인 인터페이스)는 앵귤러 어플리케이션을 만들고 관리하는데 권장되는 도구입니다. CLI 설치 npm install -g @angular/cli 버전 및 버전 이력 확인 (https://github.com/angular/angula jin-co.tistory.com 컴포넌트 추가 구현을 위해 필요한 컴포넌트를 아래와 같이 추가합니다. ng g c .. 티스토리 자연스러운 페이지 로딩 페이지를 이동하면서 요소들이 화면에 표시될 때 요소나 파일이 로딩되는 속도 차이 등의 이유로 아래와 같이 부자연스럽게 표시됩니다. 간단한 작업을 통해 화면을 자연스럽게 로딩하는 효과를 구현해 보겠습니다. 해당 코드는 티스토리의 모든 스킨에 적용가능할 뿐 아니라 거의 모든 웹 사이트에 적용가능합니다. 완성코드 /* Type Selector Reset */ body { /* other styles */ animation: smoothRendering 1s ease forwards; } @keyframes smoothRendering { from {opacity: 0;} to {opacity: 1;} } 구현하기 공통 스타일 추가 관리자 페이지에 보면 좌측에 '스킨편집'이라는 기능이 있는데요. 해당 메뉴를 선.. CSS 컴포넌트 - 로딩 CSS 애니메이션을 사용해서 로딩 효과를 만들어보겠습니다. 구현 로딩효과를 추가할 요소를 아래와 같이 추가합니다. 해당 컴포넌트는 애니메이션의 딜레이 효과와 before 및 after Selector를 사용하고 시간차로 효과를 주어 하나의 요소만 사용하여 로딩효과를 완성하였습니다. /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; align-items: center; justify-content: center; height: 100vh; } .loading { border: 30px solid transparent; border-radius: 50%; position: relative; bord.. 이전 1 다음
