이번에 tistory에서 마크다운 에디터 기능을 새로 내놓았습니다.
예전에 한번씩 블로그를 써왔지만 마크다운 기능이 아쉬워 많이 쓰지는 않았습니다.
매번 마크다운으로 쓴 글을 html로 옮기는 것이 참 힘들었었는데요.
이번에 마크다운 지원이 되면서 한번 사용해 보기로 했습니다.
1. github markdown css
먼저 github markdown 스타일을 설정하기 위해 css파일을 받아보겠습니다.
아래의 링크로 가셔서 github-markdown.css 파일을 찾아보겠습니다.
https://github.com/sindresorhus/github-markdown-css
2. tistory 스킨 변경
티스토리는 여러가지 무료 스킨을 제공하고 있습니다.
저는 그중에서 square 스킨을 사용하였습니다.
아래 주소로 가서 자신이 원하는 스킨을 사용할 수도 있지만 여기서는 square 스킨을 사용하겠습니다.
https://자신의 블로그 주소/manage/design/skin#3. 스타일 바꾸기
이번에는 github-markdown.css를 사용하여 본문의 스타일을 마크다운 형식으로 만들어 보겠습니다.
- 먼저 관리페이지에서
꾸미기 - 스킨편집탭으로 가보겠습니다. - 오른쪽 상단에
html 편집버튼을 클릭합니다. - 상단에
css탭을 클릭합니다. github-markdown.css의 본문에서.markdown-body를.entry로 바꾸기- tistory의 css 탭 안에서
/* entry */부분을 찾아내어 하위에.entry로 시작하는 코드를 지웁니다. - 그자리를
github-markdown.css에서.markdown-body를 복사한 내역을 복사하여 붙혀 넣습니다.
4. 스타일 추가 (2020. 5. 3)
기존의 마크다운 스타일에서 조금 변화를 주고자 몇가지 스타일을 바꿨습니다. 개인적으로 github으로 만든 github.io 스타일을 좋아합니다. 그 중에 몇가지 특징을 찾아서 한번 적용해 보았습니다.
4-1. 폰트
폰트는 Merriweather, sans-serif를 사용했습니다. Merriweather는 기본적으로 영문과 숫자에 대한 폰트를 지원해줍니다. 그 외 한글을 sans-serif를 적용하도록 해주었습니다. 사실 폰트만 잘 사용해도 디자인은 잘 살릴 수 있다고 생각합니다.
변경 전
변경 후
4-2. 문자 간격, 줄 간격
css 어트리뷰트 중 letter-spacing과 line-height가 있습니다. letter-spacing은 값이 작을 수록 문자 간격이 좁아지고 클 수록 간격이 넓어집니다. 개인적으로 간격이 좁을 수록 내용에 집중할 수 있게 해준다고 생각됩니다. line-height는 순수한 숫자값으로 숫자가 커질 수록 간격이 넓어지게 됩니다.
문자 간격 변경 전
문자 간격 변경 후
마무리
- css 탭에서 모든 스타일을 편집 할 수 있습니다.
많은 글에서 파일업로드에서github-markdown.css파일을 올린 후 html에서 많이 추가하셨는데, 저는 그렇게 하니까 괜히 파일을 여러개 관리해야해서 번거로웠습니다. 그래서 css에서 바로 수정하여 한번에 관리할 수 있도록 하였습니다. - 스킨마다 각각의 css 태그이름이 다릅니다.
square스킨의 경우 본문은.entry라는 이름으로 모든 태그가 시작됩니다.
그래서github-markdown.css의 모든 파일에서.markdown-body를.entry로 바꿔줘야 합니다. - CSS는 순서가 중요합니다.
.entry h2 { }
.entry h2,
.entry h3 { }아래 코드는 위의 코드의 영향을 모두 받습니다. 그래서 위의 코드를 근복적으로 변경하셔야 하위의 스타일을 모두 적용합니다. 제가 사용한 square 스킨은 중복되는 css코드가 꽤 많았었는데요 순서를 잘 묶어서 정리하시는 것이 중요한 것 같습니다.
