생활 웹디자인

코스 전체목록

닫기

main 영역

해당 테그페이지, 해당 날짜의 날짜 페이지, 검색 결과 페이지, 각각의 타입에 따른 포스트 화면, 퍼머링크 페이지, 페이지네이션 등을 출력합니다.

plyfly.tumblr.com의 <main> ...</main> 태그 안에서 출력되고 있는 요소들을 하나하나 살펴보도록 하겠습니다.

먼저 각각의 페이지에 관련된 치환자가 있고, 포스트 타입에 따른 포스트 블럭 치환자들이 있습니다.

<main> ... </main>태그 안의 구조는 대략 다음과 같습니다.

<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">
                <!--- 포스트 타입에 따른 포스트 블럭 -->
            </section>
            <footer class="post-footer">
                <!-- 각 포스트 관련 정보 출력 -->
            </footer>
            <!-- 퍼머링크 페이지일 경우 출력할 내용 -->
        </article>
        {/block:Posts}
        <!-- 인덱스 페이지일 경우 출력할 내용 -->
    </article>
    <aside>
        {block:GroupMembers}{/block:GroupMembers}
        {block:Following}{/block:Following}
        {block:Likes}{/block:Likes}
    </aside>
</main>

댓글

댓글 본문
버전 관리
리체
현재 버전
선택 버전
graphittie 자세히 보기