일상/블로그 (5) 썸네일형 리스트형 [TISTORY] 티스토리 글꼴(폰트/Font) 변경 #글꼴 변경 블로그 포스트의 가독성을 높이기 위해 본문에 적용되는 폰트를 변경하는 방법을 작성하겠습니다. 총 2가지 방법이 있는데 첫 번째는 구글 웹 폰트를 이용하는 방법이고, 두 번째는 티스토리 블로그 관리 페이지에 직접 글꼴 파일을 업로드 해서 적용하는 방법입니다. #방법 1. 구글 웹 폰트 fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 위의 링크로 들어가시면 구글에서 제공하는 무료 폰트가 있습니다. 구글 웹 폰트는 반응형 웹 페이지에서 사용하기 용이하게 만들어진 폰트라서 크기, 굵기 설정이 다양한 것이 장점입니다. 상단의 메뉴들을 이용.. [TISTORY/Code Block] 티스토리 코드블럭 스크롤(Scroll) 설정 #관련 글 [TISTORY/Code Block] 티스토리 코드블럭 하이라이트(highlight.js) 테마 설정 [TISTORY/Code Block] 티스토리 코드블럭 라인넘버(line number) 설정 [TISTORY/Code Block] 티스토리 코드블럭 스크롤(Scroll) 설정 #스크롤(Scroll) 코드 블럭에 하이라이트를 설정하면 데모 사이트에서 본 디자인과 다를 수 있습니다. 티스토리의 css코드에 기본적인 스타일이 설정되어 있기 때문입니다. 가독성을 높이고 마음에 드는 스타일 설정을 위해 몇 가지 수정을 할건데 이번 글에서는 스크롤 설정을 하겠습니다. 블로그 관리 페이지 → [스킨 편집] → [CSS] 탭으로 이동해서 아래와 같은 코드를 적용합니다. code { white-space: p.. [TISTORY/Code Block] 티스토리 코드블럭 라인넘버(line number) 설정 #관련 글 [TISTORY/Code Block] 티스토리 코드블럭 하이라이트(highlight.js) 테마 설정 [TISTORY/Code Block] 티스토리 코드블럭 라인넘버(line number) 설정 [TISTORY/Code Block] 티스토리 코드블럭 스크롤(Scroll) 설정 #라인넘버(Line Number) 코드 블럭에 하이라이트를 설정하면 데모 사이트에서 본 디자인과 다를 수 있습니다. 티스토리의 css코드에 기본적으로 설정 된 코드들이 있어서 그렇습니다. 마음에 드는 디자인과 가독성을 높이기 위해 몇 가지 수정을 할 건데, 첫 번째로 라인넘버를 설정하겠습니다. github.com/wcoder/highlightjs-line-numbers.js wcoder/highlightjs-line-nu.. [TISTORY/Code Block] 티스토리 코드블럭 하이라이트(highlight.js) 테마 설정 #관련 글 [TISTORY/Code Block] 티스토리 코드블럭 하이라이트(highlight.js) 테마 설정 [TISTORY/Code Block] 티스토리 코드블럭 라인넘버(line number) 설정 [TISTORY/Code Block] 티스토리 코드블럭 스크롤(Scroll) 설정 # 코드 블럭 하이라이트 적용 블로그에서 글을 쓸 때 코드를 작성하는 경우가 있습니다. 티스토리에서 기본적으로 제공해주는 코드 블럭이 있지만 에디터에서만 하이라이트가 적용되고, 작성 후 실제 블로그에서 보면 하이라이트가 되지 않기 때문에 별로도 구현해야 합니다. 코드블럭을 설정하는 3가지 방법을 소개하겠습니다. # highlight.js 적용 방법 1 - 블로그 관리 페이지에서 적용 블로그 관리 페이지 메뉴에서 [플러그인.. [TISTORY] 티스토리 글 URL 설정 티스토리의 글 주소(URL)는 두가지로 설정할 수 있습니다. 숫자 주소: tistory.com/123 문자 주소: tistory.com/티스토리-환영합니다. 설정 방법 1. 블로그 관리 페이지에서 [관리 - 블로그]를 클릭합니다. 2. [주소 설정] 화면에서 포트 주소를 원하는 방식(숫자/문자)으로 설정 후 변경사항을 저장합니다. 참고 이미지 이전 1 다음
