Yelloze

티스토리에 여백(Margin, Padding) 적용기 인터넷 기사나 책 등 글을 읽을 때 문단과 문단 사이에 적절한 여백이 있지 않으면 한눈에 확인하기 어렵고 답답함을 느낍니다. 또한 조금 더 집중해서 문단을 구분해야 하므로 눈이 피로해지기 쉽습니다. 이처럼 글과 글 사이의 여백은 가독성 측면에서 매우 중요합니다. 티스토리에는 기본 스킨에는 제목, 문단 사이에 여백이 적용되어있습니다. 하지만 티스토리에서 공식적으로 여러 가지 스킨을 제공하고 일반 사용자가 제작한 스킨들도 사용이 가능해서 모든 스킨에 여백이 적용되어있다고 장담하기 어렵습니다. 또한 게시글을 작성할 때 선택되는 에디터의 종류에 따라서 여백이 생기기도 없어지기도 합니다. HTML에는 여러 가지 태그가 있습니다. 여기에서 제목(h1, h2, h..

티스토리에 Markdown CSS 적용기 티스토리에는 Markdown 에디터가 있기는 하지만 적용하고 있는 스킨에 따라서 여러 가지 마크업을 적절하지 못하게 표현하고 있습니다. 저는 Poster라는 스킨을 사용하고 있는데 코드와 코드 블록의 배경색이 없고 일반 단락처럼 나오고 있습니다. 전문 기술 블로그 플랫폼인 Velog는 코드와 코드 블록을 아름답게 꾸며주고 있습니다. 아래 이미지는 Tistory Poster 스킨과 Velog의 Markdown 표현 차이입니다. 몇 가지 쉬운 절차를 진행하면 티스토리 블로그도 Velog처럼 아름답게 꾸며줄 수 있습니다. Tistory Velog 0. Markdown 이란? Markdown은 일반 텍스트 기반의 경량 마크업 언어입니다. 일반 텍스트로 서식이 있는 문서를..

티스토리에 Highlight.JS 적용기 티스토리 블로그는 코드 블록이 아름답지 않습니다. 개발 블로그 플랫폼인 Velog는 Markdown 형식이 기본 에디터이며, 코드 블록의 소스들이 코드 편집기처럼 지정어, 함수, 변수 등 색이 변경되어서 가독성이 아주 아름답습니다. 하지만, 티스토리 블로그도 몇 개의 과정만 거치면 비슷하게 코드 블록을 아름답게 표현할 수 있습니다. Tistory Velog 0. Highlight.JS 란? Highlight.JS는 오픈 소스로 언어, 스타일을 원하는 데로 지정하여 코드 블록을 아름답게 표현할 수 있게 해주는 기능을 합니다. 코드 블록을 아름답게 꾸며주는 오픈 소스 중 가장 유명해서 가이드가 훌륭하고 사용하기도 쉽고 레퍼런스도 매우 많습니다. 우리는 이 훌륭한 Hi..