μλ νμΈμ!
μ€λμ ν°μ€ν 리μ hELLO μ€ν¨μ λ‘λ© νλ©΄μ λ³κ²½ν΄λ³΄λ €κ³ ν©λλ€.
CSSμ htmlμ λ€λ£¨λ 건 μ²μμ΄λΌ μ¬κΈ°μ κΈ° μ½μ§νκ³ λλμ΄ μ μ©μ νμ΄μ..!!
μμ£Ό μ½μ§λ§ 1μκ° μ λ μ½μ§νλ μ κ°μ μ¬λμ΄ μμμΌλ©΄ νλ λ°λμ κΈμ μ¨λ³΄λ €κ³ ν©λλ€.
λ‘λ© νλ©΄ λ³κ²½νλ λ°©λ²
첫 λ²μ§Έ, λ‘λ© νλ©΄ λ€μ΄λ‘λνκΈ°
λ§μμ λλ .gif μ΄λ―Έμ§λ₯Ό λ€μ΄λ‘λν©λλ€.
λ‘λ© νλ©΄μ CSS λ‘ μ λλ©μ΄μ
μ μ¬μ©ν΄ ꡬνν΄λ λμ§λ§
μμ£Ό κ·μ½κ³ μ΄μ λ‘λ© μ λλ©μ΄μ μ΄ λ§μΌλ μ΄κ² λ μ¬μ°μ€ κ±°μμ!!
μ λ ꡬκΈμ loading screen.gif λ₯Ό μ³λ³΄κ±°λ Pinterest μ loadingμ μ³λ³΄μμ΅λλ€.
μμ£Ό λ§μ gif μ΄λ―Έμ§λ€μ΄ μλλΌκ³ μ.
κ·Έμ€ λ§μμ λλ μ΄λ―Έμ§λ₯Ό λ€μ΄λ‘λν©λλ€.
κΌ gif μ¬μΌμ§ μμ§μ΄μ€ κ±°μμ!!!!
λ λ²μ§Έ, .gif μ΄λ¦ λ³κ²½νκΈ°
μ΄λ¦μ μ½λμ λΆμ¬ λ£μ΄μ€ κ²μ΄κΈ° λλ¬Έμ μ€μλ₯Ό μ΅μννκ³ μ
μ΄λ―Έμ§ μ΄λ¦μ λ³κ²½ν΄ μ£ΌμΈμ.
λ€λ€ " loading.gif " λ‘ νμκΈΈλ μ λ loading.gif λ‘ νμμ΅λλ€.
μΈ λ²μ§Έ, .gif νμΌ μ λ‘λ νκΈ°
μμ μ ν°μ€ν 리 νμμ Q ν€λ₯Ό λλ₯΄λ©΄ λΈλ‘κ·Έ κ΄λ¦¬ νμ΄μ§λ‘ λμ΄κ°κ² λ©λλ€.
κ±°κΈ°μ κΎΈλ―ΈκΈ° -> μ€ν¨ νΈμ§ -> html νΈμ§μΌλ‘ λ€μ΄κ° μ£ΌμΈμ!
μ΄μ μ°¨λ‘λ‘
νμΌμ λ‘λ -> μΆκ° λ²νΌ -> loading.gif νμΌ μΆκ° -> μ μ© λ²νΌ
μ λλ¬μ£Όμλ©΄ λ©λλ€.
μ λ μ¬λ¬ loading νμΌμ λ£λ€ 보λ μ΅μ’ μ μΌλ‘ loading4-1μ λ£κ² λμμ΄μ..
( μμ£Ό μ¬λ¬ κ°λ‘ μλν΄ λ΄€λ€λ λ».. γ γ )
λ€ λ²μ§Έ, htmlνμΌμ μ½λ μ½μ νκΈ°
<!-- Loading νλ©΄ μ½λ μμ -->
<script src="https://code.jquery.com/jquery-1.8.0.js"
integrity="sha256-00Fh8tkPAe+EmVaHFpD+HovxWk7b97qwqVi7nLvjdgs="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(window).on('load', function () {
$("#load").hide();
});
</script>
<style type="text/css">
#load {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background: <!-- μνλ λ°°κ²½μ λ£κΈ° -->;
z-index: 99;
text-align: center;
}
#load > img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
z-index: 50;
}
</style>
<div id="load">
<img src="./images/loading.gif" alt="loading">
</div>
<!-- Loading νλ©΄ μ½λ μ’
λ£ -->
μμ μ½λλ₯Ό </body> λ°λ‘ μμ λ³΅λΆ ν΄μ£Όμλ©΄ λΌμ!
μ΄λ, μνλ background μ μ€μ λ§ ν΄μ£Όμλ©΄ λ©λλ€!
λ§μ½ .gifκ° ν¬λͺ μ΄λΌλ©΄ #ffffff μΈ ν°μμ μΆμ²λλ €μ!!
μ λ .gif λ€μ λ°°κ²½μμ΄ μμ΄μ κ°μ λ°°κ²½μμΌλ‘ μμ λ£μμ΅λλ€!
background λ€μ <--! μνλ λ°°κ²½μ λ£κΈ° -->λ₯Ό μ§μ°κ³ μμ λ£μΌλ©΄ λΌμ.
μ¬κΈ°κΉμ§ νλ©΄ μ§μ§ λ€λ κ±°μμ!
λ€μ― λ²μ§Έ, html νμΌμ λ‘λ© νμ΄μ§ μμ νκΈ°
μ μ©μ ν΄μ 미리 보기λ₯Ό 보면 λ‘λ© νμ΄μ§κ° μλμ κ²κ³Ό μλ‘μ΄ κ²μ΄ κ²Ήμ³μ λμ΅λλ€.
μλμ λ‘λ© νλ©΄κ³Ό κ²Ήμ³μ Έμ λ°μνλ λ¬Έμ μμ
μ¬κΈ°μλΆν°λ hELLO μ€ν¨μ λΌμ λΆλ€μ΄ μ μ©νλ©΄ λ©λλ€!
htmlμ bodyμ μ μΌ μλ¨ λΆλΆμ μ΄ λΆλΆμ μ§μμ£Όμλ©΄ λΌμ!
<body class="min-w-xs overflow-x-hidden bg-h-100 text-h-900 dark:bg-h-800 dark:text-h-200" id="tt-body-page">
<div class="w-screen h-screen fixed top-0 left-0 z-50 flex items-center justify-center bg-h-100 dark:bg-h-800" id="loader" x-show="loading" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
<!--<div class="rounded-full w-14 h-14 my-14 mx-auto text-base relative border-2 border-solid border-h-500/20 border-l-h-500 dark:border-h-100/20 dark:border-l-h-100 animate-loading"></div> -->
</div>
<div class="fixed top-0 w-screen z-50" x-data="indicator" @scroll.window="indicate">
<div class="w-screen">
<div class="w-0 h-0.5 bg-h-900 rounded bg-h-800 dark:bg-h-200" x-ref="indicator"></div>
</div>
</div>
... μ½λ μΆμ½
κ·ΈλΌ μ§μ§ λμ΄μμ!!!
μ μ©νλ©΄
μ μ€ν¨ λΆλΆ μ§μ°λ κ±Έ λͺ°λΌμ 1μκ°μ΄λ ν€λ§€μλ€μγ γ !
κ·Έλλ μμ£Ό μμ μ€λ¦¬ μΉκ΅¬λ€ μ μ©νμΌλ λΏλ―ν©λλ€~~!!!!
μ μ€λ¦¬λ€μ΄ κ·μ¬μμ λ‘λ©μ΄ μ€λ 걸리면 μ€λ 걸릴μλ‘ μ’μμ!
κ·ΈλΌ λ€λ€ λΈλ‘κ·Έμ μμκ² μ μ©νμΈμ~~!!!
λ€λ₯Έ ν°μ€ν 리 λΈκΎΈλ λ€κ³ μλ³΄κ² μ΅λλ€βοΈ
