How to - 티스토리 스킨 만들기 (1)

Howto

 

 

How to make Tistory skin ..1

 

오늘부터 티스토리 스킨 만들기 강좌를 시작해볼까 합니다.

간단한 2단 스킨을 시작으로, 고급 애니메이션 효과까지 넣어보겠습니다.

따라하고 붙여넣기만으로 멋진 블로그 스킨을 만드는 방법을 익혀보고자 합니다.

 

 

1. 기본지식 - DIV와 CSS?

 

이 페이지를 한번쯤 눌러보시지 않은 분들은 없을거에요.

 

티스토리 사용자라면 누구나 한번쯤 자기만의 스킨을 갖고싶어 할 것입니다.

스킨가이드 페이지를 한번쯤 눌러보시지 않은 분들은 없을거에요.

스킨가이드 페이지에서, 스킨에 대한 간단한 소개가 나오고.. 가장 먼저 만나는 것이 이 그림입니다.

 

 

2단스킨의 기본적인 구조도

 

사실 우리는 지금까지 워드프로세서나 웹에디터등에서 표(table)로 레이아웃을 짜 왔지요.

그래서 웹페이지를 제작하는것의 대세가 div와 css의 조합으로 넘어온 이후에도 div와 css개념이 상당히 생소합니다.

사실 그도 그럴것이, 15년도 더된 dynamic html의 개념이 생겼을 당시의 웹브라우저는 이 표준들을 전혀 지원하지 못했습니다.

울며 겨자먹기로 표를 사용해야 했던 상황이었지요.

사실, 워드프로세서 등에서 레이아웃을 짜는데 있어서 표는 편리한 수단입니다. 그런데 왜 울며 겨자먹기라 하느냐 하면, html에서의 표 지원은 그리 훌륭하지 않기 때문입니다.

 

어쨌든, 가장 먼저 알아야 할 것은 이 div와 css의 개념입니다.

div는 레고 블럭 한조각이라고 생각하시면 됩니다. html에 우리는 div라는 레고 조각들을 배치합니다.

그리고 css에서는 그것에 규칙을 주어 조립하지요.

 

즉, html은 각 레고 조각들이고, css는 조립 설명서입니다. 조립하는사람은 컴퓨터이고요.

백문이 불여일견이라고, 한번 만들어보면서 설명하겠습니다.

 

2. 레이아웃 직접 짜보기

 

 

위 코드를 봐주세요. 우리가 만들 스킨의 html인 skin.html의 소스입니다.

 

 

그리고 이것이 실제로 우리가 사용할 부분이고요. skin.html을 만들어서 브라우저로 봐도 지금은 아무것도 보이지 않습니다.

블록을 만들었으니, 이젠 설계도를 만들 차례입니다.

이제 이것을 배치하고 테두리를 씌워서 실제로 보이게 만들어 보겠습니다.

 

(여기가  style.css를 적용시키는 부분입니다.)

 

새 텍스트 문서를 열어서 다음과 같은 코드를 넣고 style.css로 skin.html과 같은 폴더에 저장해주세요.

 

 

이제 skin.html을 다시 열면 이런 모양이 됩니다. (구분을 위해 일부러 글자를 넣었습니다.)

 

 

html에 우리가 div라는 블록을 만들었다면,  css(스타일시트)라는 설명서를 통해 이렇게 조립하고 모양을 넣은것입니다.

예를 들어 #container (div 이름)의 경우,

 

clear : both; -> 위치(정렬)을 줄넘김시킴

width : 504px; -> 가로 길이를 504픽셀로

border : 1px solid #000; -> 테두리를 1픽셀, 실선, 검정식으로

 

이런 규칙이 적용되어 있습니다.

content에는 이런 규칙이 있고요.

 

float left;                             -> 위치를 왼쪽기준으로 정렬

width 350px;                     -> 가로 길이를 350픽셀로 고정

border : 1px solid #000;   -> 테두리를 1픽셀, 실선, 검정색으로

 

 

어떻게.. 이제 좀 슬슬 이해가 가시는지 모르겠네요.

다음시간에는 이렇게 배치한 div안에 또 다른 div들을 넣어서 티스토리내의 글을 읽는데까지 해보겠습니다.

 

 

 

2010.07.23 23:53 URL EDIT REPLY
비밀댓글입니다
BlogIcon 고양이와 참치 | 2010.07.24 07:41 신고 URL EDIT
감사합니다~ 수정했습니다!
BlogIcon juo 2010.07.24 10:57 신고 URL EDIT REPLY
좋은 글 많이 주세요^^
반가운 분을 만났군요. 스킨에 관심이 많아서요 ^^
BlogIcon 양갱좋아 2011.11.20 08:56 신고 URL EDIT REPLY
2는 만드시지 않는 건가요? ㅠㅠ 1만 봤지만 많은 도움이 되었어요!
BlogIcon 고양이와 참치 | 2011.11.23 10:16 신고 URL EDIT
당분간은 힘들것같아요 갑자기 일이 많아져서..
BlogIcon 킥스 2011.12.20 13:38 신고 URL EDIT REPLY
좋은글 감사합니다 ^^
2013.01.28 14:23 URL EDIT REPLY
비밀댓글입니다
BlogIcon 홍홍2 2013.02.16 02:24 신고 URL EDIT REPLY
잘보고 갑니다~많이배우네요^^
BlogIcon 89TR 2014.07.21 09:33 신고 URL EDIT REPLY
티스토리 이제막 시작한 생초짜인데
오늘부터 이블로그에서 살것같네요 ^.^ 유용한 정보 감사합니다
BlogIcon Cacka Imae 2016.05.26 08:36 신고 URL EDIT REPLY
http://roachsblog.tistory.com/ 이블로그 처렴 스킨 직접만들고싶는데

http://roachsblog.tistory.com/guestbook <- 위보고 방명록 :: 바퀴의 블로그 이런식어캐해요

Category Notice Guestbook 이거어캐해요
Name
Password
Homepage
Secret