« 2025/02 »
일	월	화	수	목	금	토
						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

하늘에 그린 그림자

홈서버(Home Server) 만들기

홈서버(Home Server) 구축 - 운영하면서 가지고 놀아보자.......

See All

01 / 04

공지사항

페이지

블로그

티스토리 스킨 제작기-3-스킨 구조 분석(skin.html 전체 구조-전체)

by 하늘에 그린 그림자 2022. 2. 11.

티스토리 스킨 제작기-3-스킨 구조 분석(skin.html 전체 구조-전체)

티스토리 스킨은 Front-End 를 사용자가 직접 수정해서 올릴수 있도록 되어 있습니다.
구조는 <s_약속된 테그이름></s_약속된 테그이름> 을 html에 넣으면 Back-End에서 해당 테그에 만맞는 로직을 구현해서 replace로 교체된후 화면에 보여주는 구조 입니다.

이번에 스킨을 처음 작업해보면서, Back-End구현을 당연히 구현해야할 Back-End 스트레스가 없으니 좋기는 하더군요. 모든 개발이 그랬으면 좋겠네요.....^^

전체 구조는 아래와 같이 되어 있습니다.

1. 티스토리 전체 구조(간략 버전)

<html>
  <head></head>
  <body>
    <div class="post-container">

        <div class="post-head">
		  <s_list>                        <!-- (01)-[Page: LIST Header ] -->
		  </s_list>
		</div>
 
        <div class="post-body">
			<s_notice_rep>                <!-- (01)-[공지사항: LIST-Loop] -->
			</s_notice_rep>	           
				                    
			<s_page_rep>                  <!-- (01)-[페이지: LIST-Loop] -->
			</s_page_rep>						       
				                    
			<s_article_protected>         <!-- (04)-[보호글:      ] -->
			</s_article_protected>				    		  
			                     
            <s_article_rep>                         <!-- (05)-[컨텐츠: 메인-List ] -->
				<s_index_article_rep>               <!-- (05)-[컨텐츠: LIST-Loop ] -->
				</s_index_article_rep>       
                        
				<s_permalink_article_rep>            <!-- (05)-[컨텐츠: VIEW  ] -->
					<div class="post-entry-content">
						





                    
        
  
    728x90
    
    
    
  

        

            


 
 
티스토리 스킨 제작기-3-스킨 구조 분석(skin.html 전체 구조-전체) 



티스토리 스킨은 Front-End 를 사용자가 직접 수정해서 올릴수 있도록 되어 있습니다. 
구조는 <s_약속된 테그이름></s_약속된 테그이름> 을 html에 넣으면 Back-End에서 해당 테그에 만맞는 로직을 구현해서 replace로 교체된후 화면에 보여주는 구조 입니다. 

이번에 스킨을 처음 작업해보면서, Back-End구현을 당연히 구현해야할 Back-End 스트레스가 없으니 좋기는 하더군요. 모든 개발이 그랬으면 좋겠네요.....^^ 

전체 구조는 아래와 같이 되어 있습니다. 

  
1. 티스토리 전체 구조(간략 버전) 
<html>
  <head></head>
  <body>
    <div class="post-container">

        <div class="post-head">
		  <s_list>                        <!-- (01)-[Page: LIST Header ] -->
		  </s_list>
		</div>
 
        <div class="post-body">
			<s_notice_rep>                <!-- (01)-[공지사항: LIST-Loop] -->
			</s_notice_rep>	           
				                    
			<s_page_rep>                  <!-- (01)-[페이지: LIST-Loop] -->
			</s_page_rep>						       
				                    
			<s_article_protected>         <!-- (04)-[보호글:      ] -->
			</s_article_protected>				    		  
			                     
            <s_article_rep>                         <!-- (05)-[컨텐츠: 메인-List ] -->
				<s_index_article_rep>               <!-- (05)-[컨텐츠: LIST-Loop ] -->
				</s_index_article_rep>       
                        
				<s_permalink_article_rep>            <!-- (05)-[컨텐츠: VIEW  ] -->
					<div class="post-entry-content">
						     <!-- (05)-[컨텐츠: VIEW-내용  ] -->
					</div>
					<s_tag_label>                    <!-- (05)-[컨텐츠: VIEW-테그  ] -->
					</s_tag_label>
					<s_article_related>              <!-- (05)-[컨텐츠: VIEW-관련  ] -->
					</s_article_related>
					<div class="post-entry-comments">
						<s_rp_count>
							()
						</s_rp_count>
						<s_rp>                       <!-- (05)-[컨텐츠: VIEW-댓글  ] -->
							<s_rp_container>         <!-- (05)-[컨텐츠: VIEW-댓글  ] -->
							</s_rp_container>
							<s_rp_input_form>        <!-- (05)-[컨텐츠: VIEW-댓글 INPUT-Form ] -->
							</s_rp_input_form>
						</s_rp>
					</div>
				</s_permalink_article_rep>
			</s_article_rep>		
		</div>			
				
		<s_tag>                         <!-- (06)-[테그:  ] -->
			<s_tag_rep>
			</s_tag_rep>
		</s_tag>

		<s_guest>                       <!-- (07)-[Guest Book:  ] -->
			<s_guest_input_form>        <!-- (07)-[Guest Book: INPUT-Form  ] -->
			</s_guest_input_form>

			<s_guest_container>         <!-- (07)-[Guest Book: LIST  ] -->
				<s_guest_rep>           <!-- (07)-[Guest Book: LIST-Loop  ] -->
				</s_guest_rep>
			</s_guest_container>
		</s_guest>
 										
		<s_paging>                      <!-- (08)-[게시글 페이지징: LIST  ] -->
				<s_paging_rep>          <!-- (08)-[게시글 페이지징: LIST-Loop  ] -->
				</s_paging_rep>
		</s_paging>								
				
	  </div>			
 </body>
</html>






2. 티스토리 스킨 가이드
 
자세한 사항은 아래 스킨 가이드를 참고하세요.
https://tistory.github.io/document-tistory-skin/
                    
        
  
    반응형
    
    
    
  

        

     <!-- (05)-[컨텐츠: VIEW-내용  ] -->
					</div>
					<s_tag_label>                    <!-- (05)-[컨텐츠: VIEW-테그  ] -->
					</s_tag_label>
					<s_article_related>              <!-- (05)-[컨텐츠: VIEW-관련  ] -->
					</s_article_related>
					<div class="post-entry-comments">
						<s_rp_count>
							(0)
						</s_rp_count>
						<s_rp>                       <!-- (05)-[컨텐츠: VIEW-댓글  ] -->
							<s_rp_container>         <!-- (05)-[컨텐츠: VIEW-댓글  ] -->
							</s_rp_container>
							<s_rp_input_form>        <!-- (05)-[컨텐츠: VIEW-댓글 INPUT-Form ] -->
							</s_rp_input_form>
						</s_rp>
					</div>
				</s_permalink_article_rep>
			</s_article_rep>		
		</div>			
				
		<s_tag>                         <!-- (06)-[테그:  ] -->
			<s_tag_rep>
			</s_tag_rep>
		</s_tag>

		<s_guest>                       <!-- (07)-[Guest Book:  ] -->
			<s_guest_input_form>        <!-- (07)-[Guest Book: INPUT-Form  ] -->
			</s_guest_input_form>

			<s_guest_container>         <!-- (07)-[Guest Book: LIST  ] -->
				<s_guest_rep>           <!-- (07)-[Guest Book: LIST-Loop  ] -->
				</s_guest_rep>
			</s_guest_container>
		</s_guest>
 										
		<s_paging>                      <!-- (08)-[게시글 페이지징: LIST  ] -->
				<s_paging_rep>          <!-- (08)-[게시글 페이지징: LIST-Loop  ] -->
				</s_paging_rep>
		</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.12
티스토리 스킨 제작기-2-스킨 구조 분석(사이드바) (0)	2022.02.10
티스토리 스킨 제작기-1-블로그 종류별 특징 (0)	2022.02.09

최근 댓글

구독중 구독자 스킨 스킨가이드 포럼 스토리

하늘에 그린 그림자

홈서버(Home Server) 만들기

공지사항

페이지

티스토리 스킨 제작기-3-스킨 구조 분석(skin.html 전체 구조-전체)

'블로그' 카테고리의 다른 글

댓글

최신 글

추천 글

최근 댓글

티스토리툴바

하늘에 그린 그림자

홈서버(Home Server) 만들기

공지사항

페이지

티스토리 스킨 제작기-3-스킨 구조 분석(skin.html 전체 구조-전체)

'블로그' 카테고리의 다른 글

관련글

댓글

최신 글

추천 글

최근 댓글

티스토리툴바