Intelligent Robot

Tistory 스킨 수정사항 저장 및 불러오기 티스토리의 스킨의 HTML, CSS를 수정하고, 그에 대한 변경사항을 저장하고, 필요할 때 바로 불러오는 기능에 대해 알아봅시다. 1. 사용중인 스킨 저장하기 1) 블로그 관리 2) 꾸미기 - 스킨 변경 3) 스킨 목록 - 스킨 보관함 4) 현재 사용중인 스킨 보관 5) 스킨명 설정 6) 저장 확인 2. 저장한 스킨 불러오기 저장한 스킨에 마우스를 올리고 적용 클릭

Tistory 코드블록 Scroll 설정 Tistory에서 코드가 길어짐에 따라 줄바꿈이 되어 가독성을 해치는 경우가 있다. 이러한 경우 아래와 같이 Scroll을 생성하여 가독성 높이는 방법을 알아본다. 1. 편집 메뉴로 이동 1) 티스토리 관리 2) 꾸미기 - 스킨 편집 3) html 편집 4) CSS 선택 3. CSS 소스 코드 편집 CSS 제일 밑에 아래와 같은 코드를 추가 입력합니다. code { white-space: pre; max-width: 800px; max-height: 600px; overflow: auto !important; } white-space: pre; 는 공백을 처리하며 pre는 공백을 그대로 표시한다는 뜻입니다. max-width: 800px; max-height: 6..

Tistory 자동 목차(TOC) 적용하기 0. 개요 1) TOC 이번에는 아래의 그림과 같이 본문 옆에 위치하여 소제목 목차를 누르면 자동으로 이동하는 기능을 블로그에 적용하겠습니다. 이를 Table of Contents (TOC)라고 부르며, 이번에 적용할 TOC의 UI는 아래와 같습니다. 2) 사용법 Tistroy의 글을 쓸 때, 아래 그림과 같이 본문과 제목을 설정하여 주는데, 제목1, 제목2, 제목3을 인식하여 자동으로 목차를 만들어 줍니다. 그리고 글이 본문 글만 있을 경우 TOC이 보이지 않습니다. 3) 수정사항 기존 코드는 제목1, 2만 작동하는 문제가 있었습니다. 이유는 아래 그림과 같이 티스토리 글을 마크다운 변환하면 제목1 - h2 제목2 - h3 제목3 - h4에 대응됨을 알게 되었..

Tistory 메뉴/본문 너비(폭) 조절 현재 제가 사용하고 있는 Tistory의 Odyssey 스킨을 사용하고 있습니다. 기존의 너비는 조금 답답한 느낌이 있어서 이에 대한 메뉴/본문 너비를 넓히는 방법을 알아봅시다. 1. 편집 메뉴로 이동 1) 티스토리 관리 2) 꾸미기 - 스킨 변경 option) 만약 다른 스킨을 사용한다면 Odyssey 스킨을 적용한다 ※ 다른 스킨에 대한 테스트는 진행되지 않아 다를 수도 있습니다. 3) 편집 4) html 편집 5) CSS 선택 2. CSS 편집 1) ctrl + F 누르기 2) .area-main 입력 후 Enter 3) 빨간 밑줄 친 위치에 원하는 값으로 수정 저의 경우 800px으로 수정 .main은 본문 + 메뉴 폭을, .area-main은 본문의 폭을..