3. 티스토리 스킨의 뼈대 구성하기
오늘은 스킨의 뼈대를 구성해보겠습니다.
티스토리 측에서 제공한 부분을 뼈대로 해서 만들겠습니다.
먼저 제가 준비한 태그를 볼까요?
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf8" />
<title></title>
<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
<s_t3>
<div id="container">
<div id="header">
<h1>01. 블로그 제목</h1>
<div class="menu">02. 블로그 메뉴</div>
</div>
<!-- header close -->
<div id="sidebar">
</div>
<!-- sidebar close -->
<div id="content">
<div class="searchList">11. 검색 결과 리스트</div>
<div class="searchRplist">12. 검색 결과 댓글 리스트</div>
<div class="locallog">13. 위치 로그</div>
<div class="taglog">14. 태그 클라우드</div>
<div class="guestbook">15. 방명록
<div class="guestWrite">15-1. 방명록 글쓰기</div>
<div class="guestList">15-2. 방명록 리스트</div>
</div>
<!-- guestbook close -->
<div class="entryNotice">16. 공지사항 글</div>
<div class="entryProtected">17. 보호 글</div>
<div class="entry">18. 글
<div class="titleWrap">18-1. 글 제목 | 카테고리 | 작성일 | 글 관리</div>
<div class="article">18-2. 글</div>
<div class="tagTrail">18-3. 글 관련 태그</div>
<div class="actionTrail">18-4. 트랙백 | 댓글</div>
<div class="trackback">18-5. 트랙백</div>
<div class="comment">18-6. 댓글
<div class="commentList">18-6-1. 댓글 리스트</div>
<div class="commentWrite">18-6-2. 댓글 쓰기</div>
</div>
</div>
<!-- entry close -->
<div class="entry">19. 페이지</div>
</div>
<!-- content close -->
<div id="footer">
</div>
<!-- footer close -->
</div>
<!-- container close -->
</s_t3>
</body>
</html>
길죠?
현재 서브 블로그에 적용한 태그인데요.
앞으로 이것의 몇배가 될만한 양을 다룹니다.
긴장하구 계세요. ㅎㅎ
지금 이게 기본 틀인데요.
이 기본 틀을 가지고 블로그 스킨을 수정해보겠습니다.
먼저 여기서는 하나하나 떼어가면서 설명해드릴께요.
먼저 윗 부분 부터 보시죠.
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf8" />
<title></title>
<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
시작부터 </head>부분 까지입니다.
먼저 <!DOCTYPE HTML>은 HTML5를 사용하고 있다고 선언해주는겁니다.
크게 중요한 건 아니지만, 기본적으로 넣어주시는게 좋습니다.
다음은 html의 시작부분인 <html>인데요.
<html lang="ko">를 넣어주게 되면, 다른 웹에서 인식 할때 이 페이지는 한국어로 되어있다고 알 수 있습니다.
이것도 크게 중요하지 않지만, 넣어주시는게 좋습니다.
다음은 <mmeta charset="utf8" />입니다.
웹 페이지의 인코딩을 utf-8로 사용하는거죠.
이걸 적어주지 않으시면 다른 환경에서 볼 때 문자가 깨져버리는 현상이 나타납니다.
꼭 넣어주시구요.
<title></title>은 사이에 제목을 넣어주게 되면 웹 페이지 상단에 표시되게 됩니다.
왼쪽은 title에 제목을 넣지 않았을때인데요, 주소가 표시됩니다.
오른쪽은 사이에 Kurien's Blog라고 적었을 때 입니다. 주소 대신 Kurien's Blog 라고 나오게 되죠?
다음 태그는 <link rel="stylesheet" type="text/css" href="./style.css" />입니다.
./style.css에 있는 스타일 부분을 넣어주는겁니다.
위에 보시면 skin.html 바로 아래 style.css가 있죠?
그 부분을 skin.html에 넣어주는 태그입니다.
반드시 해주셔야하니 확실하게 넣어주세요.
시작부터 헤더부분까지의 설명은 이 정도구요.
<body>부분은 차근차근 알아가실텐데요.
위에 보시면 <body> 내부에 일반적인 태그에서 볼 수 없는 태그가 하나 포함되어있습니다.
바로 <s_t3></s_t3>입니다.
이 태그는 일반적인 홈페이지 구성에서 볼 수 있는게 아닌 티스토리만의 자체 태그라고 보시면 되는데요.
티스토리에서 사용하는 치환자가 있습니다.
[# #_blog_link_# #]같은 방식으로 사용하는데요.
원래는 ##처럼 붙여 사용해야 하지만, 적으면 인식해버리니 띄어서 적었습니다.
이런 치환자가 <s_t3> 태그의 내부에서만 사용이 가능합니다.
이것만 알아두시면 앞으로 스킨을 만드는데는 걱정할 것은 없겠네요.
현재 서브블로그 상태입니다.
아무것도 없지만 하나하나 채워나가야죠.
혹시라도 어려운점에 대한 질문들은 댓글에 남겨주세요^^
진행 상태는 http://kreedit.tistory.com에서 볼 수 있습니다.
'Project > 티스토리 스킨' 카테고리의 다른 글
| 5. 티스토리 스킨 만들기 제목과 메뉴 (60) | 2013.12.16 |
|---|---|
| 4. 티스토리 스킨 레이아웃 구성하기 (27) | 2013.12.13 |
| 2. 티스토리 스킨의 구조 파악하기 (18) | 2013.12.10 |
| 1. 티스토리 스킨 디자인 구상하기 (14) | 2013.12.09 |
| 티스토리 블로그 스킨을 직접 만들어보자. (21) | 2013.12.08 |