github 테마 적용하여 티스토리 글쓰기
처음에는 한 게시글에 작성하려고 했던 것이 티스토리로 옮기는게 생각대로 되지 않아 글을 따로 작성하게 되었어요. 사실 첫 게시글도 Typora로 작성해 놓은지는 두 달 된 것 같은데... 옮기는걸 너무 어렵게 생각했던 것 같아요!
먼저 저는 github-markdown-css를 사용할 것입니다.
1) Github 테마 css 적용하기
1. 위의 링크를 눌러 이동해주세요!
출처는 github-markdown-css이지만, 이동하기 쉬우시도록 바로 링크를 삽입했어요.
(저는 링크는 마크다운 문법에서도 소개해드렸지만, 직접 안내를 하는 것이 필요할 때는 티스토리 링크의 기능을 사용하려고 해요. 바로 이동되는 것보다 새로운 창이 열리게 하고 싶은데, 소개해드린 문법에서는 어떻게 하는지 모르기 때문이죠..ㅎㅎ)
막 어렵게 적혀져있는 페이지가 나오실텐데요.
2. ctrl+A를 눌러서 전체선택 후 복사를 해주세요.
3.티스토리 블로그 관리에서 꾸미기 - 스킨 편집을 눌러주세요.
4. 위 이미지의 html편집-CSS로 이동해주시고, 맨 아래로 스크롤하여 전체복사한 것을 붙여넣기 해줍니다.
5. 그 후, html로 이동하여 아래 내용을 위와 같이 붙여넣기하고 저장해주세요.
<style>
.markdown-body {
box-sizing: border-box;
min-width: 200px;
max-width: 980px;
margin: 0 auto;
padding: 45px;
}
@media (max-width: 767px) {
.markdown-body {
padding: 15px;
}
}
</style>
참고로 저는 이렇게 하고 <h1> ~ <h6>태그 부분의 여백이 마음에 들지 않아 추가로 css코드의 530번째에 아래 내용을 한 줄 더 추가했습니다.
padding-bottom: 10px !important;
2) html로 typora에서 작성한 글 가져오기
이제 게시글에 테마를 적용만 하면 됩니다! 그전에 글을 html로 가져오는 방법을 알아볼게요. 간단합니다!
1. 이렇게 작성한 글을 ctrl+a를 눌러 전체선택해주세요.
2. 편집 - HTML 코드로 복사를 눌러주세요. 전체선택이 되어 있는 만큼 복사되는 것에 유의하세요!
3. 티스토리 글쓰기 화면으로 가서 글쓰기 우측상단에 HTML을 체크해주세요.
4. <aritcle> 태그를 이용해서 글의 내용 전체를 아래와 같이 감싸주셔 작성해주시면 완료!
<article class="markdown-body">
# 작성하신 게시글 내용
</article>
올리시기 전에 HTML표시를 해제하신 뒤에 확인하고 올리시는 것도 좋습니다!
글은 이제 마무리하겠습니다. 티스토리 글작성에 도움이 되었으면 좋겠습니다..! 최대한 자세하게 작성해보려고 노력했는데, 이해가 안되시는 부분이 있다면 댓글 남겨주세요:)