카테고리 없음
[BLOG] Markdown 스타일로 티스토리 글 스타일 꾸미기
Abstraction
티스토리 양식 중 하나를 들고와서 뜯어고치고 있던 와중 정작 중요한 글의 가독성이 매우 떨어지는 것을 발견했다.
리스트, 헤더 등 매우 많은 서식을 하나 씩 고치면서 내 입맛에 맞게 고치려니 막막했다.
다른 방법이 없을까 찾아보니 다른 블로거 분들이 많이 사용하시는 방법으로 Github Markdown 스타일 이란게 있더라.
How to Use
사용법은 간단하다.
티스토리 관리자 페이지에서 HTML 편집을 누르고 아래와 같이 연결해주면 적용된다.
1. HTML 상단에 css 링크 추가
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css" />
2. CSS에 내용 추가
.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; }
}
3. 작성 글을 포함하는 태그 구조에 "markdown-body" class 로 감싸기
<s_permalink_article_rep>
<div class="markdown-body">
<div class="article_wrapper">
<div class="article_header">
<div class="article_category">
...
</div>
...
</div>
...
</div>
</div>
</s_permalink_article_rep>
에디터로 작성할 때 마다 HTML모드로 연결해 태그를 매번 작성해보이는게 많이 불편해보여
필자는 위와 같이 article_wrapper (본문 글 전체 박스)의 class 태그에 걸어줬다.
범위만 잘 설정해주면 html 구조 전체에 적용될 일도 없으니 이러는 편이 더 좋지 않을까?
4. 적용된 모습
맘에 들지않지만 이정도면 깔끔해졌으니 세세한 부분은 시간날 때마다 고쳐나갈 생각이다.
댓글