728x90 반응형 티스토리 메뉴(menu) 상단 고정 및 가로 스크롤(scroll) 버튼 탑 버튼을 누르는 이유는 결국 카테고리 또는 메뉴를 보기 위함인데, 카테고리 또는 메뉴를 화면 상단에 고정해 둔다면 웹사이트 방문자의 불필요한 동작을 최소화할 수 있다. 본 글은 메뉴를 생성하고 화면 상단에 고정하는 것과 메뉴에 스크롤링 마우스 기능 및 스크롤링 버튼을 적용하는 방법에 대한 내용이다. HTML 삽입 미리보기할 수 없는 소스 1] 메뉴 생성 및 설정 북클럽 뉴북 스킨에서 메뉴 위치는 아래와 같으며 메뉴 코드는 다. 1-1] 기존 항목으로 생성 메뉴는 '기본 메뉴', '페이지', '카테고리' 등의 '기본 항목'을 선택해서 생성할 수 있다. 기본적으로 메뉴는 '마우스 오버' 시 '언더바(under bar)'가 나타난다. '기본 항목'으로 생성한 메뉴는 클릭(선택) 시 '마우스 오버'를 하지 않.. 2022. 2. 9. 티스토리 접고 펼치는 토글(toggle) 카테고리(category) 웹사이트 방문자는 카테고리에서 원하는 정보를 찾아 들어가기 때문에, 웹사이트 운영자는 웹사이트 방문자가 원하는 정보를 신속하고 정확하게 찾을 수 있도록 카테고리를 상세하게 구성하기 마련이다. 그렇다 보면 아래와 같이 카테고리의 구성이 많아져서 세로로 길게 늘어지게 되어, 웹사이트 디자인이 지저분해질 수 있고 카테고리 구성도 복잡해질 수 있다. 이는 오히려 웹사이트 방문자가 원하는 정보를 찾을 때 불편을 초래할 수 있고, 광고 배너와 같은 주요 사항이 첫 화면에서 보이지 않기 때문에 카테고리에 접기 및 펼치기 기능을 적용하는 것이 좋다. 본 콘텐츠는 웹사이트 방문자의 편의와 원활한 광고 배너 노출을 위해 접기 및 펼치기 기능을 적용한 카테고리를 생성하는 3가지 방법에 대한 내용이다. HTML 삽입 미리보기.. 2022. 2. 4. 티스토리 사이드바(sidebar) 화면 좌우 2개 운영 아래는 북클럽 스킨 뉴북 기준 티스토리의 첫 화면인데, 티스토리를 운영하다 보면 '데드 스페이스'(좌우 빈 공간)가 눈에 거슬린다. '여백의 미'라고 하기에는 '데드 스페이스'가 너무 큰 것 같고, 화면의 공간 활용도 자체가 낮은 것 같다. 나는 화면의 공간 활용도를 높여서 광고 배너라도 하나 더 띄우고 싶었고, 바로 아래와 같이 화면 좌우에 '사이드바'를 배치해서 '사이드바'를 2개 운영하는 것을 생각했다. 한쪽은 카테고리와 최근글 및 인기글 등을, 다른 한쪽은 고정 광고를 운영하는 것이다. 이는 본문 영역을 해치지 않으면서도 본문이 화면 중앙에 위치하기 때문에 시각적으로 보다 안정감 있는 레이아웃이 되어 본문 집중도를 높여 준다. 본 글은 화면의 공간 활용도를 높여서 화면 좌우에 '사이드바'를 2개 .. 2022. 2. 1. 티스토리 슬라이딩(sliding) 사이드바(sidebar) 버튼 웹사이트 방문자는 원하는 정보를 얻기 위해서 보다 신속하고 정확하게 웹사이트를 탐색하고 싶어 한다. 그렇기 때문에 웹사이트 운영자는 웹사이트 방문자의 체류 시간을 늘리고 이탈률을 줄이기 위해서 웹사이트 방문자의 편의를 위한 웹사이트 이용 환경을 구축해야 한다. 탑(top) 버튼 또는 화면 상단 고정 메뉴 등이 이에 해당한다고 할 수 있는데, 같은 맥락에서 아래 Mobile 환경에서의 '슬라이딩 사이드바'를 PC 환경에서도 구현하면 좋겠다고 생각했다. 이 '슬라이딩 사이드바'는 결과적으로 2개의 '사이드바'를 운영하는 것이기 때문에 화면의 한계를 극복할 수 있는 하나의 방편이 될 수 있다. 본 글은 버튼을 클릭하면 슬라이딩 효과로 나타나는 사이드바를 생성하는 방법에 대한 내용이다. HTML 삽입 미리보기할.. 2022. 1. 31. 티스토리 인기글(popular) 및 최근글(recent) 상단 고정 직접 검색해서 들어온 웹사이트 방문자에게 가장 중요한 것은 원하는 정보를 얻는 것이다. 원하는 정보를 충분히 얻은 웹사이트 방문자는 해당 웹사이트에서 가장 따끈따끈한 '최근글' 또는 가장 핫한 '인기글'도 찾기 마련이다. 감사하게도 티스토리는 기본적으로 '사이드바'에 '최근글'과 '인기글'을 적용할 수 있다. 그런데 아쉬운 점은 스크롤을 내리면 '최근글'과 인기글'이 화면에서 사라지기 때문에 웹사이트 방문자가 바로 찾기 어렵다는 것이다. 본 글은 '최근글' 및 '인기글'을 생성하는 기본적인 방법과 함께 '최근글' 및 '인기글'을 화면 상에 고정시키고 바둑판 형식으로 디자인하는 방법에 대한 내용이다. HTML 삽입 미리보기할 수 없는 소스 1] 최근글 / 인기글 생성 및 관리 먼저 '사이드바'에 '최근글'.. 2022. 1. 29. 티스토리 스크롤 반응 플로팅 공지사항(notice) 개인의 일상 또는 사회적 이슈 등의 콘텐츠를 발행한다면 괜찮은데, 만약 전문적 및 교육적 등의 특정 목적으로 웹사이트를 운영하는 중에 콘텐츠의 양까지 방대해진다면, 웹사이트 방문자는 웹사이트가 어떤 목적으로 운영되는지, 어떤 콘텐츠를 발행하는지, 어떤 콘텐츠를 먼저 봐야 하는지 등을 잘 모를 수 있다. 이는 콘텐츠의 가치 및 품질과 관계없이 웹사이트 이탈로 이어질 수 있기 때문에, 웹사이트 방문자가 콘텐츠를 보다 효율적으로 이용 (웹사이트 체류 시간을 높이고 재방문을 유도) 할 수 있도록 공지사항을 통해 콘텐츠 이용 방법에 대한 안내를 해주는 것이 좋다. 본 콘텐츠는 공지사항 생성 등의 기본적 방법들과 함께 스크롤을 따라 움직이며 상단에 고정된 플로팅 배너 형태의 공지사항을 생성하는 방법에 대한 내용이다.. 2022. 1. 27. 티스토리 광고 나오면 사라지는 로딩화면(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. 이전 1 2 3 4 5 다음 728x90 반응형
