Overflow 4 티스토리 오버레이 창의 스크롤 기능 수정 오버레이 팝업창에서 스크롤할 때 바닥에 가려진 본문의 스크롤 기능을 일시 정지시키는 방법입니다. 본 블로그에 적용한 것이므로 다른 사이트에 사용할 경우 약간의 수정 과정이 필요합니다. 이런 방법도 있구나 하는 정도의 내용입니다. .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. FireFox에서 flex-wrap과 overflow의 호환성 부족 해결 사례 #aside .inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; overflow-y: auto; /* 문제의 원인 */ "#aside .inner"는 flex 컨테이너이며, 2개의 박스 a와 b를 담고 있습니다. 컨테이너는 상하(y축) 스크롤됩니다. "flex-wrap: wrap" 설정을 집어넣어 컨테이너의 폭이 여유가 있을 경우 가로로 2개의 박스를 배열하고, 폭이 좁을 경우 세로로 박스를 배열합니다. MS Edge와 Google Chrome은 가로, 세로 배치가 정상으로 전환되지만, Mozilla FireFox는 세로로만 배열됩니다. Microsoft Ed.. 2022. 9. 19. word-break, overflow-wrap, line-break word-break 단어의 절단 여부와 방법 - CSS property - used to specify how a word should be broken or split when reaching the end of a line (단어가 행의 끝 지점을 지나칠 때 자를 것인지 여부) - used to split/break long words and wrap them into the next line (다시 말해 다음 행으로 넘어가는 긴 단어를 자를 것인지 여부) /* 키워드 값 */ /* normal, break-all, keep-all, break-work */ word-break: normal; word-break: break-all; word-break: keep-all; word-break: bre.. 2022. 6. 2. 티스토리 연동 광고 overflow로 인한 블록 깨짐 방지 티스토리에 등록한 애드핏, 애드센스 광고 배너 크기로 인하여 페이지의 틀이 깨질 때 사용하는 방법입니다. 티스토리의 '블로그 관리 홈'에서 2가지 광고를 연동시켰을 때 사용하는 것입니다. 티스토리와 연동시키지 않고 광고 배너 코드를 직접 소스 페이지에 입력하는 경우는 적용되지 않습니다. 이미지 2개를 예제로 등록하였습니다. 현재 티스토리에 연동된 배너 광고의 크기는 고정형입니다. 웹브라우저의 높이와 폭의 크기를 변동시키면 배너가 있는 문단의 크기에 맞게 변경되지 않습니다. 그래서 왼쪽 캡처 이미지와 같이 페이지의 다른 구역을 침범하여 전체적인 페이지의 디자인이 깨지는 현상이 발생합니다. 다행스러운 것은 구글 애드센스, 카카오 애드핏 배너 광고의 HTML 코드가 "" 태그를 사용하고 "revenue_uni.. 2021. 2. 19.
