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

demun
티스토리/티스토리가이드
2012. 1. 27. 06:00

이번에는 이미지를 사용하지 않고 제목 서식에 사용하기 좋은 방법을 알려드리겠습니다.
이 방법은 외국 사이트에 올라온 것중에서 코드만으로 스타일을 설정하는 방법이 좋아 소개합니다.
출처는 http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-practical-css-shapes/ 입니다.

제가 일단 적용을 해봤습니다.
제 블로그 제목에 보면 이것이 설정되어 있습니다. 한번 보시죠.

이 방법의 장점은 이미지를 사용하지 않기 때문에 글씨가 길어져도 스타일이 깨지지 않고 그대로 적용할 수 있다는 점입니다.
반면 단점은 CSS 7이하는 지원되지 않는다는 점입니다. 그렇다고 해도 깨지거나 하지는 않으니 적용할만 합니다.
일단 IE6에서 어떻게 보여지는지 한번 보겠습니다.

깨지지는 않지만 리본형태의 왼쪽이 젼혀 나오지 않습니다.
마찬가지로 IE7은 어떨까요?

마찬가지로 왼쪽이 안보입니다. 이건 배경을 적용하는것이 아니라 border 로 적용하는것이라 하위 브라우져는 적용이 안됩니다.
자 이제 적용하는 방법을 알아보겠습니다.
위에서 알려준 사이트에는 제목에 해당되는 어트리뷰트가 h1 이지만 티스토리에서는 각 스킨마다 다를수 있으니 꼭 확인하고 적용하기 바랍니다.
저의 경우는 아래 이미지에 보시다시피 h2 에 적용이 되어 있습니다.

이런식으로 잘 모를경우 파이어폭스의 firebug 를 이용하세요.
이제 html을 수정해보겠습니다.

titleWrap h2 에 제목이 설정되어 있으니 아래처럼 설정하면 됩니다.

html 수정하기.

html에서 span 요소인 arrow 를 추가해줘야 합니다.

<!-- 
치환자인 티스토리 리본 제목 서식 만들기 2 를 검색하셔서 아래처럼 수정해주세요.
-->
<h2><a href="/2062">티스토리 리본 제목 서식 만들기 2</a><span class="arrow"></span></h2>

티스토리에서는 똑같은 치환자를 여러군데 사용합니다. 예를들어 공지사항, 비밀글....등에 사용하니 치환자가 있는 곳에서 h2 인지 확인하시고 전부 arrow 를 넣어주세요.

또 하나 수정해야 할곳이 있습니다.
비디오를 잘 보신분은 아시겠지만 버그가 있으니 </head>위에 아래처럼 코드를 넣어주세요.

.....
<!--[if IE]>
	<style>
		.arrow { top: 100%; }
	</style>
<![endif]-->
......
</head>

이것으로 html 수정은 끝입니다.

css 수정하기

css 편집에서 아래의 코드를 붙여넣기 해주세요.

.titleWrap h2 { 
	 background: #e3e3e3;
	 background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);
	 background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8));
	 padding:5px 20px 10px 40px;
	 margin:0 0 0 -35px;
	 position: relative;
	-moz-box-shadow: 1px 1px 3px #292929;
	-webkit-box-shadow: 1px 1px 3px #292929;
	box-shadow: 1px 1px 3px #292929;
	color: #454545;
	text-shadow: 0 1px 0 white;
}
.arrow {
	 width: 0; height: 0;
	 line-height: 0;
	 border-left: 20px solid transparent;
	 border-top: 10px solid #c8c8c8;
	 top: 104%;
	 left: 0;
	 position: absolute;
}

이제 모든것은 끝입니다. 본인의 스킨에 제목부분에 스타일을 한번 보시고 수정할것이 있다면 수정하세요.

참고

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

개 개

demun(대문블로그)