Visitor
Total:
Today:
Today:
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
Previous
Next
공지사항
페이지
블로그
티스토리 스킨 제작기-3-스킨 구조 분석(skin.html 전체 구조-상세)
by 하늘에 그린 그림자 2022. 2. 12.728x90
티스토리 스킨 제작기-3-스킨 구조 분석(skin.html 전체 구조-상세)
티스토리 스킨 가이드는 https://tistory.github.io/document-tistory-skin/ 여기에서 확인하시면 됩니다.
저는 개인적으로 가이드가 너무 형식 적으로 되어있고 사용자 편의적이지 않은 듯 하여 따로 정리를 해봤습니다.
여기에 시간을 오래 투자 하고 싶지도 않고 해서....
혹시 저 처럼 처음 티스토리 스킨을 만들어 보실분이 있다면 도움이 되시길 바랍니다.
아래 내용을 그대로 skin.html에 넣으셔도 일단 작동은 하겠지만, 디테일한 디자인 및 css는 추가로 잡아 주셔야겠죠...^^
1. 티스토리 전체 구조(상세 버전)
<html>
<head></head>
<body>
<div class="post-container">
<div class="post-head">
<s_list> <!-- (01)-[Page: LIST Header ] -->
<span></span><em>()</em>
<s_list_empty>
</s_list_empty>
</s_list>
</div>
<div class="post-body">
<s_notice_rep> <!-- (02)-[공지사항: LIST-Loop] -->
<s_notice_rep_thumbnail>
</s_notice_rep_thumbnail>
</s_notice_rep>
<s_page_rep> <!-- (03)-[페이지: LIST-Loop] -->
티스토리 스킨 제작기-3-스킨 구조 분석(skin.html 전체 구조-상세)
하늘에 그린 그림자
2022. 2. 12.
728x90
티스토리 스킨 제작기-3-스킨 구조 분석(skin.html 전체 구조-상세)
티스토리 스킨 가이드는 https://tistory.github.io/document-tistory-skin/ 여기에서 확인하시면 됩니다.
저는 개인적으로 가이드가 너무 형식 적으로 되어있고 사용자 편의적이지 않은 듯 하여 따로 정리를 해봤습니다.
여기에 시간을 오래 투자 하고 싶지도 않고 해서....
혹시 저 처럼 처음 티스토리 스킨을 만들어 보실분이 있다면 도움이 되시길 바랍니다.
아래 내용을 그대로 skin.html에 넣으셔도 일단 작동은 하겠지만, 디테일한 디자인 및 css는 추가로 잡아 주셔야겠죠...^^
1. 티스토리 전체 구조(상세 버전)
<html>
<head></head>
<body>
<div class="post-container">
<div class="post-head">
<s_list> <!-- (01)-[Page: LIST Header ] -->
<span></span><em>()</em>
<s_list_empty>
</s_list_empty>
</s_list>
</div>
<div class="post-body">
<s_notice_rep> <!-- (02)-[공지사항: LIST-Loop] -->
<s_notice_rep_thumbnail>
</s_notice_rep_thumbnail>
</s_notice_rep>
<s_page_rep> <!-- (03)-[페이지: LIST-Loop] -->
</s_page_rep>
<s_article_protected> <!-- (04)-[보호글: ] -->
<s_index_article_rep> <!-- (04)-[보호글: LIST-Loop] -->
<div class="post-item protected">
<!-- 보호되어 있는 글 입니다. -->
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="post-entry-content">
<form class="protected_form" onsubmit="{reloadEntry(14);return false;}">
<h2>보호되어 있는 글입니다.</h2>
<p>내용을 보시려면 비밀번호를 입력하세요.</p>
<input type="password" id="entry14password" name="entry14password" value="" placeholder="비밀번호"></input>
<button type="submit" class="">확인</button>
</form>
</div>
</s_permalink_article_rep>
</s_article_protected>
<s_article_rep> <!-- (05)-[컨텐츠: 메인-List ] -->
<s_index_article_rep> <!-- (05)-[컨텐츠: LIST-Loop ] -->
<div class="post-item">
<s_article_rep_thumbnail></s_article_rep_thumbnail>
</div>
</s_index_article_rep>
<s_permalink_article_rep> <!-- (05)-[컨텐츠: VIEW ] -->
<div class="post-entry-cover-inner">
<s_article_rep_thumbnail>
</s_article_rep_thumbnail>
<s_ad_div>
<!-- (05)-[컨텐츠: VIEW-글 수정 링크] -->
<!-- (05)-[컨텐츠: VIEW-글 삭제 링크] -->
</s_ad_div>
</div>
<div class="post-entry-content">
<!-- (05)-[컨텐츠: VIEW-내용 ] -->
</div>
<s_tag_label>
<div class="post-entry-tags">
<!-- (05)-[컨텐츠: VIEW-테그 ] -->
</div>
</s_tag_label>
<s_article_related> <!-- (05)-[컨텐츠: VIEW-관련 ] -->
<div class="post-entry-related-articles">
<ul>
<s_article_related_rep> <!-- (05)-[컨텐츠: VIEW-관련 LIST ] -->
<li>
<a href="">
<s_article_related_rep_thumbnail>
</s_article_related_rep_thumbnail>
</a>
</li>
</s_article_related_rep>
</ul>
</div>
</s_article_related>
<div class="post-entry-comments">
댓글<s_rp_count>()</s_rp_count>
<s_rp> <!-- (05)-[컨텐츠: VIEW-댓글 ] -->
<s_rp_container> <!-- (05)-[컨텐츠: VIEW-댓글 ] -->
<div class="comment-list">
<ul>
<s_rp_rep> <!-- (05)-[컨텐츠: VIEW-댓글-LIST-Loop ] -->
<li id="">
<div class="author-meta">
<span class="control">
<!-- (05)-[컨텐츠: VIEW-댓글-댓글주소 ] -->
<!-- (05)-[컨텐츠: VIEW-댓글-수정/삭제] -->
</span>
</div>
<!-- (05)-[컨텐츠: VIEW-댓글-답글 -->
<s_rp2_container> <!-- (05)-[컨텐츠: VIEW-댓글(대댓글) ] -->
<ul>
<s_rp2_rep> <!-- (05)-[컨텐츠: VIEW-댓글-(대댓글) LIST-Loop ] -->
<li id="">
<div class="author-meta">
<span class="control">
<!-- (05)-[컨텐츠: VIEW-댓글-댓글주소 -->
<!-- (05)-[컨텐츠: VIEW-댓글-수정/삭제 -->
</span>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ul>
</div>
</s_rp_container>
<s_rp_input_form> <!-- (05)-[컨텐츠: VIEW-댓글 INPUT-Form ] -->
<div class="post-comment-form">
<s_rp_member> <!-- (05)-[컨텐츠: VIEW-댓글 INPUT-Form(인증여부) ] -->
<div class="field">
<s_rp_guest> <!-- (05)-[컨텐츠: VIEW-댓글 INPUT-Form(비회원) ] -->
<input type="text" name="" placeholder="이름" value=""></input>
<input type="password" name="" placeholder="비밀번호" value=""></input>
</s_rp_guest>
<div class="secret">
<input type="checkbox" name="" id="secret"></input>
<label for="secret" tabindex="0">비밀글</label>
</div>
</div>
</s_rp_member>
<textarea name="" placeholder="여러분의 소중한 댓글을 입력해주세요."></textarea>
<button type="submit" onclick="">등록</button>
</div>
</s_rp_input_form>
</s_rp>
</div>
</s_permalink_article_rep>
</s_article_rep>
</div>
<s_tag> <!-- (06)-[테그: ] -->
<div class="post-header">태그</div>
<div class="post-tags">
<s_tag_rep>
<a href=""></a>
</s_tag_rep>
</div>
</s_tag>
<s_guest> <!-- (07)-[Guest Book: ] -->
<div class="guestbook-entry-comments">
<div class="post-header">방명록</div>
<s_guest_input_form> <!-- (07)-[Guest Book: INPUT-Form ] -->
<div class="comment-form">
<s_guest_member> <!-- [Guest Book: INPUT-Form(인증) ] -->
<div class="field">
<s_guest_form> <!-- [Guest Book: INPUT-Form(비회원) ] -->
<input type="text" name="" placeholder="이름" value=""></input>
<input type="password" name="" placeholder="암호" value=""></input>
</s_guest_form>
</div>
</s_guest_member>
<textarea name="" placeholder="여러분의 소중한 댓글을 입력해주세요."></textarea>
<button type="submit" onclick="" >등록</button>
</div>
</s_guest_input_form>
<s_guest_container> <!-- (07)-[Guest Book: LIST ] -->
<div class="comment-list">
<ul>
<s_guest_rep> <!-- [Guest Book: LIST-Loop ] -->
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="프로필사진"></img>
<span class="control">
<button type="button" onclick="commentMore(this); return false;">더보기</button>
<a href="#" onclick="">수정/삭제</a>
</span>
</div>
<a href="#" onclick="">답변</a>
<s_guest_reply_container> <!-- [Guest Book: LIST-(댓글) ] -->
<ul>
<s_guest_reply_rep> <!-- [Guest Book: LIST-(댓글)-Loop ] -->
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="프로필사진"></img>
<span class="control">
<button type="button" onclick="commentMore(this); return false;">더보기</button>
<a href="#" onclick="">수정/삭제</a>
</span>
</div>
<p></p>
</li>
</s_guest_reply_rep>
</ul>
</s_guest_reply_container>
</li>
</s_guest_rep>
</ul>
</div>
</s_guest_container>
</div>
</s_guest>
<s_paging> <!-- (08)-[게시글 페이지징: LIST ] -->
<div class="pagination">
<a class="prev "><i class="fa fa-angle-left fa-2x"></i></a>
<s_paging_rep>
<a class="page-no"></a>
</s_paging_rep>
<a class="next "><i class="fa fa-angle-right fa-2x"></i></a>
</div>
</s_paging>
</div>
</body>
</html>
2. 티스토리 스킨 가이드
자세한 내용은 아래 스킨 가이드를 참고하세요.
https://tistory.github.io/document-tistory-skin/
반응형
</s_page_rep>
<s_article_protected> <!-- (04)-[보호글: ] -->
<s_index_article_rep> <!-- (04)-[보호글: LIST-Loop] -->
<div class="post-item protected">
<!-- 보호되어 있는 글 입니다. -->
/72
티스토리 스킨 제작기-3-스킨 구조 분석(skin.html 전체 구조-상세)
티스토리 스킨 제작기-3-스킨 구조 분석(skin.html 전체 구조-상세)
2022. 2. 12.
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="post-entry-content">
<form class="protected_form" onsubmit="{reloadEntry(14);return false;}">
<h2>보호되어 있는 글입니다.</h2>
<p>내용을 보시려면 비밀번호를 입력하세요.</p>
<input type="password" id="entry14password" name="entry14password" value="" placeholder="비밀번호"></input>
<button type="submit" class="">확인</button>
</form>
</div>
</s_permalink_article_rep>
</s_article_protected>
<s_article_rep> <!-- (05)-[컨텐츠: 메인-List ] -->
<s_index_article_rep> <!-- (05)-[컨텐츠: LIST-Loop ] -->
<div class="post-item">
/72
<s_article_rep_thumbnail>https://blog.kakaocdn.net/dn/ed1im1/btrsWKPG26H/je4xxGhnVDK7KPLn7Dm461/img.png</s_article_rep_thumbnail>
티스토리 스킨 제작기-3-스킨 구조 분석(skin.html 전체 구조-상세)
티스토리 스킨 제작기-3-스킨 구조 분석(skin.html 전체 구조-상세) 티스토리 스킨 가이드는 https://tistory.github.io/document-tistory-skin/ 여기에서 확인하시면 됩니다. 저는 개인적으로 가이드가 너무 형식 적으로 되어있고 사용자 편의적이지 않은 듯 하여 따로 정리를 해봤습니다. 여기에 시간을 오래 투자 하고 싶지도 않고 해서.... 혹시 저 처럼 처음 티스토리 스킨을 만들어 보실분이 있다면 도움이 되시길 바랍니다. 아래 내용을 그대로 skin.html에 넣으셔도 일단 작동은 하겠지만, 디테일한 디자인 및 css는 추가로 잡아 주셔야겠죠...^^ 1. 티스토리 전체 구조(상세 버전) () 보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요. 확인 댓..
2022. 2. 12.
</div>
</s_index_article_rep>
<s_permalink_article_rep> <!-- (05)-[컨텐츠: VIEW ] -->
<div class="post-entry-cover-inner">
<s_article_rep_thumbnail>
https://blog.kakaocdn.net/dn/ed1im1/btrsWKPG26H/je4xxGhnVDK7KPLn7Dm461/img.png
</s_article_rep_thumbnail>
블로그
티스토리 스킨 제작기-3-스킨 구조 분석(skin.html 전체 구조-상세)
하늘에 그린 그림자
2022. 2. 12.
<s_ad_div>
<!-- (05)-[컨텐츠: VIEW-글 수정 링크] -->
<!-- (05)-[컨텐츠: VIEW-글 삭제 링크] -->
</s_ad_div>
</div>
<div class="post-entry-content">
728x90
티스토리 스킨 제작기-3-스킨 구조 분석(skin.html 전체 구조-상세)
티스토리 스킨 가이드는 https://tistory.github.io/document-tistory-skin/ 여기에서 확인하시면 됩니다.
저는 개인적으로 가이드가 너무 형식 적으로 되어있고 사용자 편의적이지 않은 듯 하여 따로 정리를 해봤습니다.
여기에 시간을 오래 투자 하고 싶지도 않고 해서....
혹시 저 처럼 처음 티스토리 스킨을 만들어 보실분이 있다면 도움이 되시길 바랍니다.
아래 내용을 그대로 skin.html에 넣으셔도 일단 작동은 하겠지만, 디테일한 디자인 및 css는 추가로 잡아 주셔야겠죠...^^
1. 티스토리 전체 구조(상세 버전)
<html>
<head></head>
<body>
<div class="post-container">
<div class="post-head">
<s_list> <!-- (01)-[Page: LIST Header ] -->
<span></span><em>()</em>
<s_list_empty>
</s_list_empty>
</s_list>
</div>
<div class="post-body">
<s_notice_rep> <!-- (02)-[공지사항: LIST-Loop] -->
<s_notice_rep_thumbnail>
</s_notice_rep_thumbnail>
</s_notice_rep>
<s_page_rep> <!-- (03)-[페이지: LIST-Loop] -->
</s_page_rep>
<s_article_protected> <!-- (04)-[보호글: ] -->
<s_index_article_rep> <!-- (04)-[보호글: LIST-Loop] -->
<div class="post-item protected">
<!-- 보호되어 있는 글 입니다. -->
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="post-entry-content">
<form class="protected_form" onsubmit="{reloadEntry(14);return false;}">
<h2>보호되어 있는 글입니다.</h2>
<p>내용을 보시려면 비밀번호를 입력하세요.</p>
<input type="password" id="entry14password" name="entry14password" value="" placeholder="비밀번호"></input>
<button type="submit" class="">확인</button>
</form>
</div>
</s_permalink_article_rep>
</s_article_protected>
<s_article_rep> <!-- (05)-[컨텐츠: 메인-List ] -->
<s_index_article_rep> <!-- (05)-[컨텐츠: LIST-Loop ] -->
<div class="post-item">
<s_article_rep_thumbnail></s_article_rep_thumbnail>
</div>
</s_index_article_rep>
<s_permalink_article_rep> <!-- (05)-[컨텐츠: VIEW ] -->
<div class="post-entry-cover-inner">
<s_article_rep_thumbnail>
</s_article_rep_thumbnail>
<s_ad_div>
<!-- (05)-[컨텐츠: VIEW-글 수정 링크] -->
<!-- (05)-[컨텐츠: VIEW-글 삭제 링크] -->
</s_ad_div>
</div>
<div class="post-entry-content">
<!-- (05)-[컨텐츠: VIEW-내용 ] -->
</div>
<s_tag_label>
<div class="post-entry-tags">
<!-- (05)-[컨텐츠: VIEW-테그 ] -->
</div>
</s_tag_label>
<s_article_related> <!-- (05)-[컨텐츠: VIEW-관련 ] -->
<div class="post-entry-related-articles">
<ul>
<s_article_related_rep> <!-- (05)-[컨텐츠: VIEW-관련 LIST ] -->
<li>
<a href="">
<s_article_related_rep_thumbnail>
</s_article_related_rep_thumbnail>
</a>
</li>
</s_article_related_rep>
</ul>
</div>
</s_article_related>
<div class="post-entry-comments">
댓글<s_rp_count>()</s_rp_count>
<s_rp> <!-- (05)-[컨텐츠: VIEW-댓글 ] -->
<s_rp_container> <!-- (05)-[컨텐츠: VIEW-댓글 ] -->
<div class="comment-list">
<ul>
<s_rp_rep> <!-- (05)-[컨텐츠: VIEW-댓글-LIST-Loop ] -->
<li id="">
<div class="author-meta">
<span class="control">
<!-- (05)-[컨텐츠: VIEW-댓글-댓글주소 ] -->
<!-- (05)-[컨텐츠: VIEW-댓글-수정/삭제] -->
</span>
</div>
<!-- (05)-[컨텐츠: VIEW-댓글-답글 -->
<s_rp2_container> <!-- (05)-[컨텐츠: VIEW-댓글(대댓글) ] -->
<ul>
<s_rp2_rep> <!-- (05)-[컨텐츠: VIEW-댓글-(대댓글) LIST-Loop ] -->
<li id="">
<div class="author-meta">
<span class="control">
<!-- (05)-[컨텐츠: VIEW-댓글-댓글주소 -->
<!-- (05)-[컨텐츠: VIEW-댓글-수정/삭제 -->
</span>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ul>
</div>
</s_rp_container>
<s_rp_input_form> <!-- (05)-[컨텐츠: VIEW-댓글 INPUT-Form ] -->
<div class="post-comment-form">
<s_rp_member> <!-- (05)-[컨텐츠: VIEW-댓글 INPUT-Form(인증여부) ] -->
<div class="field">
<s_rp_guest> <!-- (05)-[컨텐츠: VIEW-댓글 INPUT-Form(비회원) ] -->
<input type="text" name="" placeholder="이름" value=""></input>
<input type="password" name="" placeholder="비밀번호" value=""></input>
</s_rp_guest>
<div class="secret">
<input type="checkbox" name="" id="secret"></input>
<label for="secret" tabindex="0">비밀글</label>
</div>
</div>
</s_rp_member>
<textarea name="" placeholder="여러분의 소중한 댓글을 입력해주세요."></textarea>
<button type="submit" onclick="">등록</button>
</div>
</s_rp_input_form>
</s_rp>
</div>
</s_permalink_article_rep>
</s_article_rep>
</div>
<s_tag> <!-- (06)-[테그: ] -->
<div class="post-header">태그</div>
<div class="post-tags">
<s_tag_rep>
<a href=""></a>
</s_tag_rep>
</div>
</s_tag>
<s_guest> <!-- (07)-[Guest Book: ] -->
<div class="guestbook-entry-comments">
<div class="post-header">방명록</div>
<s_guest_input_form> <!-- (07)-[Guest Book: INPUT-Form ] -->
<div class="comment-form">
<s_guest_member> <!-- [Guest Book: INPUT-Form(인증) ] -->
<div class="field">
<s_guest_form> <!-- [Guest Book: INPUT-Form(비회원) ] -->
<input type="text" name="" placeholder="이름" value=""></input>
<input type="password" name="" placeholder="암호" value=""></input>
</s_guest_form>
</div>
</s_guest_member>
<textarea name="" placeholder="여러분의 소중한 댓글을 입력해주세요."></textarea>
<button type="submit" onclick="" >등록</button>
</div>
</s_guest_input_form>
<s_guest_container> <!-- (07)-[Guest Book: LIST ] -->
<div class="comment-list">
<ul>
<s_guest_rep> <!-- [Guest Book: LIST-Loop ] -->
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="프로필사진"></img>
<span class="control">
<button type="button" onclick="commentMore(this); return false;">더보기</button>
<a href="#" onclick="">수정/삭제</a>
</span>
</div>
<a href="#" onclick="">답변</a>
<s_guest_reply_container> <!-- [Guest Book: LIST-(댓글) ] -->
<ul>
<s_guest_reply_rep> <!-- [Guest Book: LIST-(댓글)-Loop ] -->
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="프로필사진"></img>
<span class="control">
<button type="button" onclick="commentMore(this); return false;">더보기</button>
<a href="#" onclick="">수정/삭제</a>
</span>
</div>
<p></p>
</li>
</s_guest_reply_rep>
</ul>
</s_guest_reply_container>
</li>
</s_guest_rep>
</ul>
</div>
</s_guest_container>
</div>
</s_guest>
<s_paging> <!-- (08)-[게시글 페이지징: LIST ] -->
<div class="pagination">
<a class="prev "><i class="fa fa-angle-left fa-2x"></i></a>
<s_paging_rep>
<a class="page-no"></a>
</s_paging_rep>
<a class="next "><i class="fa fa-angle-right fa-2x"></i></a>
</div>
</s_paging>
</div>
</body>
</html>
2. 티스토리 스킨 가이드
자세한 내용은 아래 스킨 가이드를 참고하세요.
https://tistory.github.io/document-tistory-skin/
반응형
<!-- (05)-[컨텐츠: VIEW-내용 ] -->
</div>
<s_tag_label>
<div class="post-entry-tags">
<!-- (05)-[컨텐츠: VIEW-테그 ] -->
</div>
</s_tag_label>
<s_article_related> <!-- (05)-[컨텐츠: VIEW-관련 ] -->
<div class="post-entry-related-articles">
<ul>
<s_article_related_rep> <!-- (05)-[컨텐츠: VIEW-관련 LIST ] -->
<li>
<a href="">
<s_article_related_rep_thumbnail>
</s_article_related_rep_thumbnail>
</a>
</li>
</s_article_related_rep>
</ul>
</div>
</s_article_related>
<div class="post-entry-comments">
댓글<s_rp_count>(0)</s_rp_count>
<s_rp> <!-- (05)-[컨텐츠: VIEW-댓글 ] -->
<s_rp_container> <!-- (05)-[컨텐츠: VIEW-댓글 ] -->
<div class="comment-list">
<ul>
<s_rp_rep> <!-- (05)-[컨텐츠: VIEW-댓글-LIST-Loop ] -->
<li id="">
<div class="author-meta">
<span class="control">
<!-- (05)-[컨텐츠: VIEW-댓글-댓글주소 ] -->
<!-- (05)-[컨텐츠: VIEW-댓글-수정/삭제] -->
</span>
</div>
<!-- (05)-[컨텐츠: VIEW-댓글-답글 -->
<s_rp2_container> <!-- (05)-[컨텐츠: VIEW-댓글(대댓글) ] -->
<ul>
<s_rp2_rep> <!-- (05)-[컨텐츠: VIEW-댓글-(대댓글) LIST-Loop ] -->
<li id="">
<div class="author-meta">
<span class="control">
<!-- (05)-[컨텐츠: VIEW-댓글-댓글주소 -->
<!-- (05)-[컨텐츠: VIEW-댓글-수정/삭제 -->
</span>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ul>
</div>
</s_rp_container>
<s_rp_input_form> <!-- (05)-[컨텐츠: VIEW-댓글 INPUT-Form ] -->
<div class="post-comment-form">
<s_rp_member> <!-- (05)-[컨텐츠: VIEW-댓글 INPUT-Form(인증여부) ] -->
<div class="field">
<s_rp_guest> <!-- (05)-[컨텐츠: VIEW-댓글 INPUT-Form(비회원) ] -->
<input type="text" name="" placeholder="이름" value=""></input>
<input type="password" name="" placeholder="비밀번호" value=""></input>
</s_rp_guest>
<div class="secret">
<input type="checkbox" name="" id="secret"></input>
<label for="secret" tabindex="0">비밀글</label>
</div>
</div>
</s_rp_member>
<textarea name="" placeholder="여러분의 소중한 댓글을 입력해주세요."></textarea>
<button type="submit" onclick="">등록</button>
</div>
</s_rp_input_form>
</s_rp>
</div>
</s_permalink_article_rep>
</s_article_rep>
</div>
<s_tag> <!-- (06)-[테그: ] -->
<div class="post-header">태그</div>
<div class="post-tags">
<s_tag_rep>
<a href=""></a>
</s_tag_rep>
</div>
</s_tag>
<s_guest> <!-- (07)-[Guest Book: ] -->
<div class="guestbook-entry-comments">
<div class="post-header">방명록</div>
<s_guest_input_form> <!-- (07)-[Guest Book: INPUT-Form ] -->
<div class="comment-form">
<s_guest_member> <!-- [Guest Book: INPUT-Form(인증) ] -->
<div class="field">
<s_guest_form> <!-- [Guest Book: INPUT-Form(비회원) ] -->
<input type="text" name="" placeholder="이름" value=""></input>
<input type="password" name="" placeholder="암호" value=""></input>
</s_guest_form>
</div>
</s_guest_member>
<textarea name="" placeholder="여러분의 소중한 댓글을 입력해주세요."></textarea>
<button type="submit" onclick="" >등록</button>
</div>
</s_guest_input_form>
<s_guest_container> <!-- (07)-[Guest Book: LIST ] -->
<div class="comment-list">
<ul>
<s_guest_rep> <!-- [Guest Book: LIST-Loop ] -->
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="프로필사진"></img>
<span class="control">
<button type="button" onclick="commentMore(this); return false;">더보기</button>
<a href="#" onclick="">수정/삭제</a>
</span>
</div>
<a href="#" onclick="">답변</a>
<s_guest_reply_container> <!-- [Guest Book: LIST-(댓글) ] -->
<ul>
<s_guest_reply_rep> <!-- [Guest Book: LIST-(댓글)-Loop ] -->
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="프로필사진"></img>
<span class="control">
<button type="button" onclick="commentMore(this); return false;">더보기</button>
<a href="#" onclick="">수정/삭제</a>
</span>
</div>
<p></p>
</li>
</s_guest_reply_rep>
</ul>
</s_guest_reply_container>
</li>
</s_guest_rep>
</ul>
</div>
</s_guest_container>
</div>
</s_guest>
<s_paging> <!-- (08)-[게시글 페이지징: LIST ] -->
<div class="pagination">
<a class="prev "><i class="fa fa-angle-left fa-2x"></i></a>
<s_paging_rep>
<a class="page-no"></a>
</s_paging_rep>
<a class="next "><i class="fa fa-angle-right fa-2x"></i></a>
</div>
</s_paging>
</div>
</body>
</html>
2. 티스토리 스킨 가이드
자세한 내용은 아래 스킨 가이드를 참고하세요.
https://tistory.github.io/document-tistory-skin/
반응형
'블로그' 카테고리의 다른 글
| 티스토리 스킨 제작기-5-스킨 구조 분석(skin.html 항목별 구성 방법) (0) | 2022.02.14 |
|---|---|
| 티스토리 스킨 제작기-4-스킨 구조 분석(index.xml 구조) (0) | 2022.02.13 |
| 티스토리 스킨 제작기-3-스킨 구조 분석(skin.html 전체 구조-전체) (0) | 2022.02.11 |
| 티스토리 스킨 제작기-2-스킨 구조 분석(사이드바) (0) | 2022.02.10 |
| 티스토리 스킨 제작기-1-블로그 종류별 특징 (0) | 2022.02.09 |
관련글
댓글
최신 글
추천 글
최근 댓글
Copyright(c) Since 2022, EPARI All Rights Reserved