티스토리 첫화면꾸미기 부트스트랩 위젯형식으로 꾸미는 방법

첫화면 꾸미기는 스킨을 만드는것과 같이 여러가지로 꾸밀 수 있습니다.
플러그인에서 첫화면 꾸미기를 선택하면 ttDesk.css 가 삽입이 되면 첫화면의 스타일은 ttDesk.css에서 설정합니다.
기본적으로 어떻게 설정을 하는지는 여기를 클릭하시면 코드가 어떤것이 있는지 알 수 있습니다.
이전에 작성한 글을 보시면 첫화면 꾸미기의 치환자가 어떤것이 있는지는 알 수 있을겁니다.
티스토리 첫화면 꾸미기 설정하는 방법 =>  http://demun.tistory.com/2177 

이글은 부트스트랩 스킨을 사용한다는 가정하에서 꾸미는 방법을 말합니다.
부트스트랩에선 아이콘을 넣는다든가, 위젯에 대한 스타일 코드가 포함되어 있습니다.
완성된 모습은 아래와 같습니다.


부트스트랩 스킨을 사용하지 않는다면 아래의 위젯 스타일 코드를 style.css 에 추가해주세요.

이전글에서처럼 텍스트 목록형을 만든다고 가정하고 진행합니다.


html 을 수정하는 곳에서 기본은 위처럼 되어 있습니다.
근데 저는 불필요한 것은 제거하고 아래의 마크업을 사용합니다.

widget html

<div class="widget">
	<div class="widget_header">
		<h3>
		...
		</h3>
	</div>
	<div class="widget_content">
		...
	</div><!-- //widget_content -->
</div><!-- //widget -->

만약 위의 텍스트 목록형 코드를 위젯 코드로 만든다면 아래처럼 마크업이 됩니다.

widget

<div class="widget">
	<div class="widget_header">
		<h3>
		<s_more>
			<i class="icon-bookmark"></i><a href=""></a>
		</s_more>
		</h3>
	</div>
	<div class="widget_content">
        <s_list>
			<div class="TD_list">
				<span class="TD_headline"><a href=""></a></span>	
				<span class="TD_date"> </span>
			</div>
		</s_list>
	</div><!-- //widget_content -->
</div><!-- //widget -->

만약 아이콘하고 상관없이 모든 스킨에서 사용하고자 한다면 아래의 스타일 코드를 style.css 에 추가하면 사용할 수 있습니다.
코드가 길어서 더보기를 사용합니다.

개    개