개발 창고

[티스토리 스킨 만들기] 2. 개발 환경 세팅하기(Typescript, TailwindCSS, Webpack)

시작하며 티스토리 스킨 적용에 필요한 파일에는 index.xml, skin.html, style.css, script.js가 있습니다. 이 파일들을 빌드하기 위해 개발 환경을 세팅해보겠습니다. 이 글은 타입스크립트와 tailwind css의 사용 설정과 webpack을 이용해 이들을 한번에 빌드하는 과정에 대해서 작성하였습니다. 티스토리 스킨 개발을 위한 파일 디렉토리는 다음과 같습니다. tistory_skin |- index.xml |- skin.html |- style.css |- /images |- script.js Typescript로 개발하기 우선 개발을 진행할 src폴더를 만들어 script.ts파일을 생성합니다. 이 파일에서 스킨에 적용할(사이드바 동작, TOC 등) 기능을 개발하면 됩니다...

[티스토리 스킨 만들기] 1. 구조 파악하기

개요 어느날 내 티스토리에 적용할 블로그 테마를 찾는 중에 마음에 드는 테마가 없어서 내 입맛대로 스킨을 만들어 보기로 했다. 하지만 어떻게 만들어야 할 지 몰라서 찾아보는데 시간 투자를 많이했는데, 처음 개발하는 사람들을 위한 정리된 가이드 글이 있으면 좋겠다 싶어서 글을 작성한다. 스킨 제작 가이드 스킨 개발을 위해서 티스토리에서는 스킨 제작 가이드를 제공한다. 하지만 제작 가이드가 친절하게 설명되어있지 않아서 앞으로 해당 문서를 토대로 최대한 이해하기 쉽게 설명하도록 하겠다. 스킨을 적용하기 위해 필요한 파일에는 skin.html, index.xml, style.css와 추가적으로 js, image 파일이 있다. 스킨의 메인 템플릿 파일인 skin.html과 스킨 정보 파일인 index.xml에 대..