티스토리 스킨 만들기 :: 002

티스토리 스킨은 어떻게 표시될까요

티스토리 스킨을 들여다보노라면 대략 다음과 같은 부분을 발견할 수 있습니다.

<s_sidebar_element>

<!-- 블로그 이미지 모듈 -->
<div id="blogImage"><img src="https://t1.daumcdn.net/cfile/tistory/23035B3E58DB4CC12C" alt="블로그 이미지" /></div>

</s_sidebar_element>

붉은 색으로 표시된 부분은 모듈을 묶어주는 태그인 것 같습니다. 그러니까 검색 결과 페이지라면 검색 결과 페이지에 필요한 모듈만을 표시해 줄 것이고, 미디어 로그 페이지라면 미디어 로그 관련 태그로 둘러 싸이 부분의 모듈을 가져다가 표시해주는 방식이겠지요. 이렇게 하여 하나의 스킨 마크업 파일에서 블로그에서 표시되는 모든 부분을 지정하여 처리할 수 있는 것 같습니다.

보라색으로 진하게 표시된 부분은 치환자입니다. 이는 포스트마다, 페이지마다 서로 다른 값들로 치환되는 내용이라고 생각됩니다. 나머지 HTML 코드들은 아마 쓰여진 그대로 바뀌지 않고 들어가는 것 같습니다. 그럼 우리는 <s_******> </s_*******>라고 둘러진 부분을 삭제하여 없앨 수도 있고, 순서를 바꿔줄 수도 있겠지요. 치환자나 그런 것에 대한 지식이 좀 더 많았다면 새로운 기능을 조합하여 추가하거나 하는 것도 가능했을 것입니다.

어쨌든 앞서 코드 전체가 어떻게 나눠지는가를 대략적으로 살펴보면서 필요없는 구간을 삭제하고, 평소에 눈엣 가시처럼 보이던 수정하고 비공개/공개로 바꾸는 등의 메뉴가 제목 아래에 있던 것을 글 아래쪽으로 위치를 옮겼습니다. (이건 잘라내기/복사하기로;;; 아래의 박스가 그 내용입니다.) 그렇게 해서 마크업은 대략 마치면 되겠습니다. 문제는 이걸 CSS에서 어떻게 수정하느냐는 것이겠지요.

           

  <s_ad_div>
                  <div class="admin">
                      <a href="">수정</a> :
                      <a href="#" onclick="">수정(창으로)</a> |
             ()→<a href="#" onclick=""></a> |
                      <a href="#" onclick="">관련글(트랙백)</a> |
                      <a href="#" onclick="">삭제</a>
                   </div>
              </s_ad_div>