Section 2 - 반응형 티스토리 스킨 만들기 - 훑어보기 본문

티스토리 스킨만들기/Tistory One

Section 2 - 반응형 티스토리 스킨 만들기 - 훑어보기

  • nOo9ya
  • 2017. 9. 1. 15:48

시간낭비는 그만하고 이제 본격적으로 작업해보자.

※ 참고로 "반응형 티스토리 스킨 만들기"는 개인적으로 티스토리 스킨을 만드는 방법을 습득함과 동시에 제작을 하는 것이므로 쓰잘때기 없는 지면 낭비와 잘못된 정보가 넘쳐 날 수 있음을 미리 알려드립니다.

 

http://www.tistory.com/guide/skin/step0 - 티스토리 스킨 가이드 문서 참고

우선 본인도 모르기 때문에 티스토리 스킨 가이드 문서를 참고하여 작업을 시작한다.

 

스킨 제작 순서

  1. 디자인 구상하기
  2. 스킨 구조 만들기
  3. 치환자 활용하기
  4. 디자인 적용하기
  5. 스킨위자드 적용하기

 

- 간단한 설명 -

1. 디자인 구상하기

디자인이 없는데 스킨을 어떻게 만들어야 할지 감도 못 잡을 것이다.
그러므로 우선 내가 만들고 싶은 스킨 디자인을 먼저 구상하는 게 중요하다.
현재 2017년 9월 1일 오후 3시 30분.. 나도 디자인을 구상 안 했다!!

 

2. 스킨 구조 만들기

티스토리는 기본적으로
skin.html
style.css
index.xml
세개의 파일만 있으면 알아서 잘 돌아가는거 같다.
여기서 skin.html 파일은 html파일이다.

html은
<html>
<head>
</head>
<body>
</body>
</html>
요론 구조로 되어 있는데.

스킨 구조라고 말하는게 <body>와 </body>사이에 상단/컨텐츠/사이드바/푸터 영역을 잡으라는거 같다.
자세한 html 내용은 구글신 또는 개인 학습을 하길 바란다.

 

3. 치환자 활용하기

html은 기본적으로 정적 문서이다.
근데 티스토리에 글을 쓰면 DataBase에 저장된다. 그것을 호출하려면 다른 웹 언어를 이용하여 출력을 해야한다.
그렇다고 프로그래밍 언어를 공부할 필요가 있나?(쉽지도 않고...)
그래서 규칙적인 이름을 skin.html 문서에 넣어주면 자동적으로 파싱(지가 알아서 돌아가면서 해석)해주는데 이 "규칙적인 이름(또는 함수, 명령문)"을 치환자라고 한다.

쉽게 생각하자
엄청 나게 긴 프로그래밍 언어를 간단한 치환자(명령어)로 대신 바꿔치기 한다고 생각하면 된다.
자세한건 만들면서 보면 쉽게 이해가 갈 것이다.

 

4. 디자인 적용하기

구조를 잡았다면(html) 이제 디자인 구상한 것을 css로 이쁘게 꽃 단장 시켜주면 된다.

 

5. 스킨위자드 적용하기

이건 나도 뭔 소린지 모르겠다.
만들다 보면 알게되겠지..

 

이제 위 순서대로 디자인을 구상해보자!!

공유하기 링크

티스토리 스킨만들기/Tistory One Related Articles

MORE

티스토리툴바