티스토리 블로그 스킨변경시 도움이 되었던 사이트 모음 총정리

無에서 有로.....ㅎㅎ 티스토리를 본격적으로 할 겸해서 티스토리 블로그 스킨을 변경할려고 했는데 아무것도 모르는 어디부터 무엇을 할 지 몰라서 요기 저기를 변경할 때마다 모르는 것 투성이었습니다. 빨리 멋지게? 변경하고 싶은데 자꾸 막히니깐 슬슬 짜증도 나더라구요. ^^ 그런데 지금에 와서 보니 블로그 스킨을 처음부터 만들지 않는다면 아래의 지식으로 아니 따라 하는 것만으로도 이미 공개되어 있는 스킨을 변경 할 수 있었습니다. 스킨변경!!! 할 수 있습니다. ^^

겹쳐지는 이미지들의 보여지는 순서를 정할 수 있는 z-index에 대해서

링크 1
링크 2

이미지 로딩이 필요없는 마우스오버 버튼 만들기

마우스 오버시 이미지를 바꾸는 방법으로 두개의 이미지(원래이미지, 바뀌는 이미지)를 각각 준비하여 아래와 같이 코딩하는 방법이 있어 처음에는 그렇게 하였습니다. 하지만 링크가 걸린 이미지 위에 마우스를 가져다 놓을 경우(마우스 오버) 제일 처음에 한번 바뀌는 이미지를 다운로드하여 표시해 주니 아주 약간의 늦은 반응이 보였습니다.

【두개의 이미지를 준비하는 방법】
<a href="주소" onclick="window.open(this.href); return false">
<img src="원래이미지" onmouseover="this.src='바뀌는 이미지';" onmouseout="this.src='원래이미지';"border="0" />
</a>

하지만 아래와 같이 이미지를 하나로 해 놓으면 처음 접속시 이미지가 다운로드 되어 마우스오버가 되었을 때 바로 다른 이미지로 보여집니다. 보여지는 위치를 바꾸는 원리인데 자세한 것은 아래의 링크에 가면 쉽게 자세히 설명되어 있습니다.  옆의 따라 다니는 메뉴에 마우스포인터를 올려 놓으면 회색에서 검정색으로 변하는 것에 적용하였습니다.
링크

배경이미지의 위치를 변경하기

링크

링크에 이미지표시를 달자

링크가 걸려 있으면 아래와 같이 링크이미지가 달려서 링크가 되어 있는지 쉽게 알 수 있습니다.
링크

트위터의 리트윗(retweet) 버튼 넣는 방법

링크

링크에 밑줄을 안보이게 하기

링크에 밑줄이 그어져 있으면 가독성이 떨어지는 것 같아서 밑줄을 안보에게 하였습니다.
링크

마우스오버 메뉴 만들기

예전 스킨에서 적용했었는데 메뉴가 참 간결한게 예쁩니다. 설명이 잘되어 있어 따라 하기만 하면 됩니다.
링크

스크롤바를 따라다니는 추천버튼, 공유버튼 레이어 박스 만들기

오른쪽에 스크롤 하면 상하로 따라다니는 것 있죠. 이것을 만들 수 있습니다.

링크 1
링크 2

드롭다운 메뉴 만들기

화면의 상단에 드롭다운메뉴를 달아 놓고 카테고리를 안보이게 하면 전체적으로 깔끔하게 보이는 것 같습니다.

링크

위치조정에 대해서

블로그의 각각의 요소를 원하는 위치에 배치할 수 있습니다.
링크

링크에 대해서... link, hover, visited등의 글자 모양 설정

링크가 걸린 글자의 색을 지정하고 링크가 걸린 글자 위에 마우스를 올려 놓았을 때 글자색을 바꾼다던가 사각형 박스형태로 보여지게 한다던가를 할 수 있습니다.
링크

페이스북의 "좋아요" 버튼을 넣고 싶을 때

링크

class와 id

class와 id의 속성에 대해서는 반드시 이해하여야 블로그를 마음데로 꾸밀 수 있습니다. 꼭 이해하세요. 어렵지 않아요. ^^
링크

li태그로 메뉴를 가로로 배열하기.

li태그를 사용하여 메뉴를 만들면 기본적으로 세로로 배열이 됩니다. 이것을 가로로 배열하는 방법입니다.
링크 1

링크 2

나만의 파비콘을 만들기.

관심있는 사이트를 즐겨찾기 해 두면 사이트이름의 왼쪽에 아이콘이 있죠? 그것을 파비콘이라고 합니다. 한번 만들어 봤습니다. ^^

파비콘(favicon)을 만들어 주는 사이트를 참조하세요.