layout 2 scrollbar가 사라질 때 발생하는 layout shift 회피 요령 아래와 같은 CSS 코드를 설정하여 스크롤바(scrollbar)의 폭을 8픽셀(px)로 지정하여 사용하고 있습니다.가로와 세로 스크롤바에 모두 적용됩니다. ::-webkit-scrollbar { display: block; width: 8px; height: 8px; } sidebar와 같은 상위 레이어 팝업 창을 띄울 때,1. 일단 주위에 음영(dimm)을 주어 상위 레이어를 강조하고,2. 하위 레이어인 바탕 페이지가 마우스의 scroll에 반응하는 것을 막기 위하여 아래와 같은 코드를 사용합니다. body { overflow: hidden; } 이때 페이지의 구성에 따라서 layout shift라고 하는 화면 변동이 눈을 어지럽히는 경우가 있습니다. 스크롤바가 사라진 .. 2024. 2. 19. Grid Layout으로 사이트 링크와 관련 사이트 리스트 병합 사이트 링크 메뉴는 티스토리 스킨 북클럽의 소스 코드 이용 관련 사이트 메뉴는 티스토리 스킨 오딧세이의 소스 코드 이용 HTML 페이지에 사용한 티스토리 치환자 ** 티스토리 사이트의 서버가 비정상적으로 작동하여 치환자 소스 코드를 첨부하면 페이지에서 바로 실행됩니다. ** 불가피하게 소스 코드 대신 이미지 파일로 대체합니다. 추후에 서버가 정상화 되면 정상적인 코드를 등록합니다. ** 치환자 소스 코드의 ##를 **로 교체하여 실행을 막아 놓았습니다. ** 고객센터에 코드 블럭 실행 문제를 문의하였습니다. 아직 해결 안 된 상태입니다. ** CSS와 Javascript 코드는 정상입니다. 1. 현재 접속 페이지 종류 출력 치환자 [**_body_id_**] 위 코드가 아직도 실행되면 요렇게 보입니다. .. 2024. 2. 15.
