본문 바로가기

티스토리 사용법7

[티스토리] 더보기 스타일 아래 더보기를 눌러주세요. 더보기 더보기를 펼쳤을 때 나오는 내용입니다. CSS 스타일 편집을 통해 변경하였습니다. 감사합니다. 아래는 더보기 스타일에 적용한 CSS 코드입니다. /* 더보기 스타일 시작 */ .btn-toggle-moreless, .btn_more, .btn_less { background: #000; /* 버튼 배경색 */ } .btn-toggle-moreless, .btn_more, .btn_less { z-index: 1; position: relative; display: inline-block; padding: 3px 12px; /* 버튼 안쪽 패딩 */ border-radius: 24px; /* 버튼 둥근 정도 */ margin-top: 5px; color: #fff!impo.. 2023. 2. 1.
[티스토리] 코드 블럭 커스터마이징 티스토리는 타 블로그 플랫폼에 비해 코드 블럭 기능의 디자인과 가독성면에서 상대적으로 떨어진다는 평을 받습니다. 대신 티스토리는 커스터마이징의 자유도가 높은 편이기 때문에 코드 블럭 디자인에 대한 자료를 찾다가 깔끔하게 잘 정리되어 있는 글을 발견하여 링크를 그대로 첨부해봤습니다. 티스토리 코드블럭(codeblock) 커스터마이징 디자인 본 글은 티스토리 코드블럭과 관련하여, 하이라이트 적용, 폰트 수정, 열기 및 닫기 버튼 적용, 줄번호 및 줄 바꿈(스크롤) 적용, 그리고 코드블럭 부분 복사 방법 등을 다룬다. 하나하나 적용하 jinyh.tistory.com 위 블로그 내용 목차 코드 블럭 기본 사용법 플러그인 [Syntax Highlight] Highlight.js 코드 블럭에 폰트 수정 코드 블럭에.. 2022. 12. 29.
[티스토리 사용법] 제목 스타일 지정 티스토리에서 제목1, 2, 3 스타일 지정 방법 /* 글 제목1,2,3 스타일 */ .tt_article_useless_p_margin h2 { text-align: left; border-left: #517135 12px solid; border-bottom: 1px solid #517135; padding: 3px 0 10px 10px; margin: 30px 0 20px 0; } .tt_article_useless_p_margin h3 { text-align: left; border-left: #548a25 8px solid; border-bottom: 1px solid #548a25; padding: 3px 0 10px 10px; margin-bottom: 15px; } .tt_article_us.. 2022. 12. 24.
[티스토리 사용법] 목차 서식 자동 생성 & 플로팅 목차 목차 1. 목차 서식 자동 생성 1-1. jQuery TOC 플러그인 업로드 위 첨부 파일(jquery.toc.min.js) 다운 관리 페이지 > 꾸미기 > 스킨 편집 > HTML 편집 > 파일업로드 > 추가 다운 받은 자바스크립트 파일 업로드 1-2. 스크립트 적용 관리 페이지 > 꾸미기 > 스킨 편집 > HTML 편집 > HTML 탭 태그 사이에서 맨 아랫부분에 위 코드 삽입 1-3. 스타일 적용 /* 목차 스타일 */ .book-toc { position: relative; width: fit-content; border: 1px solid #b0d197; padding: 10px 20px 10px 15px; z-index: 1; } .book-toc:after { content: ""; posit.. 2022. 12. 23.
[티스토리] 마크다운 문법으로 글쓰기 개발자 블로그 티스토리 네이버 블로그 github.io velog brunch medium 2022. 12. 21.
[티스토리] 마크다운 스타일 적용 방법 티스토리에 마크다운 스타일 적용하기 최근 개발자에게 인기있는 마크다운 포맷. 심지어 블로그를 시작할 플랫폼 선정의 중요한 요인이 되기도 한답니다. 티스토리에도 마크다운 문법을 사용하는 기능이 있지만 최신 기능과 스타일이 지원되지 않는 부분이 있어 해당 스타일을 적용하는 방법에 대해 알아보겠습니다. 방법 1. HTML 태그 추가 [HTML 편집] 탭에서 태그 사이에 아래 링크를 추가해줍니다.(가급적 태그와 가깝게 해주면 좋다고 합니다) 위 markdown 링크는 2022-12 기준 최신 버전이며, 버전 업데이트 내용은 아래 링크에서 확인하실 수 있습니다. github-markdown-css - Libraries - cdnjs - The #1 free and open source CDN built to ma.. 2022. 12. 21.