정보127

• 

  티스토리 목차 완전 자동으로 생성하기 (서식 저장 불필요) 이번에는 서식에서 목차 태그를 끼워 넣는 것 조차 귀찮은 분들에게 추천드리는 방법입니다. 다만 목차는 항상 글 맨 상단에 위치하도록 해야한다는 제약이 있습니다. 필요에 따라 글 시작 후 중간부터 목차를 넣어야 하는 분이 아니라면 큰 문제는 아니라고 봅니다. 목차 기존 목차 기능 적용하기 필요한 라이브러리 및 자바스크립트, CSS 코드는 아래 글에서 이미 다루었으니 새로 작성하지 않고 링크로 대체 하겠습니다. 티스토리 글에 자동으로 목차 넣기 티스토리 글에 자동으로 목차 넣기 목차를 넣고 싶긴한데 글 쓸 때마다 매번 수작업으로 만든다면 상당히 번거롭겠죠. 그래서 jQuery 플러그인 Table of Contents(TOC)를 이용하여 자동으로 넣는 방법을 소개합니다. 저는 제목1, 제목2로 sangmine.. 정보/블로그 운영팁 2021. 2. 27.

• 

  티스토리 스크롤 자연스럽게 이동하기 목차를 누르면 너무 딱딱하게 이동하는 모습이 그다지 마음에 들지 않아서 수정해 보았습니다. 목차 CSS 수정하는 방법 가장 간단하지만 최신 브라우저가 아니면 적용이 되지 않을 수 있고 브라우저 설정에 따라 액션이 달라질 수 있으므로 아직은 완전한 방법이 될 수 없을 것 같습니다. 그래도 간단히 적용하고 싶으신 분들은 하셔도 괜찮아 보입니다. 참고로 고래스킨은 이 방법을 이용하였습니다. 관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다. html 편집을 클릭합니다. 그럼 다음과 같은 HTML 에디터가 뜨는데 CSS 탭으로 이동하여 작업을 해 보겠습니다. 간단하게 다음과 같이 입력만 하면 됩니다. html { scroll-behavior: smooth; } 다음은 브라우저별 호환성을 나타낸 표입니다. j.. 정보/블로그 운영팁 2021. 2. 24.

• 

  북 클럽 스킨 상단 글 제목 배경 이미지 제거 및 스타일 변경하기 북 클럽 스킨이 인기가 많은데 은근히 글 제목 스타일을 바꾸고 싶어하시는 분이 많으셔서 정리 좀 해 보았습니다. 목차 글 제목 이미지 제거하기 먼저 이미지를 나오지 않게 하기 위한 작업을 진행해 보겠습니다. 관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다. html 편집을 클릭합니다. 그럼 위외 같은 HTML 에디터가 뜨는데 여기에서 작업을 해 보겠습니다. CTRL+F를 눌러 s_permalink_article_rep 태그를 찾고 그 하위에 있는 부분을 삭제하거나 아래와 같이 주석처리 합니다. 그리고 그 밑에 를 새로 작성합니다. 그럼 더 이상 이미지는 나오지 않게 됩니다. CSS 수정도 좀 더 해보겠습니다. 관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 > CSS 탭으로 이동합니다. 마찬.. 정보/블로그 운영팁 2021. 2. 22.

• 

  티스토리 공감 클릭 시 고마움 표시하기 공감을 눌러 주신 분들께 감사한 마음을 전달하고자 생각한 방법입니다. 복잡하지 않은 내용이므로 쉽게 따라 하실 수 있습니다. 목차 토스트 기능 만들기 사실 토스트 기능을 좀 더 전파하고 싶어서 작성한 글입니다. 토스트 기능을 먼저 적용하셔야 이어서 진행이 가능합니다. 아래 포스팅 참고 하시기 바랍니다. 티스토리 토스트 알림 팝업 기능 만들기 티스토리 토스트 알림 팝업 기능 만들기 클립보드 내용 복사 완료 문구를 단순하게 alert 창을 이용하여 띄웠더니 너무 없어 보여서 간단하게 구현하였습니다. 목차 HTML 작성 관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다. html 편집 sangminem.tistory.com 클릭 이벤트 작성하기 관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다. htm.. 정보/블로그 운영팁 2021. 2. 22.

• 

  티스토리 목차 링크 클립보드 복사하기 목차를 클릭하면 해당위치로 바로 가는 기능까지는 지원이 되어 문제가 없는데, 문득 목차 링크를 클릭 한번으로 복사 가능하면 좋을 것 같다는 생각이 들어서 개발하게 되었습니다. 목차 작업 위치 관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다. html 편집을 클릭합니다. 그럼 위외 같은 HTML 에디터가 뜨는데 여기에서 작업을 해 보겠습니다. body 태그 안쪽 제일 하단 script 태그 안에 붙여넣기 하시면 됩니다. 링크 복사 아이콘 생성 제목 오른쪽에 링크 복사 아이콘을 삽입하는 함수입니다. function makeClipboardLink() { var tocLink = $('#toc a'); tocLink.each(function(i, aLink) { var regExp = /[\{\}\[\].. 정보/블로그 운영팁 2021. 2. 20.

• 

  티스토리 토스트 알림 팝업 기능 만들기 클립보드 내용 복사 완료 문구를 단순하게 alert 창을 이용하여 띄웠더니 너무 없어 보여서 간단하게 구현하였습니다. 목차 HTML 작성 관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다. html 편집을 클릭합니다. 그럼 위와 같은 HTML 에디터가 뜨는데 여기에서 작업을 해 보겠습니다. 다음 내용을 body 태그 안쪽 아무데나 작성 하시면 됩니다. 먼저 토스트 메시지를 띄울 영역을 잡았습니다. 최초에는 보이지 않아야 하므로 display 속성에 none을 설정합니다. 자바스크립트 작성 관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 > HTML 에디터 로 이동하여 body 태그 안쪽 제일 하단 붙여넣기 하시면 됩니다. toast는 메시지가 잠깐 보였다가 사라지는 것이 핵심입니다. jQuer.. 정보/블로그 운영팁 2021. 2. 20.

• 

  드래그 방지 글 간단하게 복사하는 방법 가끔 좋은 정보를 발견하여 퍼 가려고 시도했을 때 드래그 방지 기능을 적용해 놓아 불편을 겪으신 분들 많을 겁니다. 기본적으로 자기 글을 복사 붙여넣기 하기를 원하지 않아서 그렇게 해 놓았을 텐데요. 그래도 퍼 갈 사람들은 다 퍼 갑니다. 사람들의 양심에 맡길 수 밖에 없는 일이죠. 저는 이렇게 악의적인(?) 목적으로 사용하길 바라는 마음으로 알려 드리는 건 당연히 아니구요. 가끔 코딩 관련 게시물을 올려 놓으신 분들도 복사 붙여넣기를 막아 놓으신 분들이 있더라구요. 그 긴 소스 코드를 일일이 따라 치라고 일부러 그렇게 해 놓은 건 아닐텐데 말입니다. 그런 경우 조금이나마 도움이 되었으면 하는 마음에서 말씀 드리겠습니다. 목차 드래그 방지 글 발견 예를 들어 이런 글이 있는데 이 소스 코드를 복사하고 싶.. 정보/잡지식 2021. 2. 17.

• 

  티스토리 글 열람 즉시 원하는 제목 내용으로 이동하기 https://sangminem.tistory.com/234#jQuery_중복_로딩을_피했습니다 위와 같이 URL이 #뒤에 글 내용의 제목 id가 포함되어 있는 경우 페이지가 로딩된 이후 제목 위치까지 바로 이동해야 될 것 같은데 일부 스킨에서는 제대로 동작하지 않아서 수동으로 옮기는 로직을 개발하였습니다. 잘 되시는 분은 적용하실 필요가 없습니다. 목차 자바스크립트 코드 붙여넣기 위치 관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다. html 편집을 클릭합니다. 그럼 위외 같은 HTML 에디터가 뜨는데 여기에서 작업을 해 보겠습니다. body 태그 안쪽 제일 하단 붙여넣기 하시면 됩니다. 소스 코드 아래 코드를 붙여넣기 해주세요. 주소를 가져와서 # 뒤쪽 id를 분석하여 제목 태그로 사용된 값이 .. 정보/블로그 운영팁 2021. 2. 14.

• 

  고래스킨, 친효스킨 둘러 보고 다시 북 클럽 스킨으로 돌아온 이유 티스토리를 시작한 이후 초반에 기본 제공 스킨을 이것 저것 사용해 보면서 정착한 스킨이 바로 북 클럽 스킨이었습니다. 그런데 너무 오래 사용했나 봅니다. 갑자기 밀려오는 식상함 때문에 신선한 자극이 필요했습니다. 그래서 스킨 검색을 해 본 결과 무료 버전 중에 고래스킨과 친효스킨에 대한 좋은 평이 많아서 좀 더 살펴 보았습니다. ※ 다음 내용은 개인적인 의견이므로 참고만 하시기 바랍니다. 목차 고래스킨 4.0 사용 후기 먼저 고래스킨을 다운 받아 사용해 보았습니다. 그대로 사용하는 것은 제 성격이 아니라서 일단 수정 작업 먼저 들어갔습니다. 글씨체부터 색상들을 차례차례 바꿔 보았습니다. 제가 초록색 계열을 좋아해서 초록색 계열로 싹 수정했습니다. 바꾸고 나니 좀 더 새로운 느낌이 들어 좋네요. 홈 화면도.. 정보/블로그 운영팁 2021. 2. 14.

• 

  티스토리 스킨 jQuery 중복 로딩 피하기 자원 중복 로딩이 발생하면 좋을 이유가 전혀 없기 때문에 생각한 방법입니다. 다만 예기치 못한 문제가 발생할 수 있으므로 어느 정도 코딩 지식이 있으신 분만 참고 하시기 바랍니다. 목차 jQuery 중복 로딩 개선이 필요한 이유 티스토리는 자체적으로 jQuery를 로딩하여 사용합니다. 따라서 스킨에서 jQuery를 이용하려면 보통은 다시 jQuery를 임포트합니다. 지극히 일반적이고 상식적인 이야기 입니다. 그런데 저는 조금 다르게 생각을 해 보았습니다. 이미 jQuery를 로딩하여 사용하고 있는데 굳이 불필요하게 로딩하면 블로그 속도만 느려지게 만드는게 아닌가 한거죠. 실제 체감할 수 있을 정도는 아니겠지만 이런 작은 개선이 모여 큰 차이를 만들게 됩니다. jQuery도 여러 버전이 있기 때문에 꼭 다.. 정보/블로그 운영팁 2021. 2. 14.

• 

  고전 정품 소프트웨어 무료 다운로드 사이트 소개 구글링 하다가 우연히 알게 된 사이트인데요. 상당히 유용해 보이는 사이트여서 공유합니다. 목차 사이트 소개 방대하게 옛날 자료를 취급하고 있는 해외 사이트 입니다. Internet Archive - The Vintage Software Collection The Vintage Software Collection : Free Software : Free Download, Borrow and Streaming : Internet Archive One of the most historically important artifacts to come from the home computer telecommunications revolution was shareware CDs, compact discs put out.. 정보/잡지식 2021. 2. 6.

• 

  이미지에서 글자 추출(OCR) 쉽게 하는 방법 별도 프로그램 설치 없이 간단하게 이미지에서 글자를 추출하는 방법을 알아 보겠습니다. 목차 구글 드라이브 접속 Google Drive Google Drive - 모든 파일을 한 곳에서 하나의 계정으로 모든 Google 서비스를 Google Drive로 이동하려면 로그인하세요. accounts.google.com 위 사이트에 접속합니다. 접속을 위해서는 구글 아이디가 필요 합니다. 정상적으로 접속이 되면 다음과 같은 화면을 볼 수 있습니다. 이미지 업로드 다음과 같이 글자가 있는 이미지를 업로드 해 보겠습니다. 파일을 드래그 앤 드롭 하면 다음과 같이 자동으로 업로드가 됩니다. 구글 문서 연결 파일 업로드가 완료되면 마우스 오른쪽 버튼을 클릭하여 연결 앱 > Google 문서를 클릭 합니다. 결과 확인 단.. 정보/잡지식 2021. 1. 31.