Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
Tags
- 이터러블
- 유사배열
- webpack
- 함수형
- 로컬터널
- hoisting
- 렉시컬 환경
- 로드마크
- pushstate
- fetch 취소
- 호출 스택
- localtunnel
- Lexical environment
- 넘블
- Call stack
- 호이스팅
- AbortController
- relatedTarget
- 자바스크립트
- 실행 컨택스트
- 매클로태스크
- 이벤트 루프
- JavaScript
- 클론코딩
- 화살표 함수
- 비동기 작업
- 웹팩
- 마이크로태스크
- debounce
- 번들러
Archives
- Today
- Total
목록CSS (1)
내가 보려고 만든 개발 공부 일지

화면에 컨텐츠를 보여주기 위해선 API를 호출하고 데이터를 가져와서 해당 UI에 적절히 렌더링 해줘야 한다. 이때 API 요청에 대한 응답이 올때까지 사용자에게 "요청중" 이라는 상태를 보여주는게 좋은 사용자 경험일 것이다. 이 상태를 로딩마크로 보여주는데 (원이 빙글빙글 돌아간다던가 아니면 텍스트가 움직인다던가) 가장 무난한 모양의 로딩마크를 css로 구현하는 법을 끄적거려본다. 위 스타일1, 2 의 차이점은 1은 그냥 일정하게 회전만 하는 모습이고, 2는 뭔가 테두리가 늘어났다 줄었다 하면서 좀더 역동적으로 회전하는 모습이다. 스타일-1 /* style.scss */ .loading { div { border: 9px solid orange; border-radius: 50%; border-color..
CSS
2022. 1. 13. 15:37