티스토리 뷰


벌써 티스토리 반응형스킨 제작기 시리즈의 네번째 포스팅이네요. 시리즈명 앞에 "좌충우돌"이라는 단어를 붙여야 할까봐요. ㅋㅋ 지난 시간에 HTML과 CSS로 처음에 우리가 디자인한 레이아웃을 만들어봤는데요. 일반적인 홈페이지를 만들땐, 이렇게 Brackets 프로그램이나 기타 웹디자인 프로그램으로 레이아웃을 짜나가면 되는데, 티스토리는 조금 어려운 점이 있더군요. 그 이유는 바로 티스토리에서 제공하는 치환자 때문인데요. 의 형태로 구성된, 티스토리에서 제공하는 변수 같은거라고 이해하시면 되요. 암튼, 이 치환자라는 녀석 때문에, 그리고 하나의 HTML파일에 모든 페이지를 구성해야한다는 특이성때문에 티스토리 스킨을 만드는 작업은 블로그 관리자 페이지의 HTML/CSS 편집 기능을 이용해야 되겠더라구요.

그래도 그간의 작업들이 헛된건 아닐꺼라 굳게 믿으며, 오늘의 포스팅을 시작해 볼게요. ^^;;


티스토리 스킨제작 순서


티스토리에서는 저와같이 직접 스킨을 제작하고자 하는 사람들을 위해서, 스킨 가이드 라는 도움말을 제공하고 있습니다. 우선 스킨가이드 링크부터 투척! ^^

이 스킨가이드에 따르면, 티스토리 스킨 제작은 다음과 같은 순서로 진행하라고 조언하고 있습니다.

1번 "디자인 구상하기"는 지난 포스팅에서 이미 했던 내용이죠? 디자인 구상은 스킨제작 중간중간에 지속적으로 변경될테니 일단 기본적인 레이아웃만 진행하고 넘어가요. 이어서, 2번 "스킨 구조 만들기"와 3번 "치환자 활용하기"는 크게 분류하면 HTML 편집과정에 속할꺼구요. 4번 "디자인 적용하기"와 5번 "스킨위자드 적용하기" 과정은 CSS 편집과정이라고 볼 수 있을꺼예요.

정리해보자면, 우선 레이아웃을 구상하고, 이를 HTML로 스타일 무시하고 일단 기능 및 화면 위주로 모두 배치합니다. 이때, 치환자까지 적절히 사용해서 HTML을 작성합니다. 그 다음, CSS를 편집해가면서 HTML에 스타일을 입혀줍니다.

추가적으로, 내가 만든 스킨을 티스토리의 스킨위자드가 적용되도록 만들고 싶을땐, 스킨가이드를 참조해서 CSS를 수정해주면, 스킨위자드가 적용가능한 스킨이 완성됩니다.

티스토리 스킨가이드에서 조언하는 스킨 제작 과정을 살펴보았으니, 본격적으로 HTML 기본구성을 하러 가볼까요?


티스토리 스킨 - 기본 HTML 마크업 구성


우선 티스토리 스킨가이드의 스킨구조에 대한 설명을 살펴볼까요?

스킨가이드에서 설명하고있는 스킨을 보면, 제가 처음 스킨 레이아웃 디자인할때와 같이 2단구성이예요. 하지만 지금 단계에서 눈여겨봐야하는 부분은, "레이아웃 배치"가 아니라 "어떤 항목들이 표현되어야 하느냐" 입니다. 앞서도 말씀드렸듯이, 현재 단계에서는 스킨에 스타일을 입힐게 아니라 스킨에 포함되어야 할 항목들을 HTML로 모두 채워놓기만 할꺼거든요. 스타일은 그 이후에... ^^

스킨가이드에 따르면, 기본적인 HTML 구조는 이렇습니다. (참고로, <body> 테그 안의 내용입니다.)


skin.html step 1 structured

<div id="container">
  <div id="header"></div> <!-- header close -->
  <div id="content"></div> <!-- content close -->
  <div id="sidebar"></div> <!-- sidebar close -->
  <div id="footer"></div> <!-- footer close -->
</div> <!-- container close -->

이렇게 아주 기초적인 구조는 container가 header와 content, sidebar, footer를 감싸는 형태로 구성되어있습니다. container 안의 네가지 <div>들은 이름만 봐도 기능을 알 수 있을테니, 설명은 생략하구요. container에 대해서 설명 드리자면, 블로그의 레이아웃 디자인을 위한 레이어라고 할 수 있습니다. 즉, 디자인을 위해서 필요한 요소이기 때문에 생략해도 무방하다는 말이죠.

우리는 우선 스킨제작에 꼭 필요한 요소들부터 구성할 예정이기 때문에, container는 일단 제외시키겠습니다. 대신, 스킨 내에서 javascript를 사용할 수 있게 하기위한 <s_t3> 태그로 전체 레이아웃을 감싸겠습니다.

그리고, 가급적 <div> 태그 대신 시멘틱 태그를 사용하도록 하겠습니다. 시멘틱 태그 란, 해당영역이 어떤 내용일지를 짐작케하는 단어로 이루어진 태그를 말합니다. 예를 들어 헤더 영역은 <div> 태그 대신 <header> 라는 태그를 사용하는 것이죠. 이렇게 시멘틱 태그를 사용하면, 검색 엔진에서 해당 사이트의 내용을 분석할 때 유익합니다. <s_t3> 치환자와 시멘틱 태그를 이용해서 위의 html을 수정하면 다음과 같습니다.


티스토리 치환자와 시멘틱 태그 사용

<s_t3>
  <header id="header">HEADER</header> <!-- header close -->
  <article id="content">CONTENT</article> <!-- content close -->
  <aside id="sidebar">SIDEBAR</aside> <!-- sidebar close -->
  <footer id="footer">FOOTER</footer> <!-- footer close -->
</s_t3> <!-- s_t3 close -->

이렇게 수정을 하면, 좀더 코드를 보기 편해졌다는 느낌이 들지 않으세요? ^^ <header> 태그를 보면, 굳이 id 속성까지 보지 않더라도 "아~ 여기가 header구나" 라고 직관적으로 알 수 있죠. 그리고 전체 레이아웃을 <s_t3>로 감싸서, javascript가 적용될 수 있는 영역으로 설정하였습니다.

티스토리에서는 <s_t3> 치환자 이외에도, 다양한 기능을 담당하는 치환자들이 존재합니다. 앞으로 이들 치환자가 하나 둘 등장할텐데요. 가급적 이해가 쉽도록 잘 설명해 볼게요. ^^


Epilogue


오늘은 티스토리 스킨가이드를 참고하여, 매우 기본적인 레이아웃 틀을 잡고, 이를 티스토리 치환자 <s_t3>와 시멘틱 태그로 구성하는 과정까지 진행하였습니다. 다음 시간엔, header와 article, aside, footer 등에 포함되어야 할 티스토리의 요소들을 배치시키고, 실제로 티스토리 "HTML/CSS 편집" 메뉴를 이용해서, 실제로 스킨을 수정하는 과정을 진행해 볼게요.

오늘도 긴 글 읽으시느라 수고하셨습니다. ^^


친구와 함께보기

트위터

페이스북

구글+

카스

네이버

밴드

카카오톡

라인