New post
New Comment
Trackback
New Trackback
Link
Date2009/09/21 18:41

티스토리 스킨 만들기 (초보) - 4강. skin.html의 구조

이번 강에서는 skin.html을 파헤쳐 보겠습니다.

저번에 다운받은 크림슨에디터를 실행합시다.
아래의 skin.html을 다운받아 크림슨에디터에서 열어보아요. (Ctrl+O)
(다운로드가 잘 안되면 마우스오른쪽버튼 - 다른이름으로 대상 저장)



위의 파일은 티스토리 기본스킨의 skin.html입니다.
지금부터 소스를 한 줄 한 줄 파헤쳐 볼 텐데요
위 소스의 방대한 양에 겁먹지 마시고 지금부터의 강의를 부담 없이 차근차근 보시면 됩니다. ^^
html, css에 대해 모르시는 분들은 1강부터 차례대로 보세요.


문서의 최상단부터 봅시다.
맨 위의 한 줄은 문서타입 선언문 입니다. (이 선언문은 반드시 문서의 최상단에 위치해야 합니다.)
문서가 어떤 언어로 제작되었는지에 대한 정의라고 이해하시면 됩니다.
완벽하게 알 필요 없으니 그냥 설렁 설렁 보세요.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

이 부분은 항상 복사해서 넣으면 되므로 정확한 뜻을 알 필요는 없지만, 저처럼 호기심 많은 분들을 위해 하나씩 짚어보죠.
아래의 '더보기'를 클릭하세요.

문서정의 짚어보기 - 더보기 (호기심 많은 분만)



그 아랫줄도 마찬가지입니다. 외우거나 할 필요 없으니 그냥 가볍게 보세요.

<html xmlns="http://www.w3.org/1999/xhtml">

skin.html이 XHTML로 작성되었음을 알려주는 것입니다.
참고로 XHTML이 아닌 HTML로 작성된 문서는 <html>까지만 표기하면 됩니다.
그러나 티스토리 스킨은 XHTML 기반으로 작성된답니다.
xhtml과 html의 차이가 궁금하신 호기심 많은 분들은 네이놈 지식인 답변을 참고하시면 되겠습니다. (머리가 아파오므로 춫현하지는 않겠어요. ㅋㅋ)



지금부터는 <head>출현입니다. ^^

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="alternate" type="application/rss+xml" title="[샵샵_title_샵샵]" href="[샵샵_rss_url_샵샵]" />
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
<link rel="stylesheet" media="print" type="text/css" href="./images/print.css" />
<link rel="shortcut icon" href="[샵샵_blog_link_샵샵]favicon.ico" />
<title>[샵샵_title_샵샵] :: [샵샵_page_title_샵샵]</title>
</head>

지난 강에서 설명했듯이 <head>는 문서의 '뇌' 역할을 합니다.
아래 '더보기'를 클릭해 그냥 가볍게 읽어만 보세요.

<head>와 </head>안의 태그 설명 - 더보기




자, 그럼 지금부터 실질적인 스킨의 내용이 들어가는 <body>와 </body> 사이를 살펴볼까요?

헐.. 엄청 깁니다. 
<s_t3>와 </s_t3>안에 수 많은 <div>와 <ul>, <ol>, <li>의 향연을 볼 수가 있습니다. 더불어 복잡한 치환자들도..

그래도 조금이나마 더 간편하게 볼 수 있는 방법이 있으니, 잘 따라하세요.

크림슨에디터의 상단메뉴 View - Word Wrap 을 클릭하고, View - Line Numbers 도 클릭합니다.
차이를 보실까요?

설정 전

설정 후


자동 줄바꿈과 줄 번호 기능으로 한결 깔끔해졌군요.

<body>와 </body>안의 소스를 <head>의 경우처럼 하나씩 다 파헤치지는 않을테니, 걱정 마시고 차근차근 따라와주세요. ^^

div (레이어)

가장 많이 나오는 것이 <div>이군요. div라고 쓰고 레이어라고 부릅니다.
레이아웃(배치)에 도움을 주는 태그입니다. 상단에는 타이틀, 왼쪽에는 내용, 오른쪽에는 사이드바를 나타내고자 할 때 레이어로 나눠주는 것입니다.

skin.html의 소스를 큰 그림으로 살펴보면, container 라는 ID를 가진 레이어 안에
header 라는 ID를 가진 상단 타이틀 레이어, 
content 라는 ID를 가진 왼쪽 내용 레이어, 
sidebar 라는 ID를 가진 왼쪽 사이드바 레이어로 나뉘어 있는 것을 알 수 있을 것입니다. (아래 이미지 참조)
찾기 힘드시면 크림슨에디터의 상단메뉴 Search - Find (Ctrl+F) 를 이용해 각각의 ID명을 검색해보세요.

그런데 16번째 라인을 보니 레이어 태그 안에 ID가 아닌 CLASS라는 것이 있네요.


class는 지난 강에서도 등장한 바 있습니다.

지난 강에서 a.html 문서에서 img와 span에 class를 설정해 주고
a.css에 각 class의 속성을 지정해 주었던 게 기억 나시나요?

id도 마찬가지입니다. id의 속성 또한 class의 그것과 같이 스타일시트에서 지정해준답니다.
고로 위의 이미지에서 보이는 header와 blogMenu의 속성은 style.css에 있는 것이죠.

그렇다면 아이디와 클래스에는 어떤 차이점이 있을까요?
ID는 고유합니다. 한 문서에 header라는 아이디를 가진 레이어는 딱 하나밖에 없는 거예요.
반면에 한 문서 안의 여러 군데에 같은 class를 지정할 수 있어요.

또한 위의 이미지에서 처럼 id(header)안에 있는 class(blogMenu)는 상위 레이어의 속성이 종속되는 반면,
id는 자기만의 고집이 있어서 상위 레이어의 것을 종속받지 않죠.

css에서 속성을 나타내 줄 때도 클래스는
.blogMenu {속성값}       << 이렇게 '.'을 앞에 붙이는데, 아이디는
#header {속성값}           << 이렇게 '#'을 앞에 붙여줍니다. 




그럼 한 번 header 레이어의 내용을 살펴 봅시다.

<div id="header">
<h1><a href="[샵샵_blog_link_ 샵샵]">[샵샵_title_ 샵샵]</a></h1>
<div class="blogMenu">
<ul>
<li class="tab_localog"><a href="[샵샵_localog_link_ 샵샵]">지역로그</a></li>
<li class="tab_taglog"><a href="[샵샵_taglog_link_ 샵샵]">태그</a></li>
<li class="tab_media"><a href="[샵샵_blog_link_ 샵샵]media">미디어로그</a></li>
<li class="tab_guestbook"><a href="[샵샵_guestbook_link_ 샵샵]">방명록</a></li>
</ul>
</div>
</div>


h태그


둘째 줄의 <h1>이 뭘까요? 제목을 나타내는 태그입니다. </h1>으로 끝난 다음에는 <br />이 없이도 저절로 줄바꿈 되는 속성이 있습니다.
스타일시트에서 h1부터 h2, h3 이런 식으로 숫자를 늘려가며 속성을 지정할 수 있습니다.

예제 소스)
<h1>사랑했나봐</h1>잊을 수 없나봐<br />자꾸 생각나 견딜 수가 없어.<h3>후회하나 봐</h3>널 기다리나 봐.


예제 결과)
사랑했나봐
잊을 수 없나봐
자꾸 생각나 견딜 수가 없어.

후회하나 봐

널 기다리나 봐.


재밌지요?
그런데 <h1>과 </h1>사이에도 생소한 내용이 있군요.
<a href="[샵샵_blog_link_ 샵샵]">[샵샵_title_ 샵샵]</a> 이 무엇일까요?


a태그

a 태그는 링크를 거는 태그입니다. 역시 클래스를 지정해서 글씨체, 마우스오버시의 변화 등 속성을 지정할 수 있습니다.
<a href="주소" class="클래스명" title="마우스 갖다댔을 때 나오는 링크 설명">링크 걸릴 텍스트나 이미지</a>
위와 같이 사용합니다. 
[샵샵_blog_link_ 샵샵]는 티스토리의 블로그 주소 치환자이며 [샵샵_title_ 샵샵]은 티스토리의 블로그 제목 치환자입니다.
어렵지 않죠? ^^


리스트 태그

<ul>은 리스트 태그입니다. 그 중에서도 순번을 표시하지 않는 리스트 태그입니다.
역시나 오늘도 시간의 압박으로 리스트 태그에 대한 자세한 설명은 용의자님이 잘 정리해놓으신 포스트 링크로 대체하겠습니다. 

http://yongja.tistory.com/17  << 반드시 보아야 할 포스트!

보시면 아시겠지만, 리스트 태그는 원래 세로 정렬인데 태그나 블로그 메뉴등을 리스트로 표현할 때는
스타일시트에서 속성을 주어 가로 정렬이 되게끔 할 수 있답니다. ^^


오늘도 달렸습니다. 처음에는 약간 머리 아프셨죠? 처음 내용은 대강 대강 훑어보시고 <body>나오는 부분부터 눈여겨 보시면 됩니다.

다음 강에서는 사이드바를 스스로 만들어봅시다!


 중급자를 위한 티스토리 스킨 수정 팁 보러가기

  1. BlogIcon 지우개 Edit/DelReply
    벌써 4강이네요~ ^^ Grace* 님 잘 봤습니다.

    IE 정상적으로 나오는데, FF 에선 스크롤바가 안생기고 skin.html 가 주르륵 나와요 ㅠㅠ*
    2009/09/21 19:24
    • 2009/09/22 10:40
      오마이갓! 크롬에선 괜찮아서 별 걱정 안했는데
      파폭에서는 필드셋을 못 읽나봐요.
      저도 방금 파폭으로 보고 깜놀! ㅋㅋㅋㅋ
      수정했어여^^
  2. BlogIcon 죠스, 세상에 나오다 Edit/DelReply
    버엉-
    다음에 날 잡아서 공부해야겠습니다. ㅋㅋ
    이런 블로그는 역시 하루 아침에 되는게 아니군요. :(
    블로그에서 Grace님의 땀방울이 느껴지는 듯 해요 ㅎㅎ
    2009/09/21 21:46
    • 2009/09/22 10:43
      음.. 좀 어려운가요?
      소스, 치환자 이딴 것에 눌리지 않고
      부담없이 보면 그다지 고생스럽지 않다는 걸 알게 될 거예요.. ㅋㅋㅋ
  3. sweet_star Edit/DelReply
    잘봤습니다~~
    여전히 만드는데는 어려움이 있군요..ㅎㅎ;;
    진정 저런걸 다 일일히 작업해야하는건가요? ;;
    스킨 받아보면 엄청 명령어 많던데 그걸 어찌다 적죠 ㅠ
    노력 많이 해야겠습니다.
    혼자 스킨 수정하다가 그냥 찌그러져있다는....
    2009/09/21 19:53
    sweet_star
    • 2009/09/22 10:44
      음... 솔직히 세상에 마법처럼 짠! 하고 되는 일은 없죠;
      그래도 최대한 쉽게 알려드리려고 노력 중입니다.
      치환자같은 경우는 대부분 복사를 하지 직접 적는 경우 드물어요.
  4. BlogIcon 강짜 Edit/DelReply
    크림슨 에디터가 갈수록 사랑스러워 집니다.
    div라고 쓰고 레이어라고 부릅니다. <<웃었습니다. ㅎㅎ 개그하신게 아니라면 민망합니다. ;;
    다음강의도 기대됩니다~
    그리고..
    a태그 설명에서 주어가 빠진 문장이 있는 것 같습니다. '는'앞에요.
    아마도 치환자가 빠진거 같은데.. 본문에는 안써지나 봅니다?
    '네이놈 지식 답변' 옆에 언급하신 '춫현'? 이란 단어는 오타인가요?... 신조어이면 좌절입니다. ㅠ
    2009/09/22 03:16
    • 2009/09/22 10:46
      ㅋㅋㅋ 제 개그를 눈치채셨군요.
      '춫현'은 재미있으라고 한 건데 눈치 못 채셨네요 ㅋㅋㅋ

      치환자 빠진 것 '샵샵'으로 수정했어요.
      글 올리고 시간에 쫓겨 확인을 못 해봐서 실수들이 많았네요.
      알려주셔서 감사합니다. ^^
  5. BlogIcon cdmanii Edit/DelReply
    잘 봤습니다 ~ ㅎ 근데 파폭으로 들어왔다가 배경에 엄청난 글때문에 놀랬네요. span 으로 본문의 태그들이 안묶이고 풀린듯 싶다는 . 근데 중간에 내용중에 <title>::</title> 처럼 치환자가 본문제 직접 먹어버렸네요 .
    [샵샵_ 이렇게 해야할듯 ㅋ 근데 폴더명 오리에서 풋 했습니다 ㅎ
    2009/09/22 09:13
    • 2009/09/22 10:48
      네네 파폭에선 필드셋이 안 먹히나봐요.
      fieldset 앞으론 사용하지 말아야겠네요 흑흑.
      치환자 수정했습니다. ^^
      리플보니 갑자기 오리고기 먹고 싶네요...ㄷㄷ
  6. BlogIcon 드자이너김군 Edit/DelReply
    이야 깔끔한 설명에 이해하기 쉬운 글솜씨~ 너무 좋아요~
    너무 좋은글 잘 보았습니다. :)
    2009/09/22 13:05
  7. BlogIcon 미리누리는천국 Edit/DelReply
    .blogMenu {속성값} << 이렇게 '.'을 앞에 붙이는데, 아이디는
    #header {속성값} << 이렇게 '#'을 앞에 붙여줍니다.

    이거 정말 궁금했었거든요..감사합니다. 속이 다 시원하다는^^
    2009/09/22 15:35
    • 2009/09/22 16:12
      오오 +_+ 도움이 돼서 좋아요 ^^
    • 2010/01/12 16:55
      저도 . <<-- 점이 오탄가 생각했더랬어요..^^
  8. BlogIcon 함차가족 Edit/DelReply
    ㅋㅋ..티스토리 사용하면서 불편한점이 폰트가 많이 없다는 점인데..어떻게 안될까요..
    참..글쓰기에서 기본폰트 지정을 css에서 설정할 수 있나요
    매번 글크기와 폰트를 변경하려니 쉽지 않네요..
    2009/09/22 19:14
    • 2009/09/23 12:44
      당연히 css에서 설정할 수 있어요.
    • 2009/09/23 13:37
      연강자료 찾아봤는데..구체적인 예를 찾지 못했습니다.
      추가적인 설명 본문에 넣어주심 감사..
    • 2009/09/23 13:40
      앞으로 차근차근 다룰 내용이라 쌩뚱맞게 현재 강의의 본문에 넣지는 않겠습니다.
      스킨 수정하신 경험이 있다면 혼자서도 하실 수 있을 것 같은데,
      skin.html에서 본문의 클래스명을 찾으신 후
      style.css에서 해당 클래스에 'font-family:원하는글꼴;' 속성을 추가하세요.
    • 2009/09/23 15:49
      네..시도해보고 안되면 다시 부탁드려요 *..*
    • 2009/09/23 16:02
      죄송합니다. 티스토리에 대한 부탁을 제가 들어드릴 이유가 없는데
      이리저리 부탁이 너무 많이 와서
      아예 티스토리 스킨 제작 강의를 결심하게 된 거라서요.
      과거에 제로보드4에 대한 질문을 저한테 많이들 하시는 바람에
      속으로 앓다가 홈페이지를 폐쇄해 버린 일이 있습니다.

      폰트 종류와 크기 변경은 당연히 다룰 내용이니
      나중에 그 내용을 다룰 때 보시구요,
      개인적으로 부탁하는 것은 누구의 부탁도 앞으로 안 들어드릴 예정입니다.
    • 2009/09/23 16:06
      네네..너무 귀찮게 했네요..
      포스팅보고 그럼 제가 알고 있는 부분을 더할 수 있도록 노력하겠습니다.
      즐거운 하루되세요
  9. BlogIcon 넷물고기 Edit/DelReply
    워 .. 저도 처음에 스킨만들때 왕고생 했음 ㅎㅎ 이런정보 완전 고생하셔서 올리신 흔적이 ..
    2009/09/22 20:30
    • 2009/09/23 12:44
      저는 명색이 웹디자이너인데도
      맨 처음에 좀 삐걱댔어요. ㅋㅋㅋ
  10. BlogIcon okto Edit/DelReply
    오페라에서도 잘 나오는군요. 전부터 웹표준에 맞춰 스킨 뜯어고치리라 생각만 하고 있는데 참고자료도 없고 시간도 없고 의욕도 없네요. 그런데 그 중 하나는 Grace*님이 해결해 주실 것 같습니다ㅎㅎㅎ
    2009/09/22 21:20
    • 2009/09/23 12:45
      오페라 체감 속도가 좋죠.
      그런데 브라우저별 순위를 보면 그렇게 빠르지도 않은 것이
      참 신기함..
    • 2009/09/23 13:26
      그러게요. 브라우저 순위를 보면 거의 자바스크립트 처리속도에 비중을 많이 두는 것 같은데, 체감속도로 보면 브라우저의 속도는 한두가지 요소로 결정되는게 아닌 것 같습니다. 어서 자라칸 엔진이 나와야 이런 설움을 물리칠텐데 말입니다ㅠㅠ 속도에 있어 오페라의 최고 장점이라면, 캐쉬와 자원의 효율적인 활용이라고 생각해요. 아무리 빠른 브라우저도 탭을 수십개씩 열어놓으면 전체적으로 느려지기 마련인데 오페라는 별 차이가 없더군요. 결론은 오페라 만세~
  11. BlogIcon 몸부림 Edit/DelReply
    오오오~ 복잡했긴 하지만, 많은걸 알아갑니다! 저같은 초보에게 너무 도움이 되는듯^^
    정말 이해쉽게 쓰신글에서 정성이 느껴지는걸요~~ 용의자님 포스팅에서도 좋은 도움이 되었습니다ㅎㅎ
    빨리 배워서 제 스킨 만들어보고 싶은^^
    2009/09/22 22:25
    • 2009/09/23 12:46
      네^^ 다음강의 최대한 빨리 올리도록 할게요.
  12. BlogIcon sla Edit/DelReply
    꾸준한 업뎃과 좋은 강의 잘 듣고 갑니다~^^
    2009/09/23 00:18
  13. BlogIcon 행복박스 Edit/DelReply
    새로운것을 많이 알아갑니다.
    전 되게 단순하게 생각했는데
    이런 복잡한 구조를 갖고 있군요~
    2009/09/23 02:08
    • 2009/09/23 12:46
      큰 그림으로 보면 그리 복잡하지도 않아요. ^^
  14. BlogIcon yureka01 Edit/DelReply
    오 정말 스킨 한번 바꾸는데 아주 그냥 애를 먹었답니다..

    이렇게 좋은 정보의 블로그 완전 사랑합니다..^^

    천천히 보며 열심히 공부해야 겟습니다 ㅋㅋ감사합니다 ~~짜짠~~~
    2009/09/23 16:17
  15. BlogIcon 씩씩한강냉이 Edit/DelReply
    와우. 멋진 블로그. 멋진 강의. 브라보!
    ^ㅡ^ 감사히 보고 갑니다~~~ 또와야지!ㅋㅋ
    2009/09/23 18:30
  16. BlogIcon 아름다운시끼 Edit/DelReply
    이제서야 이렇게 좋은 블로그를 알게 되다니 좀더 일직 만났더라면
    저의 고통을 많이 줄여 주셨을꺼 같은데

    정말 너무너무 안타깝습니다만, 지금부도 많이 배우도록 하겠습니다. ^^
    너무 좋군요
    2009/09/23 23:12
    • 2009/09/24 10:49
      도움이 된다니 기뻐요 ^^
  17. BlogIcon 홍콩달팽맘 Edit/DelReply
    감사해요. 잘 보고 갑니다.
    많은 도움이 될 것 같아서 RSS등록하고 갑니다. 종종 와서 많이 보고 배워갈께요. ^^
    2009/09/24 02:42
    • 2009/09/24 10:50
      네. 감사해요^-^
      옆에 아이콘, 김밥인가요? 예뻐요 +_+
  18. BlogIcon 애용이 Edit/DelReply
    친절한 강의 감사합니다~
    슬슬 어려워지기 시작하는 것 같네요.

    괜찮으시다면 링크 걸어두고 꾸준히 들어오고 싶어요 : )

    이번 강의도 잘 보았습니다.

    제 블로그 스킨.html을 열어두고 혼자서 한번 공부해봐야 겠네요
    2009/09/30 23:47
    • 2009/10/02 16:22
      네. 멋진 스킨 만드시길 바래요. ^^
  19. First_ReSet Edit/DelReply
    강의 4개 보는데 1시간 걸렸네요 ㅎㅎ
    목이 뻐끈 해져오는 이 압박감. ㅎ
    꼭 성공해고 잡다 ㅠㅠ 나만의 스킨. ㅠ
    2009/11/16 23:19
    First_ReSet
    • 2009/11/16 23:25
      와~ 연달아 네 개나 보셨군요.
      First_ReSet님만의 멋진 스킨이 기대됩니다. ^^
  20. BlogIcon 스더맘 Edit/DelReply
    정말...진짜 고생해서 마드셨음을 알수가 있네요. 수고 많으셨어요.
    설명이 어렵다는 생각은 안드는데 머리는 뻐근.....
    머리에 담아 지지 않아서..그냥 이해만 하는 쪽으로...--;;
    돌아서는 순간..잊어버린다는...
    감사합니다.
    2010/01/12 17:15
  21. BlogIcon 버블타운 Edit/DelReply
    다른분들은 그렇저럭 이해가신다는데 전 나온 말 또 나오는구나 정도!
    이해하기라 보단 읽기 정도~~
    전 포토샵 좀 할줄알면 걍 인줄 알았는데 Html,CSS 생전 처음 접하는지라...
    티스토리 블로그 해놓고 언재 스킨을 만들지~
    한달이든 두달이든 꼭 해보겠습니다
    2010/01/14 21:22
    • 2010/01/15 09:20
      ㅎㅎ 네.. 기대할게요. ^^
  22. BlogIcon THK Edit/DelReply
    어이구.. 갑자기 어려워지네요 ㅠㅠ;;
    도데체 무슨소린지 원.. ㄷㄷㄷ
    머리가 아파옵니다...

    한가지 질문 할게염.

    <h1>사랑했나봐</h1>잊을 수 없나봐<br />자꾸 생각나 견딜 수가 없어.<h3>후회하나 봐</h3>널 기다리나 봐

    여기서 "잊을 수 없나봐" 이 문구 다음 왜 <h2>를 쓰지 않고 <by /> 를 썻으며, 그 이후에는 <h2>를 생략한체로 왜 <h3>을 쓰는건가요?
    2010/02/09 19:58
    • 2010/03/12 00:43
      자동 줄바꿈이 되는 속성을 보여드리려고 한 것입니다.

      헤드라인 태그(h1, h2, h3 ......... ) 를 번호 순서대로 쓸 필요는 없어요.
      그러므로 h2를 생략한 게 아니라 그냥 안 쓴 것 뿐이죠.
      이해가 되셨기를.
  23. kinden Edit/DelReply
    블로그 너무 예쁜 것 같아요ㅠㅠ어찌 해야 이렇게 되는 것인지ㅠㅠ

    엫,, 전 왜 이 강의를 봐도 모르겠는거죠ㅠㅠ ㅈ대충 훑어봤는데 어딜 손대야할지.. 막막하기만 하네요

    혹시 포토샵 slice tool? 맞나 암트 이런거 써서 블로그 꾸밀수도 있는건가요
    2010/03/19 19:56
    kinden
  24. 와이케이 Edit/DelReply
    끼야악
    왠지 영어가 나오면 ㄷㄷㄷ;후덜;ㅋㅋ
    잘 보았습니다.(..)
    2010/06/10 15:00
    와이케이
  25. Edit/DelReply
    비밀댓글 입니다
    2010/07/02 01:25
1 ... 21 22 23 24 25 26 27 28 29 ... 113