티스토리 리본 제목 서식 만들기 3

리본서식으로 첫번째는 둥근형태의 리본을 만들어 봤고, 두번째는 이미지없는 리본형태를 만들어 봤습니다.
이번에는 이미지를 활용한 리본인데요. 많이들 본 형태일겁니다.
먼저 어떤 형태인지 완성작을 한번 보세요.
 


사이드바에 전형적으로 사용하는 형태인데요. 이미지가 두개로 구성된것입니다.
이 방식의 장점은 너비가 커도 깨지지 않는다는 점입니다.

여기서 잠깐 참고할 점.
이미지가 한개인것은 너비가 유동적이면 사용할 수 없다는 단점이 잇습니다. 하지만 단 하나의 이미지로 사용한다는 간단한것이 장점입니다.
이미지가 두개인것은 너비가 유동적이여도 사용할 수 있다는 장점이 있습니다. 단점은 스타일을 입힐 요소(spna)가 하나 추가되어야 한다는 점입니다.

이미지가 두개인것의 장점을 알았다면 이것은 어느 스킨에나 활용할 수 있다는 점입니다.
먼저 준비물인 이미지가 필요하겠지요.
이미지는 디자인 리소스 - 리본 서식 3 에 있습니다.
리본 서식 3 =>  http://demun.tistory.com/2066 

html 마크업.

html 은 제가 테스트로 티스토리에서 사용하는 클래스를 한번 주어서 사용해 봤습니다.
최신글에 해당하는 recentPost 라는 클래스를 주었습니다. 사이드바에 사용하는 방식으로 접근을 했으니 활용이 가능할겁니다.
정상적인 마크업과 다른점은 h3안에 span요소가 들어갔다는 점입니다.

<div class="recentPost">
	<h3>h3 title<span></span></h3>
	<ul>
		<li><a href="#">list 1</a></li>
		<li><a href="#">list 2</a></li>
		<li><a href="#">list 3</a></li>
		<li><a href="#">list 4</a></li>
	</ul>
</div>

티스토리 스킨에 사용하는 형태의 사이드바 마크업입니다.
스타일은 recentPost 와 h3 만 적용을 했습니다. ul 아래로는 전혀 스타일을 주지 않았습니다.
스타일은 아래와 같습니다.

.recentPost { 
	position:relative; 
	width:250px; 
	margin:20px 0 0 0; 
	padding:10px; 
	background:#ccc; 
}
h3 { 
	position:relative; 
	margin:0 -30px 10px 0; 
	padding:0 0 0 40px; 
	line-height:50px; 
	background:url(images/ribbon-left-orange.png) no-repeat;
	*zoom:1; /* ie6,7 */
	color:#222;
	text-shadow:0 1px 0 #fff;
}
h3 span { 
	position:absolute; 
	right:0; 
	top:0; 
	width:20px; 
	height:60px; 
	background:url(images/ribbon-right-orange.png) no-repeat;
	*zoom:1; /* ie6,7 */
}

아래의 파일을 images 폴더와 같이 두고 브라우져로 열어보면 맨위의 이미지처럼 보일겁니다.

ribbon.html

 
 

활용하기.

여러개의 이미지를 만든것은 다양하게 활용하기 위함입니다. 하나의 색상만 가지로 사용할수 없는 경우를 대비해서 여러가지를 사용하는 방법입니다.
마크업과 스타일이 약간씩 변형이 됩니다.
먼저 마크업을 한번 보실까요?

<div class="recentPost">
	<h3 class="orange">h3 title<span></span></h3>
	<ul>
		<li><a href="#">list 1</a></li>
	</ul>
</div>

<div class="recentPost">
	<h3 class="red">h3 title<span></span></h3>
	<ul>
		<li><a href="#">list 1</a></li>
	</ul>
</div>

h3에 클래스를 준거 말고는 크게 수정되지 않았습니다.
h3에 원하는 색상만 클래스로 주면 됩니다. 다운받은 모든 이미지를 다 사용하려고 모두 스타일을 지정했습니다.
CSS 코드는 아래와 같습니다.
 
.recentPost { 
	position:relative; 
	width:250px; 
	margin:20px 0 0 0; 
	padding:10px; 
	background:#ccc; 
}
h3 { 
	position:relative; 
	margin:0 -30px 10px 0; 
	padding:0 0 0 40px; 
	line-height:50px; 
	*zoom:1; /* ie6,7 */

	/* 추가설정 */
	color:#222;
	text-shadow:0 1px 0 #fff;
}
h3 span { 
	position:absolute; 
	right:0; 
	top:0; 
	width:20px; 
	height:60px; 
	*zoom:1; /* ie6,7 */
}

.orange { background:url(images/ribbon-left-orange.png) no-repeat; }
.orange span { background:url(images/ribbon-right-orange.png) no-repeat; }

.red { background:url(images/ribbon-left-red.png) no-repeat; }
.red span { background:url(images/ribbon-right-red.png) no-repeat; }

.blue { background:url(images/ribbon-left-blue.png) no-repeat; }
.blue span { background:url(images/ribbon-right-blue.png) no-repeat; }

.gray { background:url(images/ribbon-left-gray.png) no-repeat; }
.gray span { background:url(images/ribbon-right-gray.png) no-repeat; }

.black { background:url(images/ribbon-left-black.png) no-repeat; }
.black { color:#888; }
.black span { background:url(images/ribbon-right-black.png) no-repeat; }

.green { background:url(images/ribbon-left-green.png) no-repeat; }
.green span { background:url(images/ribbon-right-green.png) no-repeat; }

한가지 추가설정이라고 표시한 부분은 스킨에 모두들 color 이 지정이 되어 있습니다.이럴때는 이 부분은 지정하지 않아도 됩니다.
한가지 유의해서 볼것은 black 은 이미지와 글씨 모두 어두운색상이라 폰트컬러만 color:#888로 따로 설정했습니다.
이런식으로 지정하면 아래처럼 보입니다. 이미지가 길어 더보기를 사용했습니다.



이런식으로 사용이 가능합니다. 잘 아시는분은 아시겠지만 이미지중에서 ribbon-left.png 는 필요이상으로 길게 만들었습니다. 
이유는 사이드바에만 사용한것이 아니라 본문에서도 사용하기 위함입니다.

사용하는 방법은 이전글중에서 티스토리 리본 제목 서식 만들기 1편을 보시면 알 수 있습니다.
즉 본문에 h요소에도 사용이 가능하고, 본문에 있는 제목요소에도 사용이 가능합니다.


개    개