티에디션도움말

html 구조

1. 티에디션 영역

티에디션으로 편집한 내용은 스킨 구조에서 content 영역에 적용됩니다.

2. html 구조

실제 티에디션을 적용한 블로그를 예제로 티에디션의 구조를 살펴보겠습니다.
예제 블로그는 다음과 같이 두 개의 아이템 그룹으로 구성되어 있습니다. 첫 번째 아이템 그룹은 아이템 120161로 구성되었고, 두 번째 아이템 그룹은 아이템 140101 아이템 3개로 구성된 조합형 아이템입니다.

위 예제 블로그의 html 소스를 간략화하면 아래와 같습니다.

...
<!-- 티에디션 영역이 630px인 경우 -->
<body class="tistory_grid_630">
  <div id="wrapTabloidBody">
	<div id="ttCanvas">
	  <style id="ttItemCSS" type="text/css">
		.../* 적용된 아이템의 css */
	  </style>

	  <!-- 티에디션 패널 시작 -->
	  <div id="ttPanel10000"
		   class="tt-panel tt-span-12 append-bottom-4 tt-last">
		<!-- 첫번째 아이템 그룹 시작 -->
		<div class="tt-component" id="ttItemGroup1000">
		  <!-- 아이템 시작 -->
		  <div id="ttItem100"
			   class="tt-item tt-item-120151 tt-span-12 tt-last">
		  <!-- 아이템의 html 코드 -->
		  </div> <!-- 아이템 끝 -->
		</div> <!-- 첫번째 아이템 그룹 끝 -->

		<!-- 두번째 아이템 그룹 시작(조합형) -->
		<div class="tt-component" id="ttItemGroup1001">
		  <!-- 첫번째 아이템 시작 -->
		  <div id="ttItem101"
			   class="tt-item tt-item-140101 tt-span-4">
			 <!-- 첫번째 아이템의 html 코드 -->
		  </div> <!-- 첫번째 아이템 끝 -->
		  <!-- 두번째 아이템 시작 -->
		  <div id="ttItem102"
			   class="tt-item tt-item-140101 tt-span-4">
			 <!-- 두번째 아이템의 html 코드 -->
		  </div> <!-- 두번째 아이템 끝 -->
		  <!-- 세번째 아이템 시작 -->
		  <div id="ttItem103"
			   class="tt-item tt-item-140101 tt-span-4 tt-last">
			 <!-- 세번째 아이템의 html 코드 -->
		  </div> <!-- 세번째 아이템 끝 -->
		</div> <!-- 두번째 아이템 그룹 끝 -->
	  </div> <!-- 티에디션 패널 끝 -->
	</div>
  </div>
</body>
...

리모콘에서 임의의 아이템을 적용하면 아이템 그룹이 생성되고, 그 안에 아이템 html 소스가 위치하게 됩니다.
조합형 아이템은 아이템 그룹 안에 1개 이상의 아이템의 html 소스가 삽입됩니다. 위 예제 소스를 보면, 두 번째 아이템 그룹 안에 세 개의 아이템 코드가 삽입된 것을 확인할 수 있습니다.