위와 같이 글 본문에는 나눔 스퀘어, 수식에는 기본 폰트, 코드 블럭 내부는 Fira Code 폰트를 사용하였습니다. * { font-family: 'NanumSquare', sans-serif; } .mjx-math { font-family: inherit !important; } code, code * { font-family: 'Fira Code', 'NanumSquare', sans-serif !important; /*font-family: 'D2Coding', 'NanumSquare', sans-serif !important;*/ } CSS는 위와 같이 수정하시면 됩니다. 폰트 로딩은 저는 아래 CDN들을 사용했으니 참고하실 분은 참고하시면 될 것 같습니다. 코드 에디터는 블로그 설정 > 스킨 ..

일반적인 티스토리 블로그 테마를 사용하면 [사진] [글 정보]와 같이 나열되게 되는데 좀 예쁘게 꾸밀 수 없을까? 라는 생각을 해봤습니다. 특히 Portfolio 테마는 커버로 100% 글 채우기가 가능해서 예쁜 테마라고 생각하는데, 글 목록은 좀 밋밋한 감이 있었습니다. 그래서, 예쁘게 꾸미는 방법이 없을까 하다가 코더님의 블로그를 보게 되었습니다. 밋밋하지 않고 예뻤습니다. 그래서 제 블로그에도 가져와 쓰고 싶어서 직접 구현해보았습니다. 위와 같이 글의 정보 뒤에 글의 배경 이미지가 들어가있고, 가독성을 높이기 위해 블러 처리가 된 것을 볼 수 있습니다. 코드를 짜면서 생각보다 난관이 많았습니다. 간단하게 코드 설명만 하겠습니다. 우선, 글의 정보와 대표 이미지가 겹치도록(overlay) 만들어야 합..