[ Tistory ] hELLO 스킨에 적용하는 로딩 화면 변경하기

🏷️ Tistory

[ Tistory ] hELLO 스킨에 적용하는 로딩 화면 변경하기

EarthSea 2024. 3. 14. 08:30

안녕하세요!

오늘은 티스토리의 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시간이나 헤매었네요ㅠㅠ!

그래도 아주 예쁜 오리 친구들 적용했으니 뿌듯합니다~~!!!!

저 오리들이 귀여워서 로딩이 오래 걸리면 오래 걸릴수록 좋아요!

그럼 다들 블로그에 예쁘게 적용하세요~~!!!

다른 티스토리 블꾸도 들고 와보겠습니다❗️

저작자표시 비영리 변경금지 (새창열림)