지난 포스팅에는 기본적인 치환자 사용 방법까지에 대해 설명했다. [대괄호로 묶인] 다양한 치환자들이 있다는 것을 설명하고, 일단은 글 제목과 글쓴 시간, 그리고 저자 정도까지만 HTML 태그로 구현해보았다. 이제 정말로 그런 치환자들이 잘 작동하는지 살펴볼 시간이다. 이론에 너무 얽매이고 눈에 보이지도 않는 코드와 싸우는 것보다는, 이왕이면 직접 눈으로 결과물을 봐가면서 하면 좋지 아니한가?
티스토리 스킨 업로드하는 방법
티스토리 유저라면 스킨을 변경하는 방법에 대해서는 잘 알것이다. 그냥 관리자 페이지 들어가서, 원하는 스킨으로 변경하면 자동으로 적용이 된다. 그러나, 필자는 직접 스킨을 만들었기 때문에 이를 업로드하는 과정이 필요하다. 업로드하기 위해서 준비해야할 파일은 최소 3개이다.
skin.html
style.css
index.xml
이중에서 지난 포스팅까지 html과 css는 어느정도 다뤄왔기 때문에 익숙할 수 있다. 그런데 xml은 대체 무엇이란 말인가?
index.xml ?
이럴 때 필요한건 티스토리 가이드이다. 아래에서 보다시피, 가이드 - 스킨가이드 - 마무리로 이동해보면, index파일에 대한 정보를 볼 수 있다.
http://www.tistory.com/guide/skin/step5
일단 ATOM 에디터에서 index.xml 파일을 하나 만들고, 위 코드를 복붙하여 넣어주도록 한다. 가이드에서 주황색으로 표시된 부분이, 우리가 스킨 등록할 때 표시되는 부분이라고 보면 된다. 무슨 말이냐면, 스킨을 등록하고 적용하려고 할 때 뜨는 메시지들이다.
나중에 스킨 만들고, 해당 스킨을 적용하려고 하면 뜨는 바로 이창! 이 창에 들어가는 정보들을 xml파일에 담는 것이다. 사실은 이거 외에, 한 페이지에 게시글은 몇개를 넣을지와 같은 기본적인 정보들도 들어가 있지만, 그런 부분들은 티스토리 관리자 페이지에서도 수정이 가능한 것 같다. 고로, 위에 보이는 내용들만 원하는대로 바꿔서 index.xml 파일은 마무리를 짓도록 하자.
이제 3가지 파일이 다 준비되었다면, 다음 순서대로 차근차근 진행하면 된다.
1. 관리자페이지로 가서 새로운 블로그를 만든다. (스킨을 테스트하기 위한 블로그. 본인 블로그에 바로 적용해버리면 엉망이 되어버리니, 일단 테스트만 하는 용도이다.)
2. 스킨변경 - 스킨등록 - 파일3개 적용 후 저장하기.
3. 그 외에는 일반 스킨 적용과 동일하다. 스킨 보관함에 가서 방금 만든 스킨을 적용하면 끝!
보다시피, 파일 3개를 업로드하라고 나와있고 실제로 그렇게 하지 않으면 오류창이 발생하게 된다.
HTML 파일 보기.
이제 필자의 스킨이 적용된 블로그를 살펴보기에 앞서, 약간 수정된 코드를 보도록 하자. 먼저 <head> 부분이다.
달라진 점은, style.css 파일을 호출하는 코드 한줄이 들어갔다는 점이다. 파란색으로 밑줄그은 부분인데, 사실 css의 스타일링 코드는 굳이 별도의 파일 없이, <head> 안에 코드를 넣어줄 수도 있다. <style> </style> 이라는 코드 사이에 각각의 클래스나 아이디로 설정해줄 수도 있는데, 너무 코드가 길어지고 복잡해지니 그냥 별도의 파일에 따로 저장하는 것이다. (필자가 이해한 바로는 그렇다만.. 아닐 수도 있다. 다만 관리의 측면에서 파일을 분리하는 게 더 효율적일 것이다.)
다음은 <body> 안에 코드를 보자.
지난 포스팅에서 작성한 부분과 다 똑같은데, 맨 아래부분에 <div class="article"> 을 넣고, 치환자 [article_rep_desc] 를 넣어주었다. 이 치환자는 글 본문을 불러오는 코드이다. 여기서 의문을 가질 수 있다.
<div class="entry"> 와 <div class="article>은 무엇이 다른가? 왜 <div>를 두번이나 쓴 것인가? 그 이유는 css 스타일에 있다. 즉, 글 제목과 글 본문은 다른 스타일을 적용하고 싶기 때문에, 클래스를 2개로 나눠놓은 것이다. 만약 entry 라는 클래스 하나에 제목과 본문에 해당하는 치환자를 다 넣어버리면, css에서 스타일을 줄 때 제목과 본문을 똑같이 주게 된다. 제목은 크게, 본문은 작게, 그리고 둘의 색상도 다르게 설정하고 싶기 때문에 클래스를 나눠놓은 것이다.
클래스라는 개념에 대해서도 딱히 어렵게 생각할 필요가 없다. 그냥 영역이 다르다고 보면 된다. 집 주소가 다르다고 보면 된다. 각각의 집에 내가 원하는대로 스타일링을 다르게 하고 싶기 때문에 집을 나눠놓은 것뿐이다.
CSS 스타일 보기
자, 이제 마지막으로 style.css 파일을 보도록 하자.
보다시피, 아까 skin.html 파일에 작성되어있던 entry와 article 클래스에 대한 정의가 되어있다. 클래스에 대한 것은 앞에 . 을 붙여서 표현하면 된다. entry부분은 배경색상만 지정을 해줬고, article은 폰트 사이즈를 지정해두었다. 즉, 본문의 글자 크기는 10px이 될 것이다.
마지막의 #tistorytoolbarid 의 경우, 설명이 좀 필요한 부분인데 이건 포스팅 마지막에 언급해놓도록 하겠다.
그리고 스킨을 업로드하기 전, 미리 블로그에 글 몇개를 써두었다. 그래야 결과물이 나오기 때문에... 아무튼, 스킨을 적용해보면 다음과 같다.
필자의 스킨데이터용 블로그로 접속했을 때 나타나는 화면이다. 아까 로컬에서 실험했을 때와 달라진 점이 보이는가? 그렇다. 보다시피 글 제목과 글쓴 시간, 저자, 그리고 본문이 출력되고 있는 모습이다. (로컬에서는 치환자가 텍스트화되어 나타났었다.)
좀 더 디테일하게 보자면, 공감 버튼도 있고 카테고리의 다른글 버튼까지 생겨났다. 이게 대체 뭘까? 분명히 필자의 코드에는 공감하기 버튼이나, 카테고리의 다른글을 의미하는 치환자나 코드가 없었는데, 대체 왜 생겨난것일까?
그 이유는, 티스토리 스킨이기 때문이다. 우리가 업로드하는 과정에서 티스토리가 자체적으로 일부 코드를 입히는 것이다. 참고로, 스킨 편집에서 html/css 편집을 해보면, 필자가 방금 올린 코드와 동일하다. 즉, 업로드된 코드 상으로는 입력한 결과만 나타내주지만, 실제 블로그 웹페이지 상에서는 티스토리가 자체적으로 수정하는 코드들까지 같이 표현이 되는 것이다.
다음은, 실제 블로그 페이지에서 Ctrl+Shift+I를 눌러서 HTML 코드를 본 결과물이다.
우측에 파란밑줄 친 부분을 보면, 내가 써놓지 않은 클래스가 정의되어 있는 모습을 볼 수 있다. 즉, 이건 티스토리에서 자체적으로 코드에 반영시키는 디폴트 코드인 셈이다. 그럼 만약에 내가 공감버튼이나, 카테고리의 다른글 버튼을 수정하고 싶으면 어떻게 해야할까?
정답은, 해당 클래스에 대한 내용, 해당 클래스에 입히는 css 스타일을 우리가 만든 코드 상에도 선언해주는 것이다. 즉, 디폴트로 적용되는 코드가 있으면, 그 코드에 대한 스타일까지 다 지정을 해줘야하는 것이다.
방금 style.css 파일의 마지막 줄에 써놓은 것이 무엇이었는지 다시 한번 상기시켜보자.
#tistorytoolbarid {display: none;}
티스토리 툴바인데, 이것도 디폴트로 html 코드 상에 포함되어 있다. 따라서 나는 css에 해당 클래스에 대한 속성을 none으로 지정해준 것이다. 이렇게 되면, display를 하지 말라는 코드가 되기 때문에, 티스토리에서 기본코드로 반영시키려고 하더라도, 실제 웹페이지상에서 보이지는 않게 된다.
이런식으로 디폴트 코드들은 확인해서 일일이 편집작업을 해줘야한다. 이번 포스팅에서는 만든 스킨을 티스토리에 적용하는 실습까지 해보았다. 그러나 역시 결과물을 보니 문제점들이 많이 보인다. 일단 색상이 너무 촌스럽고, 본문 글씨는 너무 작다. 폰트도 바꿔주고 싶다. 세부 속성은 어떻게 하는걸까? 전체적인 윤곽을 잡기에도 아직 먼 길이지만, 일단은 어느정도 필자가 파워포인트로 구상했던 티스토리 스킨과 얼추 비슷하게라도 만들어야할 것 같다. 그건 다음 포스팅에서..
[IT & IT/티스토리 스킨 제작] - #6. Bootstrap을 이용해서 티스토리 글제목, 글내용을 배치해보자.
[IT & IT/티스토리 스킨 제작] - #5. Bootstrap을 이용해서 블로그 상단바를 만들어보자.
[IT & IT/티스토리 스킨 제작] - #4. 티스토리 스킨 제작을 위한 HTML/CSS의 기본
[IT & IT/티스토리 스킨 제작] - #3. 웹 코딩을 위한 ATOM 에디터 및 패키지 설치
[IT & IT/티스토리 스킨 제작] - #2. 파워포인트로 티스토리 스킨을 만들어보자.
[IT & IT/티스토리 스킨 제작] - #1. 티스토리 스킨 제작기
'Developer > 티스토리 스킨 제작' 카테고리의 다른 글
| #9. 티스토리 본문 크기 제한 / 좌우 여백 주는 방법 (248) | 2018.04.05 |
|---|---|
| #8. 티스토리 본문 글자 크기 / 글씨체 바꾸는 방법 (597) | 2018.04.01 |
| #6. 티스토리 스킨만들기::: 글제목, 글내용을 배치해보자. (757) | 2018.03.29 |
| #5. Bootstrap을 이용해서 블로그 상단바를 만들어보자. (591) | 2018.03.28 |
| #4. 티스토리 스킨 제작을 위한 HTML/CSS의 기본 (1091) | 2018.03.16 |
댓글