이번 포스팅은 실제 내 계정의 티스토리 글 제목과 글 내용을 배치하는 것을 살펴보도록 하자. 글 제목과 내용 자체를 불러오는 것은 티스토리에서 치환자로써 제공한다. 다만, 확인하기 위해서는 실제로 티스토리 블로그에 우리가 만든 스킨데이터를 입혀야하는데... 일단 포스팅을 통해 알아보도록 하자.
티스토리 글 제목, 글 내용 배치시키기.
먼저, 우리가 티스토리에 글을 쓴다고 가정해보자. 카테고리를 선택하고, 글 제목을 입력하고, 본문과 태그까지 작성하는 일련의 과정을 떠올려보자. 우리가 HTML과 CSS로 만든 스킨 데이터는, 방금 전에 떠올렸던 모든 과정들을 포함할 수 있어야한다. 대체 어떻게 포함하는 것일까? HTML 코드 상에서 티스토리 글 제목과 글 본문을 대체 어떤 방식으로 불러오는걸까? 정답은 티스토리 스킨가이드에 있다.
http://www.tistory.com/guide/skin/step0
위 사이트에 접속해보면, 스킨을 만들기 위한 기본적인 가이드는 모두 들어있다.
위 사진에서 보다시피, 총 6단계로 스킨 가이드를 제공하고 있다. 필자는 파워포인트를 이용하여 3번 항목까지는 얼추 완료한 셈. 이제 4번 항목을 볼 차례다.
치환자란 무엇인가?
치환자는 말이 굉장히 어렵지만, 쉽게 얘기하자면 우리가 만든 HTML에, 티스토리 글제목이나 본문, 태그 등을 가져다 쓸 수 있도록 하는 일종의 코드이다. 즉, 예를 들어 "글 제목" 이라는 치환자 코드를 그대로 복사해서, HTML코드의 <body> 상에 넣으면, 바로 글 제목이 페이지 상에 출력된다. (실제로는 약간 부가적인 코드가 필요하지만, 거의 이정도 수준이라고 볼 수 있을만큼 쉽다)
어떤 면에서는 부트스트랩에서 제공하는 기능과 유사하다. 그냥 카피해서, 원하는 곳에 붙여넣기하면 되는 것이다.
치환자는 위와 같다. 즉, 우리가 복붙만으로 가져다 쓸 수 있는 티스토리의 항목들이다. 보다시피 블로그 제목부터 시작해서, 방문자수나 공지사항, 최근에 올라온 글까지 충분한 치환자를 제공해주고 있다. 아직 개념이 와닿지 않으니, 2-9항목의 1번, 글 관련 정보를 클릭해보자.
사용치환자와 사용 예시로 구분되어 있다. 치환자는 보다시피 글의 주소, 제목, 그리고 다양한 이벤트들까지 제공하고 있다. 우리는 대괄호를 포함하여 묶여있는 부분을 복사하고, HTML 태그 상에 붙여넣기만 해주면 되는 것이다. 사용예시에서 보다시피, 그저 대괄호로 구성된 치환자들을 코드 상에 넣어주기만 하면 된다.
치환자 적용하기
이정도면 어느정도 치환자에 대한 개념은 잡혔으리라 생각하고, 바로 우리 코드에 적용시켜보기로 하자. 시작하기에 앞서, 필자가 구상했던 레이아웃을 다시 꺼내본다.
크게 2가지 부분으로 나눠서 생각해보기로 한다. 첫번째는 글 제목과, 작성자와, 작성시간에 대한 부분이다.
글 속성 표현하기
글 제목에 해당하는 치환자는 #6. 티스토리 스킨만들기::: 글제목, 글내용을 배치해보자. 가 되겠다. 작성자에 대한 것은 Doony. 작성시간, 즉 글쓴날짜에 해당하는 치환자는 2018. 3. 29. 20:51 가 되겠다. 이제 이 치환자들을 가지고 웹페이지의 중앙에 나열해보기로 한다.
먼저 구상한 레이아웃에 따르면, 글 제목은 사이즈가 대체로 크다. 직접 폰트 크기로 입력해줘도 되지만, HTML에서 사용할 수 있는 일종의 소스코드인 <h1>, <h2>, <h3> 등으로 일단 구성해보자.
<h1> </h1> : 큰 제목
<h2> </h2> : 중간 제목
<h3> </h3> : 작은 제목
필자가 알기론 h6까진가 있다고 한다. 아무튼 제목 속성을 가지는 코드라고 보면 되는데, 글자의 크기를 조절할 수 있기 때문에 원하는 폰트 사이즈에 맞춰서 지정해주면 된다. 글 제목의 경우, 페이지 상에서 가장 크게 눈에 띄어야 할 부분이므로, <h1>으로 묶어주자.
작성 시간의 경우 글 제목보단 작게, 글쓴이도 작게 설정해야하므로, <h2> ~ <h6> 중 적당히 골라서 써보도록 하자. 처음엔 글씨가 얼마나 큰지 작은지 감이 안오니 일단 대충 넣어보면서 맞춰가는 과정이 필요하다.
이제 작성해야하는 코드를 작성하기 전에, 가이드에 적힌 내용을 다시한번 보도록 하자.
"글" 에 대한 속성을 가진 치환자를 다룰 때는, 위 예시처럼 사용하면 된다고 하니 나도 동일하게 코드를 출력해보았다.
지난 포스팅에 다룬 내용으로, 상단바같은 경우 <nav class~로 정의되어 있다. 그 아래 <s_article_rep> 으로 시작되는 부분이 바로 "글" 항목들에 대한 부분이다. 보다시피, 위에서부터 차례대로 글 제목, 글쓴 시간, 그리고 글쓴이를 각각의 크기에 맞게 출력하도록 하였고, <center> 태그를 둘러줌으로써 모든 내용이 가운데 정렬되도록 하였다. 일단 중요한 것은, <s_article_rep> 사이에 치환자가 들어가야한다는 것 같다. (확실하진 않으나, 가이드만 보면 그런 것 같다.)
위 코드를 출력한 내용을 보자.
보다시피 내가 배치한대로 내용물이 출력된 것을 볼 수 있다. 단, 아직 티스토리 스킨을 업로드한 것이 아니기 때문에, 치환자를 읽어오지 못하고 그냥 텍스트로 출력해버렸다. 이부분은 나중에 티스토리 스킨으로 업로드하면, 데이터를 받아오기 때문에 일단은 넘어가도록 하자.
여기서 체크해야할 부분은, 가운데 정렬이 되었는지, 크기가 알맞게 선정되었는지 등을 보는 것이다. 내가 보기에는 글쓴이 항목의 크기가 너무 크다. 블로그 제목이 도드라져야하는데, 글쓴 시간과 글쓴이 때문에 약간 산만해보이는 느낌이다. 고로 나중에 글자 크기는 따로 조정해야할 것 같다. 항목 별로 다른 속성을 가져가기 위해서는, 사실 각각의 클래스를 두고 글씨 크기를 따로 명기해주는게 좋아보일 것 같지만, 그런 세부적인 디테일이야 나중에 얼마든지 수정할 수 있으므로 역시 일단 넘어가도록 하자.
티스토리 스킨 업로드 방법? (은 다음에..)
일단, 이렇게까지 했으면 잘 작동하는지 한번 확인해볼 필요가 있지 않겠는가? 티스토리 블로거라면, 블로그를 총 5개까지 만들 수 있다고 한다. 본인이 운영하는 블로그 외에, 스킨을 테스트해볼 임시 블로그를 하나 개설하고, 아무 내용이나 글을 작성해보자. 여기까지 완료가 되었다면, 이제 위에서 우리가 만든 스킨데이터를 업로드함으로써 정상적으로 치환자들이 작동하는지 볼 수 있을 것이다.
다만, 스킨을 업로드할 때도 단순히 HTML만 올리면 되는게 아니라, 티스토리 가이드에서 언급하고 있는 조건들에 맞게 데이터를 올려주어야하는데... 이는 다음 포스팅에서 살펴보도록 하겠다.
***필자가 개발 전문가가 아니다보니, 내용에 오류가 있다면 댓글로 알려주시면 감사하겠습니다.
[IT & IT/티스토리 스킨 제작] - #6. Bootstrap을 이용해서 티스토리 글제목, 글내용을 배치해보자.
[IT & IT/티스토리 스킨 제작] - #5. Bootstrap을 이용해서 블로그 상단바를 만들어보자.
[IT & IT/티스토리 스킨 제작] - #4. 티스토리 스킨 제작을 위한 HTML/CSS의 기본
[IT & IT/티스토리 스킨 제작] - #3. 웹 코딩을 위한 ATOM 에디터 및 패키지 설치
'Developer > 티스토리 스킨 제작' 카테고리의 다른 글
| #8. 티스토리 본문 글자 크기 / 글씨체 바꾸는 방법 (597) | 2018.04.01 |
|---|---|
| #7. 티스토리 스킨 업로드하는 방법 (598) | 2018.03.30 |
| #5. Bootstrap을 이용해서 블로그 상단바를 만들어보자. (591) | 2018.03.28 |
| #4. 티스토리 스킨 제작을 위한 HTML/CSS의 기본 (1091) | 2018.03.16 |
| #3. 웹 코딩을 위한 ATOM 에디터 및 패키지 설치 (574) | 2018.03.16 |
댓글