생활 웹디자인

텀블러 소개

토픽 생활 웹디자인 > 테마 메뉴얼 > 텀블러 테마 만들기

텀블러는 우리가 흔히 알고있는 일반적인 블로그와 마이크로 블로그(페이스북이나 텀블러 같은)의 중간쯤이라고 생각이 됩니다. 하지만 사용하기에 따라 가벼운 블로그가 될 수도 있고, 무거운 블로그가 될 수 있을것 같습니다. 개인적으로는 스마트폰으로 찍은 사진을 그때그때 메모와 함께 온라인에 업로드 하는 용도로 많이 사용을 하고 있습니다. 또는 ifttt서비스를 이용해서 여기저기 흩어져 있는 내 SNS 글들을 모아두는 용도로도 사용하고 있습니다. (IFTTT서비스는 나중에 꼭 한번 다뤄볼께요^^)

시작하기

생성한 블로그 화면으로 이동한 후 오른쪽 상단의 "블로그 꾸미기(customize)"를 클릭합니다.
화면의 왼쪽에 사용하고 있는 스킨을 커스터마이징 할 수 있는 화면이 나옵니다.
섬네일 근처에 있는 "HTML편집(Edit HTML)"을 클릭하면 편집할 수 있는 에디터가 나옵니다.

스킨 만들기의 기본

텀블러는 아래와 같이 text, photos, links, quotes, chat, audio, and video 7가지 포스트 타입이 있습니다. 각 타입에 맞는 변수와 블럭을 이용하여 테마를 만들 수 있습니다.

그리고 테마를 만드는데 사용되는 두가지 타입의 특별한 오퍼레이터가 있는데 그것은 변수와 블럭입니다.

변수(variales)는 블로그의 타이틀이나 설명과 같은 다이나믹한 데이터를 출력하는데 사용됩니다.

<html>
    <head>
        <title>{Title}</title>
    </head>
    <body>
        ...
    </body>
</html>


블럭(blocks)은 포스트 영역과 같은 데이터 셋을 위해 HTML의 블럭을 만들어낼 뿐만 아니라 HTML블럭을 "이전페이지", "다음페이지"와 같이 조건부로 생성하기도 합니다.

<html>
    <body>
        <ol id="posts">
            {block:Posts}
                <li> ... </li>
            {/block:Posts}
        </ol>
    </body>
</html>

텀블러의 페이지들

텀블러에는 몇가지 페이지들이 있습니다. 생성된 텀블러에 처음 들어갔을 때 나오는 인덱스 페이지, 특정 태그를 클릭했을 때나오는 태그 페이지, 특정 날짜의 날짜 페이지, 검색결과 페이지, 퍼머링크 페이지등이 있습니다.

  • {block:IndexPage}{block:IndexPage} : 인덱스 페이지
  • {block:TagPage}{/block:TagPage} : 태그 페이지
  • {block:DayPage}{/block:DayPage} : 날짜 페이지
  • {block:SearchPage}{/block:SearchPage} : 검색결과 페이지
  • {block:PermalinkPage}{/block:PermalinkPage} : 퍼머링크 페이지

텀블러의 포스트 블럭들

텀블러에는 포스트 타입에 따라 블럭들이 다음과 같이 존재합니다.

  • {block:Text}{/block:Text} : 텍스트 타입 포스트
  • {block:Photo}{/block:Photo} : 사진 타입 포스트
  • {block:Photoset}{/block:Photoset} : 사진셋 타입 포스트
  • {block:Panorama}{/block:Panorama} : 파노라마 사진 타입 포스트
  • {block:Quote}{/block:block:Quote} : 인용 타입 포스트
  • {block:Link}{/block:Link} : 링크 타입 포스트
  • {block:Chat}{/block:Chat} : 대화 타입 포스트
  • {block:Audio}{/block:Audio} : 오디오 타입 포스트
  • {block:Video}{/block:Video} : 비디오 타입 포스트
  • {block:Answer}{/block:Answer} : 답변 타입 포스트
  • {block:RebloggedFrom}{/block:RebloggedFrom} : 리블로그된 포스트
  • {block:NotReblog}{/block:NotReblog} : 리블로그아닌 포스트
     

댓글

댓글 본문