728x90 반응형 티스토리 스크롤 반응 사이드바 투명도(opacity) 적용 나는 화면의 데드 스페이스를 줄이고 공간 활용도를 높이기 위해서 본문을 정중앙에 두고 사이드바를 좌우로 2개 운영하고 있다. 사이드바를 화면 좌우 2개 적용하는 방법은 아래 글을 참고하자. 티스토리 사이드바 화면 좌우 2개 운영 그런데 사이드바가 늘어난 만큼 광고를 하나라도 더 넣을 수 있어서 분명 좋은 것은 맞으나, 결과적으로 여백이 없기 때문에 답답한 감이 있고 본문 집중도가 현저히 떨어진다. 나 스스로도 이러한데 방문자의 피로도는 심하면 심했지 덜하진 않을 것이기에, 나는 방문자가 필요로 할 때에만 사이드바 나타나게 해야겠다고 생각했다. 본 글은 사용자 환경 개선을 위해 스크롤에 따라 사이드바를 사라지고 나타나게 하는 방법에 대한 글이다. HTML 삽입 미리보기할 수 없는 소스 1] 미리 보기 본 .. 2022. 3. 3. 티스토리 헤딩(heading) 상단 고정 및 슬라이딩(sliding) 아래와 같이 글의 헤딩(heading)으로 만든 목차는 글의 구조를 파악하는 데에 도움을 주고, 프로그레스는 글의 전개를 이해하는 데에 도움을 준다. 나아가 스크롤의 위치에 따라 헤딩을 하이라이팅 한다면, 보다 몰입할 수 있는 웹사이트 이용 환경을 구축할 수 있을 것이다. 본 글은 스크롤을 내릴 때 헤딩이 슬라이딩으로 나타나고 헤딩을 화면 상단에 고정하는 방법에 대한 내용이다. 추가로 글 제목 및 메뉴를 화면 상단에 고정하는 것을 고려해서 적용할 것을 추천한다. 티스토리 글 제목 (article title) 화면 상단 고정 티스토리 북클럽 뉴북, 메뉴 고정 및 스크롤 버튼 HTML 삽입 미리보기할 수 없는 소스 1] 헤딩 스타일 적용 먼저 헤딩의 스타일을 적용해 보겠다. 1-1] CSS 작업 아래 코드를.. 2022. 2. 21. 티스토리 글제목(article title) 상단 고정 스크롤(scroll) 조작에 따라 반응하는 헤더(header)는 보다 매력적인 사용자 경험을 이끌어 낼 수 있으며, 헤더에는 웹사이트명(site title), 글 제목(article title), 메뉴(menu) 등의 유용한 정보를 반영할 수 있다. 본 글은 아래 예시(구글)와 같이 스크롤을 내릴 때 글 제목을 화면 상단(헤더)에 고정하는 5가지 방법에 대한 내용이다. HTML 삽입 미리보기할 수 없는 소스 ① 상단 고정 - 본문 영역 글을 발행하면 아래와 같이 글 제목이 본문 상단에 자동으로 생성되며, 스크롤을 내릴 때 글 제목을 화면 상단에 고정하는 방법이다. HTML 작업 아래 글 제목 치환자 코드를 HTML의 와 ##_article_rep_desc_## 사이에 삽입한다. CSS 작업 아래 코드를 .. 2022. 2. 19. 티스토리 프로그레스(progress) 바(bar) & 서클(circle) 프로그레스(progress)는 진전, 진척, 진행을 의미하며, 웹사이트 환경에서는 웹사이트 방문자가 콘텐츠의 진행 상황을 시각적으로 알 수 있도록 바(bar) 등의 형태로 구현할 수 있다. 프로그레스(progress)는 콘텐츠의 진행 상황을 단순 시각화하는 것에서 그치지 않고, 웹사이트 방문자가 서론부터 결론까지 이어지는 콘텐츠의 전체적인 구조를 보다 잘 이해할 수 있게 도와준다. 본 글은 바(bar), 서클(circle), 퍼센트(percentage), 탑 버튼(top button) 형태로 프로그레스(progress)를 적용하는 방법에 대한 내용이다. HTML 삽입 미리보기할 수 없는 소스 1] 바(bar) - 기본형 내가 설명할 '기본형'은 프로그레스 바를 화면 상단, 화면 하단, 화면 우측, 화면 .. 2022. 2. 14. 티스토리 메뉴(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. 이전 1 2 3 다음 728x90 반응형
