Category
Date
2009/09/21 18:41
티스토리 스킨 만들기 (초보) - 4강. skin.html의 구조
이번 강에서는 skin.html을 파헤쳐 보겠습니다.
위 소스의 방대한 양에 겁먹지 마시고 지금부터의 강의를 부담 없이 차근차근 보시면 됩니다. ^^
html, css에 대해 모르시는 분들은 1강부터 차례대로 보세요.
문서의 최상단부터 봅시다.
중급자를 위한 티스토리 스킨 수정 팁 보러가기
저번에 다운받은 크림슨에디터를 실행합시다.
아래의 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>
<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>
<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강. 스킨의 기본, 스킨 구상
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 2강. Html,CSS 란?
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 3강. Html,CSS의 실습
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 5강. 레이아웃
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 6강. 블로그타이틀,메뉴
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 7강. 사이드바 Ⅰ
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 8강. 사이드바 Ⅱ
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 9강. 사이드바 Ⅲ
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 10강. 미디어로그, 지역로그, 태그로그
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 11강. 방명록
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 12강. 검색결과, 페이지 표시
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 13강. 포스트 내용
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 14강. 트랙백과 댓글
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 2강. Html,CSS 란?
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 3강. Html,CSS의 실습
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 5강. 레이아웃
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 6강. 블로그타이틀,메뉴
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 7강. 사이드바 Ⅰ
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 8강. 사이드바 Ⅱ
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 9강. 사이드바 Ⅲ
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 10강. 미디어로그, 지역로그, 태그로그
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 11강. 방명록
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 12강. 검색결과, 페이지 표시
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 13강. 포스트 내용
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 14강. 트랙백과 댓글
-
지우개
Edit/DelReply
벌써 4강이네요~ ^^ Grace* 님 잘 봤습니다.2009/09/21 19:24
IE 정상적으로 나오는데, FF 에선 스크롤바가 안생기고 skin.html 가 주르륵 나와요 ㅠㅠ* -
죠스, 세상에 나오다
Edit/DelReply
버엉-2009/09/21 21:46
다음에 날 잡아서 공부해야겠습니다. ㅋㅋ
이런 블로그는 역시 하루 아침에 되는게 아니군요.
블로그에서 Grace님의 땀방울이 느껴지는 듯 해요 ㅎㅎ -
sweet_star Edit/DelReply잘봤습니다~~2009/09/21 19:53
여전히 만드는데는 어려움이 있군요..ㅎㅎ;;
진정 저런걸 다 일일히 작업해야하는건가요? ;;
스킨 받아보면 엄청 명령어 많던데 그걸 어찌다 적죠 ㅠ
노력 많이 해야겠습니다.
혼자 스킨 수정하다가 그냥 찌그러져있다는....
sweet_star
-
강짜
Edit/DelReply
크림슨 에디터가 갈수록 사랑스러워 집니다.2009/09/22 03:16
div라고 쓰고 레이어라고 부릅니다. <<웃었습니다. ㅎㅎ 개그하신게 아니라면 민망합니다. ;;
다음강의도 기대됩니다~
그리고..
a태그 설명에서 주어가 빠진 문장이 있는 것 같습니다. '는'앞에요.
아마도 치환자가 빠진거 같은데.. 본문에는 안써지나 봅니다?
'네이놈 지식 답변' 옆에 언급하신 '춫현'? 이란 단어는 오타인가요?... 신조어이면 좌절입니다. ㅠ -
cdmanii
Edit/DelReply
잘 봤습니다 ~ ㅎ 근데 파폭으로 들어왔다가 배경에 엄청난 글때문에 놀랬네요. span 으로 본문의 태그들이 안묶이고 풀린듯 싶다는 . 근데 중간에 내용중에 <title>::</title> 처럼 치환자가 본문제 직접 먹어버렸네요 .2009/09/22 09:13
[샵샵_ 이렇게 해야할듯 ㅋ 근데 폴더명 오리에서 풋 했습니다 ㅎ -
-
미리누리는천국
Edit/DelReply
.blogMenu {속성값} << 이렇게 '.'을 앞에 붙이는데, 아이디는2009/09/22 15:35
#header {속성값} << 이렇게 '#'을 앞에 붙여줍니다.
이거 정말 궁금했었거든요..감사합니다. 속이 다 시원하다는^^ -
함차가족
Edit/DelReply
ㅋㅋ..티스토리 사용하면서 불편한점이 폰트가 많이 없다는 점인데..어떻게 안될까요..2009/09/22 19:14
참..글쓰기에서 기본폰트 지정을 css에서 설정할 수 있나요
매번 글크기와 폰트를 변경하려니 쉽지 않네요.. -
-
okto
Edit/DelReply
오페라에서도 잘 나오는군요. 전부터 웹표준에 맞춰 스킨 뜯어고치리라 생각만 하고 있는데 참고자료도 없고 시간도 없고 의욕도 없네요. 그런데 그 중 하나는 Grace*님이 해결해 주실 것 같습니다ㅎㅎㅎ2009/09/22 21:20 -
몸부림
Edit/DelReply
오오오~ 복잡했긴 하지만, 많은걸 알아갑니다! 저같은 초보에게 너무 도움이 되는듯^^2009/09/22 22:25
정말 이해쉽게 쓰신글에서 정성이 느껴지는걸요~~ 용의자님 포스팅에서도 좋은 도움이 되었습니다ㅎㅎ
빨리 배워서 제 스킨 만들어보고 싶은^^ -
-
-
yureka01
Edit/DelReply
오 정말 스킨 한번 바꾸는데 아주 그냥 애를 먹었답니다..2009/09/23 16:17
이렇게 좋은 정보의 블로그 완전 사랑합니다..^^
천천히 보며 열심히 공부해야 겟습니다 ㅋㅋ감사합니다 ~~짜짠~~~ -
-
아름다운시끼
Edit/DelReply
이제서야 이렇게 좋은 블로그를 알게 되다니 좀더 일직 만났더라면2009/09/23 23:12
저의 고통을 많이 줄여 주셨을꺼 같은데
정말 너무너무 안타깝습니다만, 지금부도 많이 배우도록 하겠습니다. ^^
너무 좋군요 -
홍콩달팽맘
Edit/DelReply
감사해요. 잘 보고 갑니다.2009/09/24 02:42
많은 도움이 될 것 같아서 RSS등록하고 갑니다. 종종 와서 많이 보고 배워갈께요. ^^ -
애용이
Edit/DelReply
친절한 강의 감사합니다~2009/09/30 23:47
슬슬 어려워지기 시작하는 것 같네요.
괜찮으시다면 링크 걸어두고 꾸준히 들어오고 싶어요 : )
이번 강의도 잘 보았습니다.
제 블로그 스킨.html을 열어두고 혼자서 한번 공부해봐야 겠네요 -
First_ReSet Edit/DelReply강의 4개 보는데 1시간 걸렸네요 ㅎㅎ2009/11/16 23:19
목이 뻐끈 해져오는 이 압박감. ㅎ
꼭 성공해고 잡다 ㅠㅠ 나만의 스킨. ㅠ
First_ReSet
-
스더맘
Edit/DelReply
정말...진짜 고생해서 마드셨음을 알수가 있네요. 수고 많으셨어요.2010/01/12 17:15
설명이 어렵다는 생각은 안드는데 머리는 뻐근.....
머리에 담아 지지 않아서..그냥 이해만 하는 쪽으로...
;
돌아서는 순간..잊어버린다는...
감사합니다. -
버블타운
Edit/DelReply
다른분들은 그렇저럭 이해가신다는데 전 나온 말 또 나오는구나 정도!2010/01/14 21:22
이해하기라 보단 읽기 정도~~
전 포토샵 좀 할줄알면 걍 인줄 알았는데 Html,CSS 생전 처음 접하는지라...
티스토리 블로그 해놓고 언재 스킨을 만들지~
한달이든 두달이든 꼭 해보겠습니다 -
THK
Edit/DelReply
어이구.. 갑자기 어려워지네요 ㅠㅠ;;2010/02/09 19:58
도데체 무슨소린지 원.. ㄷㄷㄷ
머리가 아파옵니다...
한가지 질문 할게염.
<h1>사랑했나봐</h1>잊을 수 없나봐<br />자꾸 생각나 견딜 수가 없어.<h3>후회하나 봐</h3>널 기다리나 봐
여기서 "잊을 수 없나봐" 이 문구 다음 왜 <h2>를 쓰지 않고 <by /> 를 썻으며, 그 이후에는 <h2>를 생략한체로 왜 <h3>을 쓰는건가요? -
kinden Edit/DelReply블로그 너무 예쁜 것 같아요ㅠㅠ어찌 해야 이렇게 되는 것인지ㅠㅠ2010/03/19 19:56
엫,, 전 왜 이 강의를 봐도 모르겠는거죠ㅠㅠ ㅈ대충 훑어봤는데 어딜 손대야할지.. 막막하기만 하네요
혹시 포토샵 slice tool? 맞나 암트 이런거 써서 블로그 꾸밀수도 있는건가요
kinden
-
와이케이
-












skin.html