이미지를 이용한 제목 서식 만들기

게시자: 대문 demun 카테고리: 티스토리/티스토리가이드 2010.12.24 06:00
이전에 간단이 서식을 만드는 방법을 알아보았습니다.
이번에는 다 사용하는 그런서식 말고 내가 만들어서 사용하는 서식 응용편입니다.
그중에서도 제목 서식을 만드는데요. 이미지를 이용하는 방법을 알아보겠습니다.

알아둘점.
  • 이미지를 업로드할때 스킨에서 업로드하는 방법
  • 이미지를 업로드할때 티스토리 글쓰기에서 업로드후 비공개로 한후 사용하는 방법
  • 서식을 지정하고 스타일을 지정할때 반드시 CSS편집창이 아닌 서식에 바로 지정한후 지정하기.
이미지를 업로드 할테니 일단 예제 이미지가 있어야겠지요. 제목에 사용할 이미지를 하나 업로드합니다.

post_title.png


자 어때요? 그냥 gif , jpg 이미지가 아닌 png 이미지입니다.이미지파일명은 post_title.png 입니다.
이미지를 사용하려면 이미지의 주소를 알아야합니다. 위의 이미지주소는 http://cfile3.uf.tistory.com/image/154F64384D0C3F30087A2A 입니다.
제가 이글을 지우지 않는한 이 주소는 변하지 않을겁니다.

글쓰기 화면에서 이미지 업로드하기

글을 작성하거나 또는 작성하지 않아도 업로드할 공간으로 티스토리 에디터를 활용합니다.
단순이 파일첨부하듯 이미지를 첨부하고 글을 저장하면 됩니다.

계속 저장할 목적으로, 또는 이미지가 많을경우 제목을 적당이 이미지업로드공간....정도로 정해주시고 비공개로 한후 저장하세요. 
그리고 계속 그곳에 다른 이미지도 같이 업로드후 사용하시면 됩니다.
  
이미지 주소를 아는 방법은 글을 저장한후 마우스 우측버튼을 클릭하시면 이미지 주소를 알수 있습니다.
또 하나의 이미지 업로드 방법은 스킨편집창에서 업로드하는 방법입니다.

티스토리 스킨 편집창에서 업로드하기

HTML/CSS 편집에서 파일업로드를 통해 업로드를 하는 방법입니다.


글쓰기 화면에서 업로드하는것과 스킨에서 업로드하는것의 차이는 이미지 주소입니다. 이점만 참고하시고 편하신대로 하세요.
제가 추천하는 방법은 하나의 글에 이미지를 업로드하시고 비공개로 전환후 사용하는  방법입니다.

이제 업로드를 했으니 스타일을 지정해보겠습니다.
하나 유념하실것은 class를 사용하되 이것도 고유해야 한다는 점입니다.
스킨에 포함된것이 아니고 서식에 계속 사용해야 하므로 중복되지 않는 class를 사용하는것입니다.

이미지를 이용한 제목 서식 만들기

에디터화면에서 다음과 같은 코드를 넣어주세요.
글쓰기 화면에서 이미지를 업로드한 경우
<!-- 제목서식 시작 -->
<style type="text/css">
.post_title_h3{
	background:url(http://cfile3.uf.tistory.com/image/154F64384D0C3F30087A2A) no-repeat left bottom;
	font-size:22px;padding:15px 0 15px 5px;
}
</style>
<div class="post_title_h3">
	제목
</div>
<!-- //제목서식 끝 -->
또는 아래처럼 지정해도 됩니다.
스킨 업로드에서 업로드한 경우
<!-- 제목서식 시작 -->
<style type="text/css">
.post_title_h3{
	background:url(./images/post_title.png) no-repeat left bottom;
	font-size:22px;
	padding:15px 0 15px 5px; //padding로 글간격을 조정할수 있습니다.
}
</style>
<div class="post_title_h3">
	제목
</div>
<!-- //제목서식 끝 -->
위처럼 html창에 체크하시고 입력후 서식으로 지정하세요.

더보기


여기서 참고할 사항은 아래와 같습니다. 제가 여러번 사용해보고 추천 드리는 겁니다.
  • 꼭 주석을 달아놓자.시작과 끝.(이는 나중에 글을 편집하거나 광고코드를 추가,삭제할때 html 편집창에서 하기 때문에 이런 주석이 필요합니다.
  • 차후 스킨을 변경하거나 할경우를 대비해서 다른 스타일을 지정하는것은 되도록 삼가하고 꼭 필요한것만 지정합니다.(글꼴이나 배경색등등을 지정할수 있지만 스킨과 어울리는지 확인이 안되므로 현재로써는 이정도만 지정하는것이 좋습니다.)
  • 이것 저것 효과를 주는것 보다는 간단이 제목이라는 정도만 알수 있게끔 스타일을 지정하는 것이 좋습니다.
위의 이미지는 png 이미지 파일입니다. 이는 IE6 에서는 회색화면으로 보일수 있습니다. 이를 해결하는 방법은 다음 포스팅을 참고하세요.

참고링크

png 이미지파일 IE6 에서 동일하게 보이게하기


신고

댓글

  1. 2012.04.27 19:55 신고 BlogIcon Yurl  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다.^^