티에디션도움말

아이템 수정

티에디션 편집은 아이템 html 소스에 class 속성에 선언된 css 클래스 이름을 확인하여 동작하기 때문에, css 클래스 이름을 수정하거나 삭제할 경우 편집이 오동작할 수 있으니 주의하세요.

들어가기 전에

티에디션에서 사용하는 태그를 설명합니다. 아래 설명한 두 개의 태그는 적절한 위치에 반드시 포함되어야 합니다.

<s_tabloid></s_tabloid>
아이템 소스의 시작과 끝에 적습니다.(아이템 타이틀은 포함되지 않아도 됩니다.)
<s_article_rep></s_article_rep>
티에디션 편집 화면에서 아이템을 적용한 후, 세로로 반복 가능한 아이템은 아래 그림과 같이 세로 반복을 조절할 수 있는 +, - 버튼이 표시됩니다.

플러스아이콘 버튼으로 반복을 조절할 때 반복되는 단위를 <s_article_rep> 태그로 감싸면 됩니다.

1. 단 너비에 맞는 아이템 수정

단 너비에 맞는 아이템은 1단, 2단, 3단 아이템을 말합니다.
1단 아이템인 의 소스를 예제로 살펴보겠습니다.

<!-- 아이템 타이틀 시작 -->
<h2 class="tt-item-title"><span class="tt-item-title-bg"><span class="tt-item-title-inner">[##_item_title_##]</span></span></h2>
<!-- 아이템 타이틀 끝 -->
<ul class="tt-wrap-item">
<!-- 티에디션 치환 영역 시작 -->
  <s_tabloid>
<!-- 세로로 반복될 소스 시작 -->
	<s_article_rep>
	  <li class="tt-span-4 [##_is_last_item_##][##_clear_##]">
		<p class="tt-post-title">
		  <a href="[##_article_rep_link_##]">[##_article_rep_title_excerpt_##]</a>
		</p>
		<p class="tt-wrap-post-thumb">
		  <a href="[##_article_rep_link_##]" title="[##_article_rep_title_##]"
				class="tt-wrap-thumb-link tt-span-4-border tt-span-4-[##_thumb_ratio_##] tt-last[##_use_noimage_##]">
			<img
			  class="tt-post-thumb"
			  style="[##_thumb_style_##]"
			  src="//[##_article_rep_thumb_host_##]/[##_thumb_type_##]/[##_article_rep_thumb_hash_##]" alt="[##_article_rep_title_##]"/></a>
		</p>
		<p class="tt-post-summary">
		  <a href="[##_article_rep_link_##]">[##_article_rep_desc_excerpt_##]</a>
		</p>
		<p class="tt-post-etcinfo">
		  <span class="tt-post-category"><a href="[##_article_rep_category_link_##]">[##_article_rep_category_##]</a></span>
		  <span class="tt-post-author">[##_article_rep_author_##]</span>
		  <span class="tt-post-date">[##_article_rep_date_##]</span>
		  <span class="tt-post-comment">[##_article_rep_comment_cnt_##] comment</span>
		</p>
	  </li>
	</s_article_rep><!-- 세로로 반복될 소스 끝 -->
  </s_tabloid><!-- 티에디션 치환 영역 끝 -->
</ul>

아이템 그룹에 속하는 아이템 타이틀을 h2 태그로, 아이템 목록(글 목록)은 ul로 구조화했습니다. 실제 아이템 소스에 해당하는 li 태그는 <s_tabloid>로, 세로로 반복될 영역은 <s_article_rep>로 감쌉니다. <s_article_rep> 태그 내의 소스는 티에디션 치환자를 이용해 html로 구조화되어 있습니다.

아이템 타이틀
```
<h2 class="tt-item-title">
  <span class="tt-item-title-bg">
	<span class="tt-item-title-inner">[##_item_title_##]</span>
  </span>
</h2>
			  	
```
리모콘 > 디자인 > 타이틀에 설정한 내용이 치환되어 보여집니다. tt-item-title 클래스를 삭제하거나, 클래스 이름을 변경하면 리모콘 > 디자인 > 타이틀 영역이 비활성화됩니다. tt-item-title-bg, tt-item-title-inner 클래스를 삭제하면 타이틀 배경, 테두리, 아이콘을 적용할 수 없습니다.
아이템 시작
```
<ul class="tt-wrap-item">
			  	
```
아이템은 글 1개를 나타낸다고 설명드렸습니다. 티에디션 아이템은 글 목록의 의미를 살리기 위해 ul 태그로 아이템을 구조화했습니다. tt-wrap-item 클래스는 아이템 그룹에서 아이템 요소의 시작을 의미하는 클래스입니다. 아이템 타이틀과 여백 등을 표현하기 위해 사용되고 있기 때문에 수정하거나 삭제할 경우 레이아웃이 틀어져 보일 수도 있습니다.
아이템의 세로 반복 영역
```
<s_article_rep>
  <li class="tt-span-4 [##_is_last_item_##][##_clear_##]">
  ...
  </li>
</s_article_rep>
			  	
```
세로 반복 영역에는 너비값을 나타내는 클래스가 반드시 선언되어야 합니다. 예제 아이템의 경우 tt-span-4가 선언이 되어 있습니다. 경우에 따라 치환될 수 있도록 [##_is_last_item_##], [##_is_clear_##] 치환자도 포함되어 있습니다.
글 제목, 내용 영역
```
<p class="tt-post-title">
  <a href="[##_article_rep_link_##]">[##_article_rep_title_excerpt_##]</a>
</p>
<p class="tt-post-summary">
  <a href="[##_article_rep_link_##]">[##_article_rep_desc_excerpt_##]</a>
</p>
			  	
```
리모콘 > 디자인 > 상세에서 개별 글의 제목, 내용을 사용자가 편집할 수 있는데 편집된 내용을 화면에 출력하기 위해서는 [##_article_rep_title_excerpt_##], [##_article_rep_desc_excerpt_##]를 사용합니다. 치환자 이름 뒤에 _excerpt가 없으면 사용자가 편집한 내용으로 치환되지 않고, 기존 글의 제목과 내용을 그대로 치환합니다.
섬네일 영역
```
<p class="tt-wrap-post-thumb">
  <a href="[##_article_rep_link_##]" title="[##_article_rep_title_##]"
  class="tt-wrap-thumb-link tt-span-4-border tt-span-4-[##_thumb_ratio_##] tt-last[##_use_noimage_##]">
	<img
	  class="tt-post-thumb"
	  style="[##_thumb_style_##]"
	  src="//[##_article_rep_thumb_host_##]/[##_thumb_type_##]/[##_article_rep_thumb_hash_##]" alt="[##_article_rep_title_##]"/></a>
</p>
			  	
```
섬네일 영역의 html 소스는 되도록 수정없이 사용하는 것을 권장합니다. css 클래스 이름을 변경하면 리모콘에서 섬네일과 관련된 편집 기능이 제대로 동작하지 않습니다.
tt-span-4-border 클래스는 tt-span-4 너비의 섬네일에 1px 너비의 테두리를 만듭니다.(리모콘 > 디자인에서 썸네일의 테두리 색상 변경 대상이 됩니다.) 테두리 없는 테두리를 만들기 위해서는 tt-span-4-border 대신 tt-span-4를 선언하면 됩니다.

2. 단 너비에 맞지 않는 아이템 수정

아이템 종류를 설명할 때 tt-span-6 너비를 가지는 아이템을 설명했습니다. 이와 같이 단에 맞지 않는 아이템의 경우 치환자가 약간 달라집니다.
단에 맞는 아이템은 아이템 그룹 영역을 가로 반복하면서 채우기 때문에 반복 단위에 대해서만 아이템 소스에 포함되면 됩니다. 하지만 단에 맞지 않는 아이템의 경우 자동으로 가로 반복이 되지 않기 때문에 반복이 된 상태의 아이템 소스가 필요합니다.
1단 아이템인 의 소스를 예제로 살펴보겠습니다.

<h2 class="tt-item-title"><span class="tt-item-title-bg"><span class="tt-item-title-inner">[##_item_title_##]</span></span></h2>
<ul class="tt-wrap-item">
  <s_tabloid>
	<li class="tt-span-12 [##_is_last_item_##][##_clear_##]">
	  <div class="tt-span-6">
		<a href="[##_article_rep_link[0]_##]" title="[##_article_rep_title[0]_##]"
			class="tt-wrap-thumb-link tt-span-6-border tt-span-6-[##_thumb_ratio[0]_##] tt-last[##_use_noimage_##]">
		  <img
			class="tt-post-thumb"
			style="[##_thumb_style[0]_##]"
			src="//[##_article_rep_thumb_host[0]_##]/[##_thumb_type[0]_##]/[##_article_rep_thumb_hash[0]_##]" alt="[##_article_rep_title[0]_##]"/></a>
		<p class="tt-post-title tt-span-6 tt-last tt-clear">
		  <a href="[##_article_rep_link[0]_##]">[##_article_rep_title_excerpt[0]_##]</a>
		</p>
		<p class="tt-post-summary tt-span-6 tt-last tt-clear"><a href="[##_article_rep_link[0]_##]">[##_article_rep_desc_excerpt[0]_##]</a></p>
		<p class="tt-post-etcinfo tt-span-6 tt-last tt-clear">
		  <span class="tt-post-category"><a href="[##_article_rep_category_link[0]_##]">[##_article_rep_category[0]_##]</a></span>
		  <span class="tt-post-author">[##_article_rep_author[0]_##]</span>
		  <span class="tt-post-date">[##_article_rep_date[0]_##]</span>
		  <span class="tt-post-comment">[##_article_rep_comment_cnt[0]_##] comment</span>
		</p>
	  </div>
	  <div class="tt-span-6 tt-last">
		<a href="[##_article_rep_link[1]_##]" title="[##_article_rep_title[1]_##]"
			class="tt-wrap-thumb-link tt-span-6-border tt-span-6-[##_thumb_ratio[1]_##] tt-last[##_use_noimage_##]">
		  <img
			class="tt-post-thumb"
			style="[##_thumb_style[1]_##]"
			src="//[##_article_rep_thumb_host[1]_##]/[##_thumb_type[1]_##]/[##_article_rep_thumb_hash[1]_##]" alt="[##_article_rep_title[1]_##]"/></a>
		<p class="tt-post-title tt-span-6 tt-last tt-clear">
		  <a href="[##_article_rep_link[1]_##]">[##_article_rep_title_excerpt[1]_##]</a>
		</p>
		<p class="tt-post-summary tt-span-6 tt-last tt-clear"><a href="[##_article_rep_link[1]_##]">[##_article_rep_desc_excerpt[1]_##]</a></p>
		<p class="tt-post-etcinfo tt-span-6 tt-last tt-clear">
		  <span class="tt-post-category"><a href="[##_article_rep_category_link[1]_##]">[##_article_rep_category[1]_##]</a></span>
		  <span class="tt-post-author">[##_article_rep_author[1]_##]</span>
		  <span class="tt-post-date">[##_article_rep_date[1]_##]</span>
		  <span class="tt-post-comment">[##_article_rep_comment_cnt[1]_##] comment</span>
		</p>
	  </div>
	</li>
  </s_tabloid>
</ul>

예제 아이템은 tt-span-6의 너비를 가지는 아이템을 가로로 두 번 반복한 상태를 나타내야 합니다. 세로 반복의 단위인 li 태그 안에 <div class="tt-span-6">이 가로 반복된 상태를 나타냅니다.
예제 아이템은 2개의 글이 출력되는데, 글의 순서를 0번부터 시작해서 0번째 글이 좌측에, 1번째 글이 우측에 출력됩니다. 글의 순서를 치환자 끝에 [#]로 적어주면 됩니다. [##_article_rep_title[0]_##], [##_article_rep_title[1]_##]은 0번째, 1번째 글의 제목으로 치환됩니다. 나머지 제약 사항은 단에 맞는 아이템과 동일합니다.

3. 헤드라인형 아이템 수정

아이템은 우측 하단의 번호를 클릭하면 해당 글의 섬네일이 보여지고, 기본적으로는 5개의 글이 일정한 시간을 간격으로 바뀌어 보여지는 아이템입니다. 클릭을 해서 특정 글을 보이게 하거나, 일정 시간 간격마다 아이템을 보이게 할 때 javascript를 사용하는데, 아이템에서 사용할 수 있는 javascript 함수를 소개합니다.
아래는 아이템의 html 소스입니다. tt-span-12의 너비를 가지는 3단 아이템으로 단에 맞는 아이템이지만 1개 이상의 글을 한 화면에서 보여줘야 하기 때문에 글의 순서를 나타내는 [#]를 치환자 뒤에 붙여 사용하고 있습니다.

아이템 소스에 사용되고 있는 javascript 함수인 ttChangePointItemSelectedArticle2는 ttRenderSelectedArticle로 함수명이 변경되었습니다. 아이템 소스에서 함수 이름을 수정하지 않아도 됩니다.

<h2 class="tt-item-title"><span class="tt-item-title-bg"><span class="tt-item-title-inner">[##_item_title_##]</span></span></h2>
<ul class="tt-wrap-item">
  <s_tabloid>
  <li class="tt-item-point-0 tt-span-12 tt-last tt-clear">
	<div class="tt-wrap-post tt-span-12 tt-last">
	  <a href="[##_article_rep_link[0]_##]" title="[##_article_rep_title[0]_##]" class="tt-wrap-thumb-link tt-span-12-border tt-span-12-[##_thumb_ratio[0]_##] tt-last"><img class="tt-post-thumb" style="[##_thumb_style[0]_##]" src="//[##_article_rep_thumb_host[0]_##]/[##_thumb_type[0]_##]/[##_article_rep_thumb_hash[0]_##]" alt="[##_article_rep_title[0]_##]" /></a>
	  <div class="tt-wrap-postinfo tt-span-12 tt-last tt-clear">
		<div class="tt-post-thumb-link">
		  <a class="tt-post-link-over" href="#0" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[4]_##]">1</a>
		  <a href="#1" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[1]_##]">2</a>
		  <a href="#2" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[2]_##]">3</a>
		  <a href="#3" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[3]_##]">4</a>
		  <a href="#4" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[4]_##]">5</a>
		</div>
	  </div>
	</div>
  </li>
  <li class="tt-item-point-1 tt-span-12 tt-last tt-clear" style="display: none;">
	<div class="tt-wrap-post tt-span-12 tt-last">
	  <a href="[##_article_rep_link[1]_##]" title="[##_article_rep_title[1]_##]" class="tt-wrap-thumb-link tt-span-12-border tt-span-12-[##_thumb_ratio[1]_##] tt-last"><img class="tt-post-thumb" style="[##_thumb_style[1]_##]" src="//[##_article_rep_thumb_host[1]_##]/[##_thumb_type[1]_##]/[##_article_rep_thumb_hash[1]_##]" alt="[##_article_rep_title[1]_##]" /></a>
	  <div class="tt-wrap-postinfo tt-span-12 tt-last tt-clear">
		<div class="tt-post-thumb-link">
		  <a href="#0" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[4]_##]">1</a>
		  <a href="#1" class="tt-post-link-over" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[1]_##]">2</a>
		  <a href="#2" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[2]_##]">3</a>
		  <a href="#3" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[3]_##]">4</a>
		  <a href="#4" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[4]_##]">5</a>
		</div>
	  </div>
	</div>
  </li>
  <li class="tt-item-point-2 tt-span-12 tt-last tt-clear" style="display: none;">
	<div class="tt-wrap-post tt-span-12 tt-last">
	  <a href="[##_article_rep_link[2]_##]" title="[##_article_rep_title[2]_##]" class="tt-wrap-thumb-link tt-span-12-border tt-span-12-[##_thumb_ratio[2]_##] tt-last"><img class="tt-post-thumb" style="[##_thumb_style[2]_##]" src="//[##_article_rep_thumb_host[2]_##]/[##_thumb_type[2]_##]/[##_article_rep_thumb_hash[2]_##]" alt="[##_article_rep_title[2]_##]" /></a>
	  <div class="tt-wrap-postinfo tt-span-12 tt-last tt-clear">
		<div class="tt-post-thumb-link">
		  <a href="#0" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[4]_##]">1</a>
		  <a href="#1" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[1]_##]">2</a>
		  <a href="#2" class="tt-post-link-over" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[2]_##]">3</a>
		  <a href="#3" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[3]_##]">4</a>
		  <a href="#4" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[4]_##]">5</a>
		</div>
	  </div>
	</div>
  </li>
  <li class="tt-item-point-3 tt-span-12 tt-last tt-clear" style="display: none;">
	<div class="tt-wrap-post tt-span-12 tt-last">
	  <a href="[##_article_rep_link[3]_##]" title="[##_article_rep_title[3]_##]" class="tt-wrap-thumb-link tt-span-12-border tt-span-12-[##_thumb_ratio[3]_##] tt-last"><img class="tt-post-thumb" style="[##_thumb_style[3]_##]" src="//[##_article_rep_thumb_host[3]_##]/[##_thumb_type[3]_##]/[##_article_rep_thumb_hash[3]_##]" alt="[##_article_rep_title[3]_##]" /></a>
	  <div class="tt-wrap-postinfo tt-span-12 tt-last tt-clear">
		<div class="tt-post-thumb-link">
		  <a href="#0" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[4]_##]">1</a>
		  <a href="#1" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[1]_##]">2</a>
		  <a href="#2" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[2]_##]">3</a>
		  <a href="#3" class="tt-post-link-over" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[3]_##]">4</a>
		  <a href="#4" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[4]_##]">5</a>
		</div>
	  </div>
	</div>
  </li>
  <li class="tt-item-point-4 tt-span-12 tt-last tt-clear" style="display: none;">
	<div class="tt-wrap-post tt-span-12 tt-last">
	  <a href="[##_article_rep_link[4]_##]" title="[##_article_rep_title[4]_##]" class="tt-wrap-thumb-link tt-span-12-border tt-span-12-[##_thumb_ratio[4]_##] tt-last"><img class="tt-post-thumb" style="[##_thumb_style[4]_##]" src="//[##_article_rep_thumb_host[4]_##]/[##_thumb_type[4]_##]/[##_article_rep_thumb_hash[4]_##]" alt="[##_article_rep_title[4]_##]" /></a>
	  <div class="tt-wrap-postinfo tt-span-12 tt-last tt-clear">
		<div class="tt-post-thumb-link">
		  <a href="#0" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[4]_##]">1</a>
		  <a href="#1" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[1]_##]">2</a>
		  <a href="#2" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[2]_##]">3</a>
		  <a href="#3" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[3]_##]">4</a>
		  <a href="#4" class="tt-post-link-over" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[4]_##]">5</a>
		</div>
	  </div>
	</div>
  </li>
</ul>
<script type="text/javascript">
  var roller = ttRepeatItemByInterval('ttItem[##_item_id_##]', 5, 2);
</script>
</s_tabloid>

예제 아이템은 5개의 글을 대상으로 하고 있기 때문에 각 글에 대한 li 태그를 5개 만듭니다. 개별 글에 해당하는 소스를 보면 아래와 같습니다.

<li class="tt-item-point-1 tt-span-12 tt-last tt-clear" style="display: none;">
  <div class="tt-wrap-post tt-span-12 tt-last">
	<a href="[##_article_rep_link[1]_##]" title="[##_article_rep_title[1]_##]" class="tt-wrap-thumb-link tt-span-12-border tt-span-12-[##_thumb_ratio[1]_##] tt-last"><img class="tt-post-thumb" style="[##_thumb_style[1]_##]" src="//[##_article_rep_thumb_host[1]_##]/[##_thumb_type[1]_##]/[##_article_rep_thumb_hash[1]_##]" alt="[##_article_rep_title[1]_##]" /></a>
	<div class="tt-wrap-postinfo tt-span-12 tt-last tt-clear">
	  <div class="tt-post-thumb-link">
		<a href="#0" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[4]_##]">1</a>
		<a href="#1" class="tt-post-link-over" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[1]_##]">2</a>
		<a href="#2" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[2]_##]">3</a>
		<a href="#3" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[3]_##]">4</a>
		<a href="#4" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[4]_##]">5</a>
	  </div>
	</div>
  </div>
</li>

li 태그에 tt-item-point-0이라는 클래스가 있습니다. 0번째 글을 나타내는 소스라는 의미입니다. 5번째 글의 경우 tt-item-point-4 클래스를 적으면 됩니다.

<div class="tt-post-thumb-link">
	<a class="tt-post-link-over" href="#0" onclick="javascript:ttRenderSelectedArticle('ttItem[##_item_id_##]', this);return false;" title="[##_article_rep_title[4]_##]">1</a>
....
</div>

ttChangePointItemSelectedArticle2('ttItem#_item_id_##', this)는 a 태그 클릭 이벤트 핸들러입니다. href 속성에 해시값을 읽어서 클릭했을 때 해당 글의 li가 보여지도록 합니다. href 속성이 #0이라면, tt-item-point-0을 클래스로 갖는 li를 보여주고, 나머지 li는 화면에서 숨기는 역할을 합니다. 다른 형태의 아이템을 만들 경우에도 위 소스의 구조를 그대로 사용하시면 됩니다.

<script type="text/javascript">
  var roller = ttRepeatItemByInterval('ttItem[##_item_id_##]', 5, 2);
</script>

일정 시간 간격으로 아이템에 포함된 글을 보여주는 javascript 함수입니다. 아이템 번호(ttItem[##_item_id_##]), li 태그의 개수(글의 개수), 시간 간격(초 단위)을 매개변수로 넣으면 됩니다.
아이템에 포함된 글을 정적으로 보이게 하려면 아이템 소스에서 script 태그 부분을 삭제하시면 됩니다.

4. css 수정

티에디션의 리모콘 > 디자인 메뉴에서 대부분의 아이템 요소의 스타일을 변경할 수 있습니다. 좀 더 세세한 수정을 하려면 아래처럼 css를 아이템 소스와 같이 적어줍니다.

<!-- 티에디션 치환 영역 시작 -->
<s_tabloid>
<!-- 아이템 스타일 선언 시작 -->
<style type="text/css">
	div#ttCanvas #ttItem[##_item_id_##].tt-item .tt-post-title,
	div#ttCanvas #ttItem[##_item_id_##].tt-item .tt-post-title a {
		 font: bold 14px dotum, sans-serif;
		 color: red;
		 background: url(배경이미지 주소) no-repeat;
		 padding-left: 13px;
	}
</style><!-- 아이템 스타일 선언 끝 -->
<h2 class="tt-item-title"><span class="tt-item-title-bg"><span class="tt-item-title-inner">[##_item_title_##]</span></span></h2>
<ul class="tt-wrap-item">
	<s_article_rep>
		<li class="tt-span-4 [##_is_last_item_##][##_clear_##]">
				...
		</li>
	</s_article_rep>
</s_tabloid>
</ul>

티에디션 영역의 css 선언은 스킨 css의 영향을 최소화하기 위해 우선순위가 높게 선언이 되어 있습니다. 아래와 같은 css를 추가하면 해당 아이템의 글 제목마다 배경이미지가 왼쪽에 보여지게 됩니다.

<style type="text/css">
	div#ttCanvas #ttItem[##_item_id_##].tt-item .tt-post-title,
	div#ttCanvas #ttItem[##_item_id_##].tt-item .tt-post-title a {
		 font: bold 14px dotum, sans-serif;
		 color: red;
		 background: url(배경이미지 주소) no-repeat;
		 padding-left: 13px;
	}
</style>