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들을 넣어서 티스토리내의 글을 읽는데까지 해보겠습니다.

 

 

 

신고