반응형 전체 글51 [Tips] 티스토리 글에 자동으로 목차 쉽게 넣는 방법 (코딩 몰라도 가능!) 안녕하세요! 😊 오늘은 티스토리 글에 자동으로 목차를 생성하는 방법에 대해 공유하려고 합니다. 제가 사용하고 있는 스킨은 북클럽 스킨인데요, 스킨에 따라서 조금 차이가 있을 수도 있으니 아래 내용을 따라하셨는데도 목차가 표시되지 않는다면, 3. HTML 코드 수정 섹션의 하단을 확인해 주세요! 아래와 같이 Simple 버전과 Purple 버전 두가지로 준비했으니 끝까지 글을 읽어주세요. 코드를 일부 수정해야 하긴 하지만, 코딩을 몰라도 차근차근 따라하시면 누구나 쉽게 하실 수 있으니 포기하지 마시고 따라해 보세요! 목차 1. 공개 소스 jquery.toc.zip 파일 다운로드 아래 첨부파일을 클릭하여 다운로드해 주세요. 자동으로 목차를 만들어주는 오픈 소스입니다. 다운로드한 zip 파일을 압축 해제하면,.. 2023. 7. 31. [Notion 노션] 유용한 아이콘 사이트 추천 안녕하세요 😊 이번 포스팅에서는 노션에서 사용하기 좋은 아이콘 사이트 4군데를 추천해 드리려고 합니다! 저는 노션에서 페이지 만들 때 이상하게 아이콘에 집착하게 되더라구요,, ㅎㅎㅎㅎ 저 같은 분들이 분명 계실 것 같아서 이 글을 작성하게 됐어요! 목차 단, 노션 템플릿을 상업적인 용도로 이용하시는 경우, 아이콘들의 저작권 정책을 직접 확인해보신 후 사용하세요! 사이트를 소개하기 전에, 노션 페이지에 내가 원하는 아이콘을 적용하는 방법을 간단하게 소개하고 넘어갈게요. 노션(Notion) 페이지에 커스텀 아이콘 적용하기 사용자 지정 탭을 클릭해 링크만 붙여넣어주시면 됩니다. 참~ 쉽죠~~? 😜 이제 본격적으로 사이트를 소개해 드릴게요. 😁 1. Notion icons https://uno.notion.vi.. 2023. 7. 29. Gumroad(검로드) 구매 방법 안내 목차 💡 검로드(Gumroad) 란? 검로드는 디지털 컨텐츠 판매 플랫폼입니다. 주로 해외 크리에이터들이 많이 사용하고 있는데, 요즘은 한국 사용자도 늘어나는 추세입니다. 노션 템플릿, 굿노트 양식, 그 외 디자인 파일들, 전자책 등을 판매하거나 구매할 수 있습니다. 😊 Gumroad – Sell what you know and see what sticks Gumroad is a powerful, but simple, e-commerce platform. We make it easy to earn your first dollar online by selling digital products, memberships and more. gumroad.com 어떤 컨텐츠를 구매하고자 했는데, 검로드로 연결되어 .. 2023. 7. 23. [Notion 꿀팁] 진행바(Progressbar) 함수식 제작 사이트 - Notion Creature 사용법 요즘은 업무용, 개인용 가리지 않고 노션을 정말 많이 활용하는 것 같아요. 저도 기록하는 걸 좋아해서 노션을 정말 잘 쓰고 있는데, 최근에 노션과 관련된 유용한 사이트나 꿀팁들을 알게 돼서 많은 분들에게 공유해드리려고 해요! 그동안 글 올리는 데 많이 소홀했는데, 새해를 맞이해 다시 이렇게 열정을 불태워 봅니다.. ^^ 🔥🔥 이번 글에서는 Notion Creature라는 사이트에 대해서 소개하고 사용법을 간단하게 공유합니다. 노션을 사용하고 계신 분들이라면 한번쯤은 아래 이미지처럼 노션에 입력된 데이터를 사용해서 진행 바를 만들어 사용하는 템플릿을 보신 적이 있을 거예요. '저런 건 어떻게 만들어서 쓰는 거야 ㅠㅠㅠㅠ' 라고 생각하신 적이 있다면! 아래 사이트를 주목해 주세요! 👀 Notion Creat.. 2023. 1. 5. [Nuxt.js] Nuxt.js에서 KakaoMap API 사용하기 💻 🗺 Nuxt.js 에서 KakaoMap API를 사용하는 데 어려움을 겪고 있는 분들을 위해,, 또 똑같은 실수를 반복하게 될지도 모를 미래의 나를 위해 정리해 보는 글입니다. 📝 혹시 잘못된 부분이 있다면 알려주세요! Nuxt.js란? Vue Application을 위한 강력한 프레임워크! 조금 더 손쉽게 Vue application을 제작할 수 있습니다. 🔗 Nuxt.js 공식 페이지 The Intuitive Vue Framework Build your next Vue.js application with confidence using Nuxt. An open source framework making web development simple and powerful. nuxtjs.org Nuxt.js Ap.. 2021. 9. 17. [카카오톡 OpenGraph] 링크 공유 시 나오는 썸네일 이미지 및 텍스트 수정하기 (+ 적용이 잘 안될 때 확인해볼 사항들) 오픈그래프(Open Graph)란? 오픈 그래프 프로토콜은 특정 HTML 문서의 정보(제목, 설명, 문서 타입, 대표 URL 등)를 통일해서 사용할 수 있도록 페이스북이 개발한 프로토콜이다. 아래와 같이 SNS에서 링크를 공유할 때 뜨는 이미지와 제목 및 설명 등을 오픈그래프를 통해 설정할 수 있다. 오픈그래프 설정 방법 기본적으로 많이 쓰이는 오픈 그래프 요소 // 사이트 제목 // Type // 대표 url // 이미지. 이미지 사이즈는 410x200px 을 권장한다. 추가적인 요소들에 대해 알아보고 싶은 경우, 아래 사이트를 확인해보면 된다. https://ogp.me/#optional Open Graph protocol The Open Graph protocol enables any web pag.. 2021. 7. 13. [Issue 해결] React Slick 사용 시 Prev 버튼이 동작하지 않는 경우 ❗️ Issue React Slick 라이브러리 사용 시, Next 버튼은 정상적으로 작동하는데, Prev 버튼은 마우스 오버 시 CSS도 동작하지 않고, 클릭을 하여도 슬라이드되지 않음 💡 Solution Prev 버튼의 css 속성인 z-index를 수정해 주면 됨. Prev 버튼의 클래스명이 'slick-prev'로 설정되어 있으므로 아래의 코드를 삽입해 주면 해결 됨! .slick-prev { z-index: 9999; } 충분히 큰 숫자인 9999를 넣어주었는데, 9999로 설정 시에도 정상적으로 작동하지 않을 시, 더 큰 수를 입력해볼 수 있다. 2021. 6. 20. [MongoDB] Atlas에서 MongoDB 외부 접속 허용하는 방법 💡 잘 되던 DB 연동이 갑자기 안될 때, 이 부분을 확인해 보세요! Atlas에서는 IP 주소를 기반으로 접속 권한을 설정할 수 있습니다. 저의 경우, 왕왕왕오앙초보라서 이 부분을 전혀 생각하지 못하고 있었는데,, 집에서는 잘 되던 게 카페에 가니까 안되길래 혼란스러워하던 중에 친구의 도움을 받아 해결할 수 있었습니다,, 😅😅 왼쪽 사이드바에서 Network Access를 클릭한 후, Add IP Adress 버튼을 클릭해 주세요. 그리고 나서 접근을 허용하고자 하는 IP 주소를 직접 입력하거나 Add current IP address 버튼을 통해 현재 IP 주소의 접근을 허용하거나 Allow access from anywhere 버튼을 통해 모든 IP 주소에서의 접근을 허용할 수 있습니다. 너무 간단.. 2021. 6. 20. [배경화면] 오마이걸 지호 인스타그램 사진 청량하고 귀엽고 예쁘고 다 해~~~!!!! (사진 출처 : 죠죠 인스타그램) 배경화면이 마음에 드신다면 누구나 다운 받으셔서 사용하실 수 있습니다! * 이미지 사이즈는 아이폰 xs에 최적화되어 있습니다. 2021. 5. 15. 이전 1 2 3 4 ··· 6 다음 반응형
