cover

[티스토리 블로그 스킨 제작 가이드 강의 2] 스킨 등록과 편집

categoryCategory
Tistory
tagsTags
Skin
Lecture
calendarCreated
2024-01-28 오전 03:05
calendarUpdated
2024-03-13 오후 23:36

안녕하세요. 블로그 크리에이터입니다.

이번 시간에는 티스토리 블로그 스킨을 만들기 위해서 등록하는 방법과 편집하는 방법에 대해서 알아볼게요.

필요한 파일들 준비

티스토리 블로그 스킨을 만드려면 우선 세 가지 파일이 필요한데요. skin.html과, style.css, 그리고 index.xml 파일입니다. 메모장이든 Visual Studio Code든 아무 프로그램을 열어서 이 확장자를 가진 세 개의 파일들을 만들어주시면 됩니다. 내용은 아무것도 넣지 않으셔도 됩니다.

loading
warn
      2023.03.14 기준으로 제가 스킨 편집페이지로 이동할 때 무한 로딩이 일어나고 스킨 등록을 해도 적용이 되지 않는 문제가 발생했습니다. 그래서 index.xml 파일은 https://tistory.github.io/document-tistory-skin/common/index.xml.html 에 있는 예시를 그대로 복사해서 넣어주시면 됩니다 여기에도 넣어둘게요.
xml
index.xml
      <?xml version="1.0" encoding="utf-8"?>
<skin>
  <information>
    <name>기본 스킨</name>
    <version>1.1</version>
    <description>
      <![CDATA[웹표준을 준수한 XHTML 기반의 Tistory 기본 스킨입니다.]]>
    </description>
    <license>
      <![CDATA[자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.]]>
    </license>
  </information>
  <author>
    <name>tistory</name>
    <homepage>http://notice.tistory.com</homepage>
    <email>tistoryblog@daum.net</email>
  </author>
  <default>
    <recentEntries>5</recentEntries>
    <recentComments>5</recentComments>
    <recentTrackbacks>5</recentTrackbacks>
    <itemsOnGuestbook>10</itemsOnGuestbook>
    <tagsInCloud>30</tagsInCloud>
    <sortInCloud>3</sortInCloud>
    <expandComment>0</expandComment>
    <expandTrackback>0</expandTrackback>
    <lengthOfRecentNotice>25</lengthOfRecentNotice>
    <lengthOfRecentEntry>27</lengthOfRecentEntry>
    <lengthOfRecentComment>30</lengthOfRecentComment>
    <lengthOfRecentTrackback>30</lengthOfRecentTrackback>
    <lengthOfLink>30</lengthOfLink>
    <showListOnCategory>1</showListOnCategory>
    <showListOnArchive>1</showListOnArchive>
    <commentMessage>
      <none>댓글이 없습니다.</none>
      <single>댓글 &lt;span class="cnt"&gt;하나&lt;/span&gt; 달렸습니다.</single>
    </commentMessage>
    <trackbackMessage>
      <none>받은 트랙백이 없고</none>
      <single>트랙백이 &lt;span class="cnt"&gt;하나&lt;/span&gt;이고</single>
    </trackbackMessage>
    <tree>
      <color>000000</color>
      <bgColor>ffffff</bgColor>
      <activeColor>000000</activeColor>
      <activeBgColor>eeeeee</activeBgColor>
      <labelLength>27</labelLength>
      <showValue>1</showValue>
    </tree>
    <contentWidth>500</contentWidth>
  </default>
</skin>

스킨 등록

그런 다음 티스토리 블로그 관리 페이지로 들어가셔서 꾸미기에 있는 스킨 변경을 눌러주세요.

loading

그리고 오른쪽에 보이는 스킨 등록+ 버튼을 클릭합니다.

loading

그러면 스킨 등록 페이지가 나오는데 오른쪽에 보이는 추가 버튼을 클릭합니다.

loading

아까 만들었던 파일 3개를 업로드하시면 됩니다.

loading

그러면 이렇게 파일들이 나타나는데요. 필수 파일이 아니면 모두 images 폴더에 저장되기 때문에 파일명과 확장자명을 똑같이 해서 잘 만드셔야합니다.

[예를 들어 하나 만들어보겠습니다. example.html 이라는 파일을 하나 만들고 업로드해볼게요. 그러면 이렇게 images라는 폴더에 들어간 것을 볼 수 있습니다. 필수파일들을 제외하고는 모두 images 폴더에 들어가는데요. javscript나 이미지 파일들도 업로드할 시 여기에 들어간다고 보시면 되요.]

잘 업로드되었다면 저장 버튼을 클릭합니다.

loading

이제 스킨 이름을 지어줘야하는데요. 저는 내 스킨 이라고 지을게요. 이름을 적었다면 확인 클릭합니다.

loading

등록은 했지만 아직 스킨이 적용이 되지 않은 상태인데요. 스킨을 적용하기 위해 우리 스킨을 찾아보겠습니다. 오른쪽에 스킨 보관함을 클릭합니다.

loading

그러면 우리가 등록했던 스킨이 나타나는데요. 이 스킨 보관함은 커스텀 스킨들이 저장되는 곳이라 보시면 되요.

warn
      여기서 잠시 주의하실 점은 스킨을 변경하게 되면 설정했던 것들이 초기화될 수 있어요. 그래서 지금 사용하고 있는 블로그의 스킨을 변경하기 보다는 새로운 블로그를 만들고 거기서 스킨을 다 만든 뒤에 원래 블로그에 적용하는 것이 좋습니다.

저는 새로운 블로그를 만들었기 때문에 계속 진행해보도록 하겠습니다. 스킨에 마우스를 가져다 대면 적용 버튼이 나타나는데 이걸 클릭해주시면 됩니다!

loading

네 그러면 이렇게 스킨이 적용되었는데요. 지금은 이미지도 없고 설명도 없지만, 나중에 설정해서 넣을 예정이니까요. 걱정하지마세요.

이제 스킨 편집을 해보겠습니다. 사용중인 스킨에 있는 편집 버튼을 클릭하거나 왼쪽 하단에 있는 꾸미기에 스킨편집을 클릭해주세요.

loading

그러면 이렇게 스킨 편집 화면이 나타나는데요.

loading

왼쪽은 만든 스킨에 대해서 미리 볼 수 있는 화면 입니다. 왼쪽 위에 홈을 클릭해보면 글이나 카테고리, 방명록에 들어갈 때 나타나는 화면도 미리 볼 수 있습니다.

loading

그리고 중앙에 있는 모니터 같은 것은 데스크톱으로 볼때의 화면을 볼 수 있구요. 그 외에 태블릿이나 모바일에서의 화면도 미리 볼 수 있습니다.

loading

오른쪽에는 스킨에 관련된 설정들을 할 수 있구요. 원래 여기에 설명이 들어가야하는데, 지금 index.xml 파일의 내용이 비어있기 때문에 아무것도 나타나지 않습니다. 이것도 나중에 설정해볼거니까요. 일단 html 편집 버튼을 눌러서 코드를 수정해보겠습니다.

loading

네 그러면 이렇게 HTML, CSS, 파일업로드라는 탭이 나타나죠? 여기서 HTML과 CSS 코드를 수정할 수 있고, 필요한 javascript나 이미지 같은 것들도 업로드할 수 있습니다. 그 파일들은 다 images 폴더에 들어간다고 했죠? 이것들은 나중에 해보기로 하고, 다시 HTML로 돌아와보겠습니다.

loading

일단 HTML 기본 구조를 넣어보겠습니다.

loading

(이 코드를 따라 적는게 귀찮으시다면 제가 블로그에도 같은 내용으로 포스팅 해두었으니 그 내용으로 가셔서 복사 붙여넣기 하시면 됩니다. 블로그 주소는 하단에 있는 고정 댓글에 넣어놨습니다.)

이 코드를 따라 적는게 귀찮으시다면 여기에 있는 코드를 복사붙여넣기 하시면 됩니다.

html
      <!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>안녕하세요</h1>
  </body>
</html>

코드를 넣었다면 적용 버튼과 새로고침 버튼이 활성화가 되는데요. 새로고침은 말그대로 왼쪽 화면을 새로고침해주고 적용은 이 코드를 저장해줍니다. 그래서 적용을 하고 새로고침을 하면 왼쪽 화면에 코드가 반영되어서 나타날거에요.

지금 적용 버튼을 눌러보면 이렇게 오류 메시지가 나타나는데, CSS에 아직 아무것도 입력하지 않아서 나타나는 오류입니다.

loading

간단하게 CSS 탭에서 body 에 대한 내용을 적어볼게요.

loading
html
      body {
  
}

다시 적용을 클릭하고 새로고침을 클릭하면 이렇게 로딩이 없어지고 안녕하세요라는 글자가 나타나죠?

loading

이런 식으로 HTML코드와 CSS 코드를 적어주시면 됩니다. 매번 적용과 새로고침을 누르기 귀찮으신 분들은 단축키를 사용하시면 됩니다. 여기 물음표 버튼을 클릭해보세요.

loading

그러면 이렇게 저장과 미리보기 새로고침이 나오는데요. 저장이 곧 적용이라고 보시면 됩니다.

loading

그 외에도 몇 가지 있으니 참고하셔서 사용하시면 될거 같아요.

네 이렇게해서 이번 시간에는 파일을 등록하고 편집하는 방법에 대해서 알아보았습니다.

감사합니다.