Display 4 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. 북클럽 스킨 "관련글(related-articles)" flex box로 변경 등록한 글의 하단에 배치되어 현재 글과 관련 있는 글들을 보여 주는 메뉴입니다. PC 화면에서는 가로로 4개, 모바일 화면에서는 가로 2개씩 2줄로 역시 4개의 글 링크가 있습니다. 그대로 사용해도 괜찮은 기능입니다. 단지 자신이 원하는 형태로 수정하려면 거의 불가능할 정도로 코드가 복잡합니다. CPU 연산을 필요로 하는 CSS 코드로 짜여 있습니다. width: 101.621621621621622%; margin-left: -1.621621621621622%; padding-left: 1.621621621621622%; padding-bottom: 68.181818181818182%; width: 103.571428571428571%; margin-left: -3.571428571428571%; pad.. 2022. 6. 12. 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. 북클럽 스킨 main-slider 설정 변경 홈페이지를 제외한 사용자 지정 특정 페이지에만 main-slider를 실행시켜 블로그 첫페이지 로딩 속도뿐만 아니라 PageSpeed Insights의 측정 점수도 높이는 방법입니다. 북클럽 스킨 main-slider 위치에 따른 구글 PageSpeed Insights 점수 변동 1. 블로그 첫 페이지에 main-slider 배치 ※ 북클럽 스킨의 기본 값은 main-slider를 첫 페이지에서만 보여 줍니다. #tt-body-index .main-slider { display: block; } 2. 카테고리 페이지에 main-slider 배치 ※ 하나의 블로그에는 일반적으로 여러 페이지의 카테고리가 존재합니다. 그 페이지들에 모두 main-slider를 보여 주는 것입니다. 첫 페이지 하나에만 main.. 2022. 4. 29.
