Hidden 3

Article Thumbnail 티스토리 오버레이 창의 스크롤 기능 수정 오버레이 팝업창에서 스크롤할 때 바닥에 가려진 본문의 스크롤 기능을 일시 정지시키는 방법입니다. 본 블로그에 적용한 것이므로 다른 사이트에 사용할 경우 약간의 수정 과정이 필요합니다. 이런 방법도 있구나 하는 정도의 내용입니다. .mobile-menu { overflow: hidden; height: 100%; } #dimmed { position: fixed; top: 0; left: 0; z-index: 300; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); } 티스토리 북클럽 스킨의 "style.css"에 담겨 있는 코드입니다. - 모바일 접속하여 - 메뉴 버튼을 눌러서 "aside" 팝업창을 열게 되면, ① 먼저, 본문 페이지 bod.. 2022. 12. 25.
Article Thumbnail display none, visibility hidden, opacity 0 display: none; DOM에 등록된 객체로, 사용자의 눈에 보이지 않으며, 마우스나 키보드와 같은 입력 도구로 실행이 불가능하지만, 자바스크립트와 같은 코딩 언어로 실행시킬 수 있습니다. 웹 페이지의 공간을 점유하지 않습니다. DOM 메모리에 로딩되어 존재하는 객체이나 페이지를 구성하지 않고 보이지도 않습니다. Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off. To have an element take .. 2022. 5. 16.
Article Thumbnail 티스토리 연동 광고 overflow로 인한 블록 깨짐 방지 티스토리에 등록한 애드핏, 애드센스 광고 배너 크기로 인하여 페이지의 틀이 깨질 때 사용하는 방법입니다. 티스토리의 '블로그 관리 홈'에서 2가지 광고를 연동시켰을 때 사용하는 것입니다. 티스토리와 연동시키지 않고 광고 배너 코드를 직접 소스 페이지에 입력하는 경우는 적용되지 않습니다. 이미지 2개를 예제로 등록하였습니다. 현재 티스토리에 연동된 배너 광고의 크기는 고정형입니다. 웹브라우저의 높이와 폭의 크기를 변동시키면 배너가 있는 문단의 크기에 맞게 변경되지 않습니다. 그래서 왼쪽 캡처 이미지와 같이 페이지의 다른 구역을 침범하여 전체적인 페이지의 디자인이 깨지는 현상이 발생합니다. 다행스러운 것은 구글 애드센스, 카카오 애드핏 배너 광고의 HTML 코드가 "" 태그를 사용하고 "revenue_uni.. 2021. 2. 19.