본문 바로가기

자료

1. 개요 - 배워야 할 것들 - 어떻게든 뭐든 만들어보자

스킨을 만들기 전에 일단 티스토리의 스킨이 전체적으로 어떻게 움직이는지 살펴봅시다.
( 너무 뻔한 내용들을 다루고 있으니까 넘어가셔도 됩니다 - 1 )

그림 설명

그림 설명



대략 이렇습니다. 물론 정말 이런지는 저도 모르겠지만, 스킨을 만들 때 필요한건 이정도면 충분할 겁니다. 아마도요. 으으...

  1. 사용자가 블로그에 어떤 페이지를 요청합니다.
  2. 티스토리가
    skin.html (실질적 내용이 있는 문서) 와 style.css[각주:1] (디자인이 담긴 문서)
    에서
    필요한 내용을 넣고, 필요없는 내용은 빼고 해서 수정한 다음
    사용자의 웹브라우저에 파일을 보내줍니다.
    이때 티스토리가 바꿔야될 부분을 인식하는데 치환자가 사용됩니다.
    ex) [##_title_##] → 그 블로그의 이름
    ex2) 〈s_article_rep〉&〈/s_article_rep〉→ 본문이 표시되는 부분 (본문 안나올때 내용 삭제)
  3. 받아온 두개의 파일을 웹브라우저가 사용자가 볼 수 있게 해석해서 보여줍니다.
    1. 먼저 변형된 skin.html을 받습니다.
      여기에 (위의 그림에서 파란색으로 적혀있는) style.css를 불러오라는 내용이 적혀있습니다.

      물론 내용의 해석 및 표시야 당연한거구..

    2. 받아온 style.css에 적혀있는 디자인 요소를 반영해서 사용자에게 보여줍니다.


그런고로, 스킨을 만드려면 해야할 일은 skin.html과 style.css, 그러니까 웹문서를 만드는 것입니다.


계속 강조하고 있는데 지금 보고계신 페이지도 웹문서에 불과합니다!
당장 마우스 우클릭 - 소스 보기를 눌러보세요. (파이어폭스와 크롬 등에서는 Ctrl+U)
위와 굉장히 비슷한 내용이 나올겁니다.

인터넷 문서를 만들 때는 보통 내용과 디자인을 분리해서 작성합니다.

HTML 문서에는 내용을, (확장자 .htm / .html)
CSS 문서에는 디자인을 담습니다. (확장자 .css)

왜냐하면, 편의성 때문이죠.
HTML 문서는 수도없이 많은데 그 안에 일일이 디자인을 적어넣으려면 용량도 커지고 관리하기도 힘들잖아요?



이런이야기는 외도이니까 다시 원래 가던길로 돌아가죠.


이제 HTML이나 CSS 같은건 도대체 어떻게 만드는지나 알아보죠.

HTML이든 CSS이든 정해진 문법이 있고, 그에 따라 메모장이나 텍스트 편집툴에서 작성해서 확장자만 바꿔서 저장하면 됩니다. 쉽죠?[-
아닌게 아니라, 아래아한글 문서 같은거랑은 다르게 메모장으로 열어서 읽어봐도 (문법 지식만 있다면) 충분히 이해가 되거든요.

하지만 여기선 편의를 위해 (문법 강조 등의 혜택을 받기 위해) Notepad++ 설치를 권해드립니다.
다운로드 하러가기 (공식 홈페이지)[각주:2]


그러니
HTML과 CSS 를 쓸 줄 알고, 거기다가 옆에 티스토리 스킨 제작 가이드가 있다면 티스토리 스킨을 만들어낼 수 있는거겠죠.

HTML / CSS 에 대해선 다음부터 알어봅시다. 다음에 쓸게 자동으로 결정되었네요. HTML과 CSS의 기본적인 작성법이라...
  1. 스킨위자드의 사항을 반영할때 [본문으로]
  2. Ruby Blue 테마가 예쁩니다. 필수는 아니지만, 설정(T) - 스타일 환경설정... - 테마 선택 란에서 Ruby blue로 바꿔놓으면 덜 밋밋하게 하실 수 있겠죠. [본문으로]