(티스토리) 스킨 편집 자바스크립트 및 CSS가 많을 때 한 파일로 몰아넣는 방법!

서근

2022. 3. 17. 19:19

QUOTE THE DAY

이번에는 티스토리의 스킨에서 HTML부분 자바스크립트 및 CSS가 너무 길 거나 많을 때, HTML 부분을 깔끔하게 한파일로 넣고 호출하는 방법까지 알아보도록 하겠습니다. HTML의 자바스크립트가 너무 많거나 중복되면 구글 SEO에 안 좋기 때문에 해당 방법을 사용하는 것을 추천드립니다.

만약 티스토리 스킨 편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요!

(티스토리) 스킨 편집 기초 상식

안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스

seons-dev.tistory.com

스킨 편집 자바스크립트 및 CSS 정리 방법

파일 생성

HTML에서 자바스크립트를 불러오려면 <script>와 </script> 사이에 자바스크립트를 넣어야 하는 거 아시죠? 이 스크립트를 JS(JAVASCRIPT)로 넣으려면 <script> 태그는 지워주셔야 합니다.

<script>
   //자바스크립트 code
  </script>

이제 정리하실 자바스크립트를 찾으셨다면 JS파일로 옮겨주셔야 합니다. 그러기 위해선 JS파일 및 CSS파일을 작성할 수 있는 사이트로 접속하셔야 합니다.

stackblitz

The online code editor for web apps. Powered by Visual Studio Code. - StackBlitz

stackblitz.com

사이트에 접속하셨다면 아래 중에 하나를 선택하셔서 들어가 줍니다.

그리고 왼쪽 탭에 .js 또는 .css 부분이 있는데 .js 을 클릭하고 안에 있는 내용은 모두 삭제해줍니다.

이제 이 파일 안에 <script></script>를 제외한 스크립트 파일을 잘 정리해서 넣어주시면 됩니다.

반대로, CSS 코드를 정리하시고 싶으시다면 .css파일로 들어가서 그곳에 넣어주시면 되겠죠?!

티스토리로 파일 호출 방법

파일을 생성하고 PC에 저장하셨다면, 티스토리에 호출을 해야 합니다. 우선, 스킨 편집 부분 파일 업로드 탭에 .js 또는 .css 파일을 업로드합니다.

그리고 HTML탭으로 들어가서 해당 스크립트가 있던 자리에 넣어주시면 되는데 만약 이동한 스크립트가 </head> 위에 있거나 </body> 위에 있었다면 그 위치에 아래 코드를 업로드한 정확한 파일명과 함께 작성해줍니다.

자바스크립트 호출

XXXXX부분에 업로드한 파일명을 입력하고 코드를 넣어주면 됩니다.

<!--==========CUSTOM SCRIPT START==========-->
  <script src="./images/XXXXX.js"></script>
  <!--==========CUSTOM SCRIPT END==========-->

CSS 호출

CSS를 호출할 때는 </head> 안쪽에 넣어주시면 됩니다.

 <head>
 
<!--==========CUSTOM CSS START==========-->	
<link rel="stylesheet" href="./images/XXXXX.css" />	
<!--==========CUSTOM CSS END==========-->

 </head>

저는 제가 사용하는 Keyframe이나 특정 페이지에서만 사용하는 CSS 스타일 시트는 각각 파일로 저장하여 호출하는 식으로 티스토리 자체 CSS 부분을 너무 길지 않게 유지하고 있습니다.

그리고, 블로그 속도를 빠르게 하기 위해서 CSS를 한 줄로 정렬하는 게 좋다고는 하는데 만약 필요하시다면 아래 링크를 타고 정리하실 수 있습니다.

cssminifier

CSS Minifier & Compressor | Toptal®

CSS Minifier Online CSS Minifier/Compressor. Free! Provides an API. Simple Quick and Fast.

www.toptal.com

반대로 압축된 CSS를 보기 좋게 정리하는 것도 가능한데, 이에 관해서 여러 링크를 포스팅 해놨으니 필요하신 경우 확인 부탁드립니다.

오늘은 티스토리 스킨 편집 자바스크립트 및 CSS가 많을 때 한 파일로 몰아넣는 방법에 대해 알아보았습니다.

궁금하신 점이 있으시다면 언제든 댓글 남겨주세요.

읽어주셔서 감사합니다🤟

저작자표시 비영리 변경금지

'TIP > CSS & Tistory' 카테고리의 다른 글

포스팅을 할 때 사진을 극적으로 줄이는 완벽한 방법! WebP (단순 용량 압축 X ) (20)	2022.03.19
(티스토리) 미넴스킨 - BGM 넣는 방법 및 스킨을 업데이트해도 스킨 설정 유지하는 방법! (37)	2022.03.19
(티스토리) 카테고리 새 글 발생 시 나오는 NEW 아이콘 변경하는 방법 - 아이콘 첨부! (73)	2022.03.16
(티스토리) 스킨 편집 기초 상식 (33)	2022.03.15
(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! (20)	2022.03.15