구조 디자인해보기

아래는 텀블러 테마 제작을 위한 샘플 텀블러입니다. 이곳의 포스팅들은 모두 텀블러가 가지고 있는 다양한 글쓰기 형태와 제공하고 있는 기능들을 테스트하기 위해 쓰여진 글들입니다.

테스트를 위해 만들어진 테마라서 다소 불필요한 정보들을 가능한한 밖으로 꺼내 놓았습니다. 아마 텀블러의 다양한 기능에 대해 알아보는데 도움이 되리라 생각됩니다. (실제 사용되는 테마는 본인에게 필요한 기능만 남기고 제거하는것이 좋습니다.)

http://plyfly.tumblr.com/
쭉~~ 한번 훑어보세요.

연습할 테마 다운로드 받기
 

그럼 위에서 다운로드 받는 html파일과 같이 1단의 심플한 테마를 만들어 보도록 하겠습니다.

큰 구조 보기

아래 구조는 꼭 정해진것이 아니라 구상한 디자인에 맞게 구조를 만들면 됩니다. 우리가 살펴볼 테마는 1단으로 크게 header영역과 footer 그리고 내용이 들어갈 main영역으로 나뉘므로 이 세 영역에 대해 다음과 같이 구조를 만들어 보았습니다.

• <header>...</header>
  블로그 제목과 네비게이션을 포함하고 있습니다.
• <main>...</main>
  각각의 포스트들을 출력하는 부분입니다.
• <footer>...</footer>
  블로그 하단 네비게이션과 카피라잇을 포함하고 있습니다.

<header>
    <h1>...</h1>
    <nav>...</nav>
</header>
<main>
    <article class="body">
        ...
        <article class="posts">
            ...
            <section class="post"></section>
            <footer class="post_footer"></footer> 
       
        </article>
        <div class="pagenation">...</div>
    </article>
    <aside>
        <div class="group">...</div>
        <div class="following">...</div>
        <div class="like">...</div>
    </aside>
</main>
<footer>
    <nav>...</nav>
    <div class="copyright">...</div>
</footer>

좀 더 세분화된 구조 보기

<main>...</main> 부분을 좀 더 자세하게 살펴보면

• {block:TagPage}{/block:TagPage} : 해당 태그와 관련된 페이지 블럭
• {block:DayPage}{/block:DayPage} : 해당 날짜와 관련된 페이지 블럭
• {block:SearchPage}{/block:SearchPage} : 검색을 했을 때 나오는 페이지 블럭
• {block:Posts}... {/block:Posts} : 텍스트, 사진, 사진셋, 사진파노라마, 인용, 링크, 대화, 오디오, 비디오, 답변, 리블로그,리블로그가 아닌 각각의 포스트 블럭
• <footer class="post-footer"></footer> : 각각의 포스트 타입에 따른 정보를 출력하는 부분
• {block:PermalinkPage}{/block:PermalinkPage} : 퍼머링크 페이지 블럭
• {block:Pagination}{/block:Pagination} : 페이지네이션 블럭
• <aside></aside> : 그외 멤버출력, 팔로잉하고 있는 블로그리스트 출력, 좋아요한 블로그 글 리스트 출력
   

<header>
    <h1>...</h1>
    <nav>...</nav>
</header>
<main>
    <article class="body">
        {block:TagPage}{/block:TagPage}
        {block:DayPage}{/block:DayPage}
        {block:SearchPage}{/block:SearchPage}
        {block:Posts}            
            <article class="posts">
                {block:Post3}{/block:Post3}   
                {block:NewDayDate}{/block:NewDayDate}
                {block:SameDayDate}{/block:SameDayDate}

                <section class="post">
                    {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}  
                </section>  
                <footer class="post-footer">
                    <section class="meta">날짜 정보</section>
                    <section class="post-controls">sns공유, 좋아요, 리블로그 버튼등</section>
                    <section class="info">{block:ContentSource}{/block:ContentSource}</section>
                    <section class="member">{block:GroupMembers}다중 사용자 일 경우 멤버 정보{/block:GroupMembers}</section>
                </footer>
                {block:PermalinkPage}
                    {block:PostNotes}{/block:PostNotes}
                    {block:Date}{block:IfDisqusShortname}{/block:IfDisqusShortname}{/block:Date}
                {/block:PermalinkPage}
            </article>
        {/block:Posts}      
        {block:IndexPage}
            {block:Pagination}{/block:Pagination}
        {/block:IndexPage}
    </article>
    <aside>
        {block:GroupMembers}{/block:GroupMembers}
        {block:Following}{/block:Following}
        {block:Likes}{/block:Likes}
    </aside>
</main>
<footer>
    <nav>
        {block:AskEnabled}{block:AskEnabled}
        {block:SubmissionsEnabled}{block:SubmissionsEnabled}
    </nav>
    <div class="copyright">...</div>
</footer>