![[티스토리 스터디3] 공통 치환자: 홈커버1](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbdCeUp%2FbtrnvOpCSYk%2FS8pMxkel8KTrEZbCou7kw1%2Fimg.png)
숙제: 티스토리 스킨 가이드의 <공통 치환자-홈커버>까지 공부해오기(근데 도리가 공부를 열심히해서 스킨옵션까지 했다고 함 ^.^b)
지난 시간처럼 실제 스킨에 홈커버 치환자가 어떻게 사용되었는지 보면서 공부를 해보도록 하자. 내가 참고한 스킨은 티스토리에서 기본제공되는 Book Club이라는 스킨이다.
홈커버 치환자에 대해서 살펴보기 전에, 홈커버가 무엇인고...🧙 이야기를 하자면, 누군가의 티스토리에 들어갔을 때, 메인으로 보여지는 화면이 '홈커버'라고 이해하면 된다.
스킨 편집 화면에서는 아래의 이미지에서 이 홈커버 부분을 수정할 수 있는데, 이때 홈커버를 구성하는 커버 아이템들을 '개별 커버'라고 부른다.(나도 몰랐다 .치환자 공부하면서 그랬구나~ 하고 있는 것이다.)
여하간, 이를 알아두고 홈커버 치환자를 공부하면 이해하기 편하다. 도리와 입을 모아 이야기 하는 것이지만, 티스토리 스킨 가이드가 너무 불친절하기 때문에 거의 스무고개 하다시피 공부하고 있다 #아무도_답은_알려주지_않아
일단 아래의 치환자를 보자.
- <s_cover_group> : 커버 그룹 치환자
- <s_cover_rep>: 개별 커버 표시
여기서 나는 '개별 커버 표시'라는 말의 의미가 이해되지 않았는데, 도리가 치환자이름에 적힌 'rep'가 representation의 약자인 것 같다고 자신의 추리를 공유해주어서 그렇게 이해하기로 했다...!
💁 {아~ 이 아래부터 개별 홈커버들에 대한 내용을 '표시'하려는 것이구나~)
따라서, 홈커버에 대한 내용은 반드시 이 두가지 치환자 안에 표시되는 형식인 것이다. 새삼스럽지만 치환자의 앞에 's_'는 무슨 의미인지도 약간 궁금...
<s_cover_group>
<s_cover_rep>
다양하고 멋진 개별 홈커버들이 여기 들어올 예정
</s_cover_rep>
</s_cover_group>이렇게 <s_cover_group>, <s_cover_rep>치환자 안에서 각 개별 커버들은 <s_cover>라는 덩어리로 들어간다. 여기서 기억해둬야 할 점이 하나 있는데, 이 치환자는 name 속성으로 커버에 이름을 정의하지 않으면 사용할 수 없다는 것.
그러니까, 개별 커버를 사용한다면 반드시 name 속성을 사용해서 이름을 붙여주어야 한다.
<s_cover_group>
<s_cover_rep>
<s_cover name='cover-thumbnail-1'>
</s_cover>
<s_cover name='cover-thumbnail-2'>
</s_cover>
<s_cover name='cover-thumbnail-3'>
</s_cover>
<s_cover name='cover-thumbnail-4'>
</s_cover>
</s_cover_rep>
</s_cover_group>흠, 이제 개별 커버 안에 우리가 만들고자 하는 커버의 구조를 생각하면서 구조를 만들어야 한다. 일단 우리는 Book Club이라는 기존의 스킨을 뜯어보고 있는거니까~ㅎㅎ 'cover-thumbnail-1'가 구현되면 어떤 모습인지를 확인해보는 것으로 대체하자!
👆요녀석이 우리가 보고있던 'cover-thumbnail-1'이다! 저 이미지를 토대로 완성된 소스를 하나씩 살펴보겠다. 마치 우리가 실제로 작업하는 것처럼~!! 고론 느낌으로~!!
먼저, 개별커버가 구현될 수 있도록 <s_cover>치환자 다음에 <div>태그를 사용해 공간을 먼저 확보했다. 개별 커버를 하나의 블록으로 본다면, 어쨌든 그 친구도 구역을 가지고 있어야 하기 때문이겠지?
<div>태그에는 class속성으로 <s_cover>치환자와 동일한 이름을 부여해준다. CSS 먹여야 하니까.
<s_cover name='cover-thumbnail-1'>
<div class="cover-thumbnail-1">
</div>
</s_cover>더불어, 궁금한 점!! 왜 <s_cover>치환자에는 따옴표로 속성값을 표시하고, <div>태그에는 큰따옴표로 속성값을 표기하는가! 이건 단순히 치환자와 태그의 차이인걸까??
개별 커버의 공간을 확보했다면, 그다음 할 일은 <사진자료1> 처음에 보이는 NEW타이틀을 구현하는 것이겠다. 이 부분은 스킨 사용자가 타이틀을 자기 멋대로 이름 붙일 수 있기 때문에 값 치환자로 들어가야한다. 이때 사용하는 값 치환자가 바로
값 치환자는 독립적으로 사용되지 않고, <h2>태그 안에 사용되었다. 티스토리 타이틀이 <h1>이고, 그 다음에 중요한 정보가 메인에 보여지는 개별 커버의 타이틀일테니 <h2>를 사용하는 것이 적절할 것이다.
<s_cover name='cover-thumbnail-1'>
<div class="cover-thumbnail-1">
<h2></h2>
</div>
</s_cover>
그리고 타이틀 다음에는 포스팅들이 리스트 형태로 나열되기 때문에 순서가 없는 목록 태그 <ul>을 사용하고, 그 안에 <li>태그가 들어간다.
<s_cover name='cover-thumbnail-1'>
<div class="cover-thumbnail-1">
<h2></h2>
<ul>
<li>
</li>
</ul>
</div>
</s_cover>
여기서, 각 리스트 아이템에 해당하는 <li>태그에는 <s_cover_item>치환자를 사용해 콘텐츠 각각에 대해 구분될 수 있도록 표시해야 한다. 요렇게 해둬야, 아~ 여기가 포스팅 하나가 들어가는 자리구나~ 하는 것이다.
<s_cover name='cover-thumbnail-1'>
<div class="cover-thumbnail-1">
<h2></h2>
<ul>
<s_cover_item>
<li>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>
그렇다면 자연스럽게, 아 리스트를 눌렀을 때 해당 포스팅으로 이동해야 하니까 <a>태그도 들어가야겠군! 하고 생각할 수 있겠다. 여기서, <a>태그에는 해당 포스팅으로 이동할 수 있도록 href속성에 들어갈 url이 필요하고, 여기에 값치환자 을 사용한다.
<s_cover name='cover-thumbnail-1'>
<div class="cover-thumbnail-1">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover><사진자료1>을 다시 한 번 확인해보자. 하나의 목록에 어떤 요소들이 들어가있는가? 이미지, 타이틀, 타임스탬프가 들어가있다. 그럼 순서대로 구현해보도록 하자.
이미지를 넣을 땐, <figure>태그를 활용한다. 또, 이미지는 <img>태그 단독으로 쓰일 수 없고, <s_cover_item_thumbnail>치환자와 같이 활용되어야 한다. 결국 썸네일 이미지를 사용할 땐 <figure>태그, <s_cover_item_thumbnail>치환자, <img>태그 셋이 짝꿍처럼 쓰여야 한다는 말~
<s_cover name='cover-thumbnail-1'>
<div class="cover-thumbnail-1">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<figure>
<s_cover_item_thumbnail>
<img src="//i1.daumcdn.net/thumb/C230x300/?fname=" alt="">
<s_cover_item_thumbnail>
</figure>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>이미지 경로는, "//i1.daumcdn.net/thumb/C230x300/?fname="를 사용한다.
이어서, 콘텐츠의 타이틀과 타임스탬프가 들어가야한다. 우리가 개별 커버를 구성하기 전에 <div>태그로 공간을 먼저 마련했던 것처럼, 이미지가 들어가기 전에 <figure>태그로 공간을 마련한 것처럼, 타이틀과 타임스탬프도 각각 자리를 먼저 마련해주어야 한다.
<s_cover name='cover-thumbnail-1'>
<div class="cover-thumbnail-1">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<figure>
<s_cover_item_thumbnail>
<img src="//i1.daumcdn.net/thumb/C230x300/?fname=" alt="">
<s_cover_item_thumbnail>
</figure>
<span>타이틀</span>
<span>타임스탬프</span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover><span>태그를 활용해서 콘텐츠의 타이틀과 타임스탬프(텍스트 정보들)이 들어갈 자리를 마련해주었다. 하지만 이 친구들도 이대로 쓰일 수는 없고, 각각 치환자가 활용 되어야 한다.
먼저, 콘텐츠 타이틀이 들어가는 자리에는 치환자가 활용된다. 그리고 타임스탬프에는 혹은 를 사용한다. 이 둘의 차이는 시간까지 상세하게 표시하느냐 마느냐의 차이. 가 시간까지 표시하는 치환자다.
그렇다면 <사진자료1>을 보면, 여기서는 무슨 치환자를 써야한다??
그러취, 심플 데이트를 사용하쟝~( ͡° ͜ʖ ͡°)ㅎ
<s_cover name='cover-thumbnail-1'>
<div class="cover-thumbnail-1">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<figure>
<s_cover_item_thumbnail>
<img src="//i1.daumcdn.net/thumb/C230x300/?fname=" alt="">
<s_cover_item_thumbnail>
</figure>
<span class="title">[##_cover_item_title##]</span>
<span class="date"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>소스를 확인해보면 알겠지만, 타이틀과 타임스탬프를 감싼 <span>태그에 클래스를 정의해두었다. 이것은 각각의 요소에 CSS를 먹이기 위함이다.
우리가 콘텐츠의 이미지를 사용할 때 <s_cover_item_thumbnail>치환자, <figure>태그, <img>태그를 짝꿍으로 써야했던 것 처럼, 콘텐츠의 글 부분을 표시할 땐 <s_cover_item_article_info>치환자가 반드시 함께 쓰여야 한다.
<s_cover name='cover-thumbnail-1'>
<div class="cover-thumbnail-1">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<figure>
<s_cover_item_thumbnail>
<img src="//i1.daumcdn.net/thumb/C230x300/?fname=" alt="">
<s_cover_item_thumbnail>
</figure>
<s_cover_item_article_info>
<span class="title">[##_cover_item_title##]</span>
<span class="date"></span>
</s_cover_item_article_info>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>
그리고 파이널 터치로, 개별 커버의 타이틀 끄트머리에 더보기 버튼을 <s_cover_url>치환자와 을 사용해서 만들어주면 'cover-thumbnail-1' 개별 커버 구현 끝!!
<s_cover name='cover-thumbnail-1'>
<div class="cover-thumbnail-1">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<figure>
<s_cover_item_thumbnail>
<img src="//i1.daumcdn.net/thumb/C230x300/?fname=" alt="">
<s_cover_item_thumbnail>
</figure>
<s_cover_item_article_info>
<span class="title">[##_cover_item_title##]</span>
<span class="date"></span>
</s_cover_item_article_info>
</a>
</li>
</s_cover_item>
</ul>
<s_cover_url>
<a href="" class="more">more</a>
</s_cover_url>
</div>
</s_cover>
이제 이런 식으로 스타일을 몇개씩이나 만들어서 홈커버 아이템들을 여러개 구현하는 방식인 것이다...(아득)
<s_cover_group>
<s_cover_rep>
<s_cover name='cover-thumbnail-1'>
<div class="cover-thumbnail-1">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<figure>
<s_cover_item_thumbnail>
<img src="//i1.daumcdn.net/thumb/C230x300/?fname=" alt="">
</s_cover_item_thumbnail>
</figure>
<s_cover_item_article_info>
<span class="title"></span>
<span class="date"></span>
</s_cover_item_article_info>
</a>
</li>
</s_cover_item>
</ul>
<s_cover_url>
<a href="" class="more">more</a>
</s_cover_url>
</div>
</s_cover>
<s_cover name='cover-thumbnail-2'>
</s_cover>
<s_cover name='cover-thumbnail-3'>
</s_cover>
<s_cover name='cover-thumbnail-4'>
</s_cover>
</s_cover_rep>
</s_cover_group>그치만 하나의 스타일을 파봄으로써 아~ 이렇게 쓰는 거구나 하는 감을 잡을 수 있었을 것이다.(나도 그랬다) 그치만, 여전히 궁금한 것들은 많고, 가이드는 친절하지 않으며, 답을 찾으려면 예시 코드와 실제 구현된 스킨들을 해부...해체...해보는 수밖에 없는 것 같다.
예를 들어 티스토리 스킨 가이드에서는 '콘텐츠가 글이 아닌 경우에만 치환(내부 치환자는 s_cover_item에 직접 사용가능)'이라는 문구가 있는데 정확이 이게 무슨 뜻인지 알쏭달쏭한데다가,
우리가 방금 해제해본 스킨의 다른 개별 커버 아이템 중에는 <s_cover_item_article_info>치환자 안에 콘텐츠 요약 내용이 들어가 있는 아이템도 있고, 나와있는 아이템도 있고... 무슨 기준으로 이렇게 왔다갔다 하시는 건지 모를 일이다.
또, 티스토리 스킨 가이드의 치환자 사용 예에는 하나의 개별 커버 아이템 안에 <s_cover_item_article_info>치환자와 <s_cover_item_not_article_info>가 같이 쓰이는데, 이게 어떻게 가능한지도 잘 상상이 되지 않는다.
내가 무심코 '콘텐츠가 글이 아닌 경우'를 '페이지'혹은 '공지사항'과 같은 관리자 페이지에서 '글'로 구분되어 있지 않은 콘텐츠 페이지라고 이해하고 있기 때문일지도??
여하튼 또 포스팅을 마무리 하면서 나의 풀지못한 궁금증을 잔뜩 늘어놓았다. 언젠가 답을 찾으면 돌아와서 그 해답을 적어놓을지도 모를 일이니까~( ͡° ͜ʖ ͡°)ㅎ
'직접해보자 스킨 만들기' 카테고리의 다른 글
| [티스토리 스터디2] 공통치환자: 공통 (0) | 2021.12.07 |
|---|---|
| [티스토리 스터디1] 파일구조, 스킨정보파일 (0) | 2021.11.30 |