티스토리 로딩화면 (간지나게 :P) 만들어보기

본인이 여기 제목에서 신이 난 이유는 이 '로딩 화면을 적용해보기' 라는 작업이 예전부터 투두 리스트에 오래 있었기 때문이다.

 

본론으로 들어가보자. 

티스토리에서 간혹 간지나는 블로그들이나 잘 만든 블로그들을 보면 아래와 같이 로딩 화면이 있다는 것을 알 수 있을 것이다.

(이 페이지를 들어오면서도 아래와 같은 로딩 화면을 접했을 수도 있다.)

 

 

블로그 글을 로딩 할 때 커스텀하게 로딩 화면에 이미지를 넣을 수 있는 것인데, 이를 어떻게 하는 것인지 알아보자.

 

1. GIF 이미지를 준비한다.

우선 본인이 원하는 이미지를 준비한다. 로딩 gif 라고 구글에 쳐도 무방하지만, 본인의 경우는 이 로딩 화면을 만들기 위해 gif 를 직접 그리는 수고를 했으니 이를 사용할 것이다. :P

이때, 이미지의 이름은 loading 으로 설정해야한다.

 

 

2. 스킨 편집에서 gif 를 추가해준다.

블로그 설정 > 꾸미기 > 스킨 편집 에 들어간다.

그리고 아래와 같은 화면에서 html 편집 버튼을 누른다.

그리고, 파일 업로드에서 +추가 를 이용해 선택한 gif 이미지를 추가해준다. 이때, 파일 이름 및 확장자를 'loading.gif' 로 설정했는지 확인하자.

 

3. HTML 편집하기

그리고 HTML 로 돌아가서 스크로를 제일 끝까지 내려 </body> 태그를 찾아준다. 그리고 그 앞에 아래와 같은 코드를 넣는다.

<!-- Loading Code -->
<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.8;
	background: white;
	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: 100;
}
</style>
<div id="load">
	<img src="./images/loading.gif" alt="loading">
</div>
<!-- Loading Code-->

그러면 아래와 같이 될 것이다.

 

그럼 적용을 누르고 블로그로 돌아가 아무 포스팅이나 눌러보면 로딩 화면이 적용된 것을 확인 할 수 있다!

앞으로는 로딩 화면 보겠다고 포스팅을 마구 마구 눌러 볼 것이다!!