(구) 티스토리 스킨

1. 티스토리 스킨만들기 (Html 초보) - 기본준비 (Atom)

developer soohyung park 2019. 8. 28. 00:01

오늘은 비가 내려서 찝찝하네요. 이럴 땐 컴퓨터 앞에 시원하게 앉아있는 게 복입니다.

그렇게 되는날을 기약하며 오늘은 스킨 작업하기 전에 기본 준비부터 해볼게요.

 

기본으로 티스토리 관리에서 스킨편집 툴을 제공합니다.

 

블로그관리 홈 > 꾸미기 (스킨 편집) > Html편집

기본편집 툴에서  스킨을 만들 수 있습니다.

 

저희는 초보고 기초지식도 없는데 많은 코드를 적용하기는 하늘의 별따기입니다.

간단한 Html 코딩도 / 기호 하나로 엉망이 되는 경우가 허다하니깐요.

 

코딩을 한 번에 하는 분은 기본 편집으로 되겠지만 저희는 아니니깐 옆에서 도와줄 편집 툴부터 설치합니다.

기본적인 Html편집과 CSS만 도와주면 되니깐 익숙한 툴이 있으시면 그걸 사용하셔도 됩니다.

저는 Atom (https://atom.io/) 이라는 프로그램을 준비하겠습니다.

 

Atom 홈페이지

 

각자 자기 PC에 맞는지 한번 더 확인하시고 다운로드하셔서 설치합니다.

 

기본팝업 확인 후 메인화면

 

스킨 제작을 위한 준비는 끝이 난 것 같습니다.

이제 꿈을 펼칠 시간입니다.

 

다음 시간부터는 Atom으로 작성해서 티스토리 스킨 편집에 적용하여 스킨을 만들어 보겠습니다.

 


 

편의를 위한 Atom Package 추천

file > settings > install > 검색

 

atom-beautify - 태그 정렬을 도와줍니다.

사진과 같이 정렬을 도와줍니다.

 

autoclose-html - 태그를 작성하면 자동으로 닫는 태그를 작성해줍니다

 

color-picker - 색상 선택을 팝업을 띄워 도와줍니다.

설정된 단축키를 누르면 나타나는 팝업

 

highlight-line - 작성 중인 라인을 밝게 보여줍니다.

 

highlight-selected - 단어를 더블클릭하면 선택된 내용과 같은 단어를 밝게 보여줍니다.

 

반응형