728x90 반응형 티스토리 현재 페이지에서 찾는 본문 검색창 (Ctrl + F) 아래 이미지와 같이 누구나 한 번쯤은 '현재 페이지'에서 원하는 내용을 찾기 위해 '컨트롤(Ctrl) + F'로 단어 검색을 해 본 적이 있을 것이다. 먼저 이 '컨트롤(Ctrl) +F 단어 검색 기능'을 요약정리해 보겠다. (이 부분을 잘 알아야 뒤에서 나오는 HTML 및 CSS를 더 잘 이해할 수 있다.) ① '현재 페이지'에서 '검색 단어'와 일치하는 단어 (이하 '일치 단어') 찾기 ② '일치 단어'의 전체 개수를 숫자로 표기 (ex : 36) ③ '일치 단어'를 노란색으로 마크(mark) 처리 ④ 상단에서 하단 방향으로 '일치 단어'에 자동으로 번호 지정 ⑤ '일치 단어' 중 '현재 단어'의 번호를 숫자로 표기 (ex : 10) ⑥ '일치 단어' 중 '현재 단어'를 주황색으로 마크(mark) 처.. 2022. 1. 17. 티스토리 마우스 각종 효과 및 불펌 복사 방지 '마우스 커서 설정'은 웹사이트 운영의 기본이라고 할 수 있는데, 이제 막 웹사이트 운영을 시작한 사람은 이것을 왜 해야 하는지, 그리고 무엇부터 해야 하는지 잘 모를 수 있다. '마우스 커서 설정'에는 실로 다양한 것들이 있는데, 그렇다면 어떤 설정을 해야 할까? 본 글은 티스토리 블로그를 운영할 때 필요한 마우스 커서 관련 주요 설정 사항 및 적용 방법에 대한 내용이니 각자의 티스토리에 적용해 보기 바란다. HTML 삽입 미리보기할 수 없는 소스 1] 마우스 커서 모양 변경 마우스 커서의 기본 모양은 '흰색 화살표'로 되어 있는데, 이 커서의 모양을 변경할 수 있다. (마우스 커서의 모양을 직접 디자인해서 변경하는 방법도 있는데, 중요한 부분은 아니라고 생각되어 생략한다.) 마우스 커서 관련 사이트인.. 2022. 1. 15. 티스토리 이전글 다음글 플로팅(floating) 배너(banner) 블로깅을 하다 보면 '이전 글 및 다음 글 플로팅 배너'를 볼 수 있는데, 단순 버튼 형식보다 여러모로 완성도가 있다고 생각한다. 본 글은 북클럽 스킨을 기준으로 '이전 글 및 다음 글 플로팅 배너'를 생성하는 방법에 대한 내용이며, 이전 발행한 글과 동일한 맥락이다. 티스토리 이전글(prev) 다음글(next) 버튼 참고로 직전 발행한 글의 이전 글 및 다음 글 버튼의 경우, 전체 글에 대한 이전과 다음이 적용되는데, 본 글에서 설명하는 이전 글 및 다음 글 플로팅 배너는 관련 글 (같은 카테고리)에서만 이전과 다음이 적용된다. 만약 '디자인' 카테고리를 클릭해서 글에 들어가면, '디자인' 카테고리 내에 있는 '이전 글 및 다음 글 플로팅 배너'가 출력된다. 그런데 정확한 이유는 모르겠지만 아래 이미지.. 2022. 1. 11. 티스토리 이전글(prev) 다음글(next) 버튼 '이전 글(Prev Article) 버튼' 및 '다음 글(Next Article) 버튼'은 웹툰이나 드라마 같이 '이전 회차' 및 '다음 회차'가 있는 시리즈물 콘텐츠가 아닌 이상 그 효용가치가 떨어지는 것이 사실이나, 웹사이트 방문자의 체류시간을 증대시키고 이탈률을 감소시킬 수 있는 주요 기능인 것은 자명하다. 본 글은 북클럽 스킨을 기준으로 웹사이트 방문자의 편의를 높여 주는 '이전 글(Prev Article) 버튼' 및 '다음 글(Next Article) 버튼'을 생성하는 방법에 대한 내용이다. 총 5가지 방법으로 풀이되어 있으니 취사선택해서 적용해 보기 바라며, 추가로 이전 발행한 글과 동일한 맥락임을 참고 바란다. 티스토리 스크롤 반응 탑(top) 다운(down) 버튼 HTML 삽입 미리보기할 .. 2022. 1. 9. 티스토리 스크롤 반응 탑(top) 다운(down) 버튼 '탑(Top) 버튼' 및 '다운(Down) 버튼'은 PC를 통한 웹사이트 방문의 경우 키보드 (Home btn & End btn / Page Up btn & Page Down btn)와 마우스 (Mouse Scroll & Cursor)가 있기 때문에 없어도 괜찮을 수 있지만, Mobile을 통한 웹사이트 방문의 경우 화면 이동 시에 손으로 계속 조작해야 하는 불편함이 있기 때문에 필수 기능이라고 할 수 있다. 본 글은 웹사이트 방문자의 편의를 높여 주는 '탑(Top) 버튼' 및 '다운(Bottom) 버튼' 생성 방법에 대한 내용이다. 총 7단계에 걸쳐 풀이했으니 하나하나 보면서 적용해 보기 바란다. HTML 삽입 미리보기할 수 없는 소스 ★ 미리 보기 버튼은 화면 우측 하단에 위치한다. 스크롤을 내리면 .. 2022. 1. 7. 티스토리 스크롤 반응 플로팅(floating) 목차(TOC) 본 글은 '북클럽 스킨'을 기준으로 목차가 스크롤을 따라서 화면에 떠다니는 '플로팅 자동 목차'를 생성하는 2가지 방법에 대한 내용이다. 아래 일전 발행한 글에서 연결되는 내용임을 참고 바란다. 티스토리 본문 자동 목차 (TOC) HTML 삽입 미리보기할 수 없는 소스 1] 레이아웃 작업 '플로팅 자동 목차'를 생성하기 전에, '북클럽 스킨'의 레이아웃이 어떻게 구성되어 있는지 알아야 하고 레이아웃을 일부 수정해야 한다. (레이아웃을 수정하는 것은 선택사항이며, 보다 깔끔하게 적용하고자 한다면 수정하는 것을 추천한다.) 1-1] '북클럽 스킨'의 레이아웃 구성 아래는 '북클럽 스킨 메인 페이지'의 초기 레이아웃으로, '사이드바 - 가로 230px', '본문 - 가로 740px'으로 구성되어 있다. 아래는.. 2022. 1. 2. 티스토리 본문 자동 목차 (TOC) 'TOC'는 'Table Of Contents'의 약자로 목록, 목차, 순서, 차례 등을 의미한다. 본 글은 '북클럽 스킨'을 기준으로 '페이지(글)의 본문' 내에 목차를 자동으로 생성하는 방법에 대한 내용이다. HTML 삽입 미리보기할 수 없는 소스 1] 기본 작업 먼저 목차 생성을 위한 기본 작업이다. 1-1] 파일 업로드 - jquery.toc.min.js 목차를 자동으로 생성하려면 먼저 'Github'에서 제공하는 알집 파일을 다운로드해서, 알집 파일 안에 있는 2개의 파일 중 'jquery.toc.min.js'를 티스토리에 업로드해야 한다. (실제 파일도 첨부) 1-2] HTML - Head 섹션 아래 코드를 HTML의 위에 삽입한다. 앞서 업로드한 'jquery.toc.min.js' 파일을 인.. 2021. 12. 30. 티스토리 홍보용 이미지는 썸네일(thumbnail) 누락 나름 정성 들여 만든 썸네일이 '다음 검색 결과 페이지'에서 누락되면 속상하지 않을 수 없다. 본 글은 썸네일 누락 경험과 다음 검색 엔진의 원리에 대한 내용이니 티스토리 운영에 참고하기 바란다. HTML 삽입 미리보기할 수 없는 소스 1] 첫 번째 티스토리의 썸네일 누락 아래는 내 첫 번째 티스토리의 '다음 검색 결과 페이지'로, '꿈해몽 풀이' 관련 325개 콘텐츠 중에서 265개 콘텐츠의 썸네일이 누락되었었다. 몇백 개 중에서 몇 개, 몇십 개도 아니고 80퍼센트 이상의 글에 문제가 생긴 것을 나는 간과할 수 없었고 아래와 같이 '다음 고객센터'에 문의했다. 아래는 '다음 고객센터'에서 온 답변이다. 내가 주의 깊게 본 것은 '파란색 줄' 부분이며, '매우 복잡한 과정', 전체적으로 노출 규제 강화.. 2021. 12. 28. 티스토리 카테고리 탐색경로 브레드크럼(breadcrumb) '구글 검색 엔진 최적화(SEO)'를 공부하는 중에 '브레드크럼(Breadcrumb)'을 알게 됐다. 이 '브레드크럼(Breadcrumb)'은 웹사이트 방문자의 탐색 편의에 도움을 주어 웹사이트 체류시간을 높여줄 수 있고 이탈률을 낮춰줄 수 있다. 또한 검색 엔진이 웹사이트의 구조를 더 잘 이해하는 최적화에도 도움이 되는데, '브레드크럼(Breadcrumb)'을 적용하면 크롤링과 색인 생성 작업을 다시 해야 하니 웹사이트 운영을 시작할 때 적용하는 것이 좋겠다. 본 글은 '구글 검색 센터'를 기반으로 '브레드크럼(Breadcrumb)'의 중요성 및 필요성에 대한 내용과 티스토리의 반응형 스킨인 '북클럽 스킨'을 기준으로 '브레드크럼(Breadcrumb)' 적용 방법에 대한 내용이다. HTML 삽입 미리보.. 2021. 12. 27. 이전 1 2 3 4 5 다음 728x90 반응형
