본문 바로가기
728x90
반응형
티스토리 광고 나오면 사라지는 로딩화면(loading) 웹사이트 접속 시 개체(텍스트, 이미지, 동영상, 광고 등)가 버벅거리듯이 딜레이 로딩될 때가 있는데, 이는 간혹 웹사이트 방문자에게 '신뢰할 수 없는 사이트'로 보일 수 있다. 최악의 경우 웹사이트를 이탈하는 등의 상황을 야기시키기도 한다. 다른 건 차치하더라도 만약 딜레이 로딩되는 개체가 구글 애드센스(Adsense) 광고라면, 광고가 보이기도 전에 광고면을 벗어날 수도 있기 때문에 수익형 티스토리 블로그를 운영하는 입장에서는 꼭 해결해야 할 문제다. 그런데 아쉽게도 모든 개체를 동시에 로딩되게 하거나 개체들의 로딩을 각각 컨트롤하는 것은 불가능하다. 그래도 이를 해소하기 위한 방편으로 웹사이트 접속 시 화면 상 강제적인 효과를 적용해서 웹사이트 방문자에게 '로딩이 완료된 상태의 사이트'를 보여줄 수.. 2022. 1. 25.
티스토리 하이라이팅(highlight) 목차(TOC) & 헤딩(heading) 글의 길이가 짧을 경우에는 괜찮지만 길 경우에는 웹사이트 방문자에게 현재 화면의 내용(위치)이 전체 글에서 어느 부분에 해당하는지 인지시켜 줄 필요가 있다. 이는 근본적으로 웹사이트 방문자가 글을 보다 잘 이해하는 데에 도움을 주면서도 페이지를 이탈하지 않고 체류할 수 있는 기본 토대가 된다. 본 글은 보다 친절한 웹사이트 이용 환경 구축을 위해 목차(TOC) 및 헤딩(Headings)에 하이라이트(Highlight) 효과를 주는 방법에 대한 내용이다. 추가로 일전 발행한 글인 목차 콘텐츠에서 이어지는 내용임을 참고 바란다. 티스토리 본문 자동 목차 (TOC) 티스토리 접고 펼치는 토글(tpggle) 목차(TOC) HTML 삽입 미리보기할 수 없는 소스 ★ 미리 보기 먼저 본 글의 결과다. ① 스크롤 시.. 2022. 1. 22.
티스토리 접고 펼치는 토글(toggle) 목차(TOC) 목차의 길이가 길 경우에는 목차를 접어 두는 것이 보기에 좋다. 또한 목차를 접어 두면 웹사이트 방문자가 스크롤해야 하는 부담도 줄일 수 있다. 본 글은 목차를 열고 닫고, 펼치고 접는 기능을 적용하는 3가지 방법에 대한 내용이다. 추가로 일전 발행한 본문 자동 목차 콘텐츠에서 이어지는 내용임을 참고 바란다. 티스토리 본문 자동 목차 (TOC) HTML 삽입 미리보기할 수 없는 소스 미리 보기 본 글의 결과물이다. ① 목차가 접힌 상태로 출력 ② 접힌 상태에서 클릭 시 슬라이딩 효과로 펼쳐지고, 'Open'에서 'Close'로 변경 ③ 펼쳐진 상태에서 클릭 시 슬라이딩 효과로 접히고, 'Close'에서 'Open'으로 변경 1] 방법 ① _ details & summary 첫 번째 방법은 details .. 2022. 1. 19.
티스토리 현재 페이지에서 찾는 본문 검색창 (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.
728x90
반응형

티스토리툴바