728x90
📌
오늘 한 일
3주차 4주차 drf 강의 다시 한번 보기
도커 타임어택
페이지 로딩모션 만들기
오늘은 뭘 해야할지 계획을 못 잡았다. 그래서 무작정 drf강의를 다시 한번 봤음
3,4주 차 강의를 듣고 나니 3시 좀 넘는 시간이 되었다.
강의를 듣고 이제 뭐하지 고민하다가 도커 타임어택을 봤다.
역시 도커 3주차 강의를 듣지 않아서 그런지 문제를 풀 수가 없었다.
그래서 내가 한부분까지만 제출했음
타임어택 해설강의를 듣고 다음 프로젝트 때 사용할만한 모션을 검색하던 중
페이지 로딩 모션을 만들고 오늘 하루를 끝냈음
페이지 로딩모션
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--제이쿼리 링크-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
.loader {
border: 13px solid #f3f3f3;
border-top : 13px solid #7f7f7f;
border-radius: 50%;
width: 80px;
height: 80px;
animation: spin 2s linear infinite;
position: fixed;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
@keyframes spin{
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="loader"></div>
<script>
$(window).load(function(){
$('.loader').delay(3000).fadeOut(); //페이지에 아무것도 없어서 딜레이 3초줌
});
</script>
</body>
</html>
시연 영상
728x90
'내일배움캠프' 카테고리의 다른 글
| 71. 내일배움캠프 - 56일차 TIL (0) | 2022.11.21 |
|---|---|
| 70. 내일배움캠프 - 12주차 WIL (1) | 2022.11.20 |
| 68. 내일배움캠프 - 54일차 TIL (3) | 2022.11.17 |
| 67. 내일배움캠프 - 53일차 TIL (0) | 2022.11.17 |
| 66. 내일배움캠프 - 52일차 TIL (0) | 2022.11.15 |
댓글