[tistory] 티스토리 로딩 화면 gif 설정하여 꾸미기

 

 

프로그래밍 세계를 탐구합시다.

 

 

 

gif 파일을 활용하여 tistory 로딩 화면을 효과적으로 꾸밀 수 있습니다.

 

 

 

<적용 화면>

 

 

 

 

 

 

 

<적용 방법>

 

 

1. GIF 이미지 찾기

 

가장 먼저 해야 할 일은 원하는 gif 이미지를 찾는 것입니다. 저는 이번에는 무료로 고화질 이미지를 제공하는 'pixabay' 사이트를 이용하겠습니다. pixabay 홈페이지에 접속한 후, 상단의 검색창에 'gif'를 입력하고 검색하세요. 그러면 다양한 gif 이미지들이 나올 것입니다. 적당한 이미지를 선택한 후, '무료 다운로드'를 클릭해 이미지를 다운로드 받습니다.

 

참고로 pixabay 사이트는 로그인이 필요합니다.

 

 

 

놀라운 무료 이미지 - Pixabay - Pixabay

 

 

 

 

 

회원가입을 하고 싶지 않다면 아래 사이트를 활용할 수 있습니다.

 

https://icons8.com/icons/set/loading

Loading Icons, Logos, Symbols – Free Download PNG, SVG

 

 

 

 

gif 파일이 준비되었다면, 파일 이름을 loading.gif로 수정합니다.

 

 

 

2. 티스토리 관리자 페이지 접속

 

다음으로 티스토리 관리자 페이지에 접속해야 합니다. 로그인 후, 상단의 '관리' 메뉴를 클릭하세요. 그리고 꾸미기 > 스킨 편집 페이지에 접속합니다.

 

 

 

 

 

 

스킨 편집에 접속 후 html 편집을 클릭합니다.

 

 

 

 

 

HTML, CSS, 파일업로드 중 파일업로드를 선택합니다.

 

 

 

 

 

아래 파일 목록이 나오면 아까 다운로드 받은 gif 파일을 추가하고 적용 버튼을 클릭합니다.

파일 이름은 loading.gif로 설정합니다.

(다른 이름으로 설정한다면 HTML 코드를 수정해야 합니다.)

 

 

 

 

 

적용 버튼을 눌렀다면, HTML로 이동합니다.

 

 

 

 

코드를 설정할 차례입니다.

HTML에는 코드만 추가하면 됩니다.

 

원래 있던 코드 중 마지막 부분에 있는 </body> 위쪽에 아래 코드를 입력하면 됩니다.

 

코드 입력 후 적용 버튼 클릭해야 합니다.

 

 

<예시 화면>

 

 

 

<입력 코드>

 

<!-- Loading Code Start -->
<script type="text/javascript">
 $(window).on('load', function () {
      $("#loading").hide();
 });
</script>
	
<style type="text/css">
#loading {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	display: block;
	opacity: 0.8;
	background: white;
	z-index: 99;
	text-align: center;
}

#loading > 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="loading">
	<img src="./images/loading.gif" alt="loading">
</div>
<!-- Loading Code End -->

 

 

 

이제 방문자가 블로그에 접속했을 때, 로딩 화면으로 설정한 gif 이미지가 나타날 것입니다. 위와 같은 방식으로 개성 넘치는 로딩 화면을 만들 수 있습니다.