이 블로그 글보관함(archive)을 어떻게 했는지

현재는 글보관함을 3칸으로 하지 않으니 아래 글은 이 블로그와 맞지 않다는 것을 알아두세요. 그리고 아래 글은 CSS에 대한 것이라 머리아픕니다. 왜 적었는가에 대한 이유는 바로 아래에 있습니다.

다른 블로그는 한 줄로 길게 나열되지만 이 블로그를 3칸으로 길게 나열된 것을 어떻게 했는지 묻는 질문을 두번째 받아 계속 받을 것 같아 적습니다.

글보관함의 HTML 태그

먼저 알아야 할 것이 글보관함의 HTML 태그입니다. 자신의 글보관함이나 다른 블로그의 글보관함을 보면 한 줄로 즉 세로로 길게 나열됩니다. 

아래 그림의 빨간색 사각형안의 노란색 배경 사각형을 보듯이 보통 티스토리에서 글보관함은  HTML의 UL 태그로 목록화합니다.  HTML의 UL 태그를 안다면 UL태그는  가로가 아닌 아래로 길게 세로로 목록화한다는 것도 알 것입니다. 티스토리 에디터에서 리스트(List) 아이콘은 HTM로 하면 UL 이나 OL 태그를 사용하여 목록화하는 것입니다. 참고로 UL은 숫자가 없는 것이고, OL은 숫자가 있는 것입니다. 글보관함의 경우는 숫자가 없으니 UL 태그입니다.

보통은 저장소를 영어로 archive라고 합니다. 그러니 글보관함을 영어로 archive라고 했습니다.

세로를 가로로 하기 위해 display:inline

HTML의 UL 태그는 세로로 목록화하는 것이니 가로로 하기 위해 display:inline이라는 속성을 사용합니다. 참고로 목록을 가로로 하기 위해 display:inline이나 float:left를 사용하며, float:left를 사용해서 가로 정렬하는 것에 대해서는 모릅니다. float:left로는 div,p로만 해봐서 li는 안해봐서요.

• display:inline

CSS 설정

위 그림을 보듯이 이 스킨에서 초록색 사각형 글보관함의 아이디가 archive이니 글보관함의 CSS 설정을 변경하면 됩니다. 저는 아래  그림과 같이 설정하니 3칸이 됐습니다. 참고로 모든 티스토리 스킨의 글보관함 아이디는 archive가 아니라 그 이름은 스킨 제작자가 어떻게 하는가의 마음입니다. 스킨제작자가 love라고 하면 love인 것입니다. 그러니 위 그림에서 <s_archive_rep>를 포함한 div의 아이디값이 무엇인지 보세요. 왜냐하면 <s_archive_rep>은 모든 스킨이 공통이어서 이 이름은 변경할 수 없기 때문이고 글보관함은 반드시 이 이름을 써야 하기 때문입니다. 참고로 티스토리 스킨에서 아이디나 클래스 이름은 스킨제작자의 마음대로이고, 치환자는 마음대로 할 수 없다는 것을 알아두세요.

아이콘이 나오게 하는 것이나 링크색이 변하는 것은 이 스킨의 설치하면 설정되는 것이니 설명하지 않겠습니다. 내가 만진 것만 설명했습니다. 아이콘의 설정도 수치를 변경했나....이것을 약 1년전에 한 것이라 기억이 안 나네. 이 스킨은 사이드바 링크에 아이콘이 나타납니다. 이것은 위 그림을 보면 빨간색 사각형 아래에 소스가 나왔습니다.

 

월수 설정

아래 그림을 보듯이 저는 최근 보관함에 나타날 월수를 21개월로 설정했습니다. 사이드바에 3칸 7줄이니 3*7=21개월이요. 모두 구구단을 할 줄 알 것입니다. 만약 3칸 5줄이면 15개월이겠죠. 참고로 사이드바에 나타나는 최근 보관함의 월수 설정은 관리에 들어가서 꾸미기의 화면 설정에서 화면 출력 페이지에서 합니다.

 

접었다 펴기

접었다 펴기는 아래에서 배운 것으로 단지 소스만 알면 되는 것이 아니라 티스토리에 파일올리는 것올린 파일의 URL 알기 등 많은 것을 알아야 되는 어려운 것이므로 여기에서는 설명하지 않겠습니다. 접었다 펴기에 대한 것은 아래 링크 페이지를 보기 바랍니다. 참고로 아래 페이지는 영어입니다. 위에서 접었다 펴는 것과 무관합니다.

• http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm

혹시 접었다 펴는 것 때문에 생각한다면 스크립트는 포기하세요. 우리나라 사람들은 익스플로러 7을 많이 사용하는데 예전에 익스플로러 7에서 접었다 펴는 것을 봤는데 깨졌습니다. 현재 저는 익스플로러 8을 고려하므로 익스플로러 7을 상관하지 않지만 웬만하면 스크립트는 포기하세요. 그래도 해야 겠다면 위 링크 페이지를 보고 따라 하세요.