08. 티스토리 블로그 API : HTML 탬플릿을 사용하기

HTML5 UP

무료 HTML템플릿을 다운로드할 수 있는 사이트입니다. 이곳에서 HTML 템플릿의 일부만 사용하여 글을 작성하는데 사용하려고 합니다. 물론, 디자인 요소는 사용할 수 없고 문단 구성이나 사진배치같은 것만 사용합니다. 

 

 

이거! 이걸 사용할 겁니다. 큰 폰트의 제목, 작은 부제목, 사진, 그리고 설명. 과하지 않습니다.

 

파일을 다운로드해주고, generic.html 폴더를 에디터로 엽니다.

 

크롬 브라우저로 HTML 파일을 열고, F12 개발자 모드를 누릅니다. Ctrl+Shift+C를 누르면 왼쪽 페이지에서 나오는 요소들이 HTML파일의 어느 부분에 해당하는지 나옵니다.

 

<!-- Post --> 로 각주되어 있는 부분을 씁니다.

class Contents(object):
    def __init__(self,title_in_post, subtitle, period, imgSrc, paragraph1='', paragraph2=''):
        self.title_in_post = title_in_post
        self.subtitle = subtitle
        self.period = period
        self.imgSrc = imgSrc
        self.paragraph1 = paragraph1
        self.paragraph2 = paragraph2
        
    def post(self):
        return f'''
        <section class="post">
            <header class="major">
                <h1>{self.title_in_post}</h1>
                # 포스팅 안의 제목
                <p>{self.subtitle}</p>
                # 포스팅 안의 부제목
                <br />
                <span class="date">{self.period}</span>
                # 할인기간
            </header>
            <br />
            <div class="image main"><img src="{self.imgSrc}" alt="Thumb" style="max-width: 100%; height: auto"/></div>
            # 이미지
            <p>{self.paragraph1}</p>
            # 본문1
            <p>{self.paragraph2}</p>
            # 본문2
        </section>
        '''

 

HTML을 잘 쓸줄 모르다보니, 누가 써놓은거 쓰는게 편합니다만, 이렇게 보니 심각하네요. 엄청 간단한 HTML블럭인데, 이것 조차 쓸줄 몰라서 템플릿에서 긁어오다니..