치환자에 대하여 잘 이해하기 위해서는 바로 치환 해 보면 알겠지요? 우선 이전 2번째 글에서 이제 더미 스킨 블로그를 만들었습니다. 이제 굳이 코드 프로그램 없이 순수하게 티스토리 설정에서 스킨변경에 있는 HTML 수정 기능으로만으로 페이지를 다듬어 갈 수 있습니다. 일단 무턱대고 해봅시다.
블로그 설정에서 스킨변경>HTML 수정을 눌러서
header 라고 적혀 있는 부분을 Extremely Subjective Person Blog 라고 바꾼후
왼쪽 미리 보기 화면의 [새로고침]을 눌러봅시다.
그러면 미리보기의 상단의 글이 자신의 블로그 이름으로 나오게 됩니다.
바로 이해 되시죠?
치환자는 크게 두가지입니다.
단순히 1:1로 값만을 의미하는 치환자,
<s_t3></s_t3> 이런것과 같은 HTML 태그를 닮은 고유의 티스토리 치환자, 2가지입니다.
값은 위에 해보셨으니 아실태고, 아래의 태그 형태의 치환자는
그룹치환자라고 해서 단순히 값만으로는 표시할수 없고 복잡한 내용이 포함되는 치환자입니다.
여러 값 치환자가 포함된 긴 내용의 태그들의 집합을 간단히 그룹치환자로 묶어서 처리한다고 보시면됩니다.
물론 내용은 없고 단순히 자동화를 위해서 구분을 만들기 위해 쓰는경우도 있습니다. 이해 안되시더라도
이건 일단 넘어가시면 나중에 이해 됩니다.
https://tistory.github.io/document-tistory-skin/common/global.html
그러면 이제 공통 치환자를 적용 해 봅시다.
우선 공통 치환자 페이지에 안내되어있는 치환자들을 하나씩 살펴 봅시다.
<s_t3>: 티스토리 공통 javascript 삽입 (필수)
<s_t3></s_t3> 치환자는 티스토리페이지에 필요한 스크립들이 포함되어있기때문에 꼭 본문 body 안에 포함하셔야합니다.
Extremely Subjective Person Blog: 블로그 제목https://t1.daumcdn.net/tistory_admin/static/manage/images/r3/default_L.png: 블로그 대표 이미지 url
극히 주관적인 블로거: 블로그 설명ESPB: 블로그 소유자의 필명
https://espb.tistory.com/: 블로그 urlhttps://espb.tistory.com/rss: rss feed 주소https://espb.tistory.com/tag: 태그로그 urlhttps://espb.tistory.com/guestbook: 방명록 url
티스토리 스킨 만들기 #3 공통 치환자: 페이지 제목tt-body-page: 페이지 타입에 따른 id
공통 치환자는 이정도 안내 되어 있습니다. 하나빼고 전부 단순히 문자를 대변하는 값 치환자이기에 어렵지 않습니다.
원하는것을 원하는 위치에 넣으시면 됩니다. 다만 하나 다른것은.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class="wrapHeader"> <ul> <a href="/"> </a> <li class="t_menu_home first"> <a href="/"></a> <a href="/">홈</a> </li> <li class="t_menu_tag"> <a href="/tag">태그</a> </li> <li class="t_menu_guestbook last"> <a href="/guestbook">방명록</a> </li> </ul> </div> | cs |
2번째 줄부터입니다.
구조를 까보니 이런녀석이 튀어나옵니다. 이유를 알수 없는 태그들이 몇보이는데, 가볍게 무시하고, 우리가 얘네를 스타일링을 하려면 css로 접근할수 있어야하는데, 티스토리 얘네들이 생각이 없어서 ul 태그에 클래스를 안달아놧습니다. 그래서 우리는 얘의 부모를 통해 스타일링을 해야합니다, <ul> 태그는 기본적으로 내부 자식들이 세로 정렬 되기 때문에 가로 정렬하기 위해서. css를 좀 편집 해 줍니다.
1 2 3 4 5 | .wrapHeader ul, .wrapHeader li { display: inline; margin: 0px; padding: 0px; } | cs |
우선 이렇게 해주면 ul과 li 태그들은 줄바꿈이 되지 않고 가로로 나열 됩니다.
다른것은 딱히 설명할께 없지만 그나마 한다면 tt-body-page 요녀석입니다.
이녀석은, 지금 열리는 페이지 성향에 따른 id값을 수정해줍니다.
| 페이지 타입 | body_id |
|---|---|
| 홈화면 | tt-body-index |
| 글화면 | tt-body-page |
| 카테고리 글 리스트 | tt-body-category |
| 보관함 글 리스트 | tt-body-archive |
| 태그 리스트 | tt-body-tag |
| 검색결과 리스트 | tt-body-search |
| 방명록 | tt-body-guestbook |
| 미디어로그 | tt-body-media |
| 지역로그 | tt-body-location |
공식 문서에 이렇게 되어있죠. 이게 필요한 이유는, 각 문서 성향에 따라서 다른 스타일링을 적용할 수 있게끔 한겁니다. 홈화면에선 배경을 푸르게. 글화면에서는 배경을 어둡게, 이런식으로 할 수 있게 말이죠?
그래서 제가 공통 치환자 중에서 필요할것 같아서 추가한것들은 우선 이렇게
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | ... <title>티스토리 스킨 만들기 #3 공통 치환자</title> </head> <body id='tt-body-page'> <s_t3></s_t3> <div class="main"> <div class="header"> <div class="wrapHeader"> <a href="https://espb.tistory.com/"> <img class="imgBlog" height="24" src="https://t1.daumcdn.net/tistory_admin/static/manage/images/r3/default_L.png" /> Extremely Subjective Person Blog (ESPB) | </a> </div> </div> ... | cs |
우선 공통 치환자는 이렇게 마무리합니다.
참고로 스타일링(꾸미기)는 기본적인 치환자들을 다 배치 한 후, 합니다.
중간중간 css 수정하는것들은 배치적인 부분만 조금씩 수정하면서 합니다.
'프로그래밍 > 티스토리 스킨 제작' 카테고리의 다른 글
| 티스토리 스킨 만들기 #4 글 치환자 (1) | 2019.01.25 |
|---|---|
| 티스토리 스킨 만들기 #2 스킨 구조 (1) | 2019.01.24 |
| 티스토리 스킨 만들기 #1 레이아웃 (3) | 2019.01.24 |