position 8 티스토리 오버레이 창의 스크롤 기능 수정 오버레이 팝업창에서 스크롤할 때 바닥에 가려진 본문의 스크롤 기능을 일시 정지시키는 방법입니다. 본 블로그에 적용한 것이므로 다른 사이트에 사용할 경우 약간의 수정 과정이 필요합니다. 이런 방법도 있구나 하는 정도의 내용입니다. .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. Centering Things (vertically) CSS로 텍스트와 이미지를 수평, 수직 방향 중앙에 배치하는 방법입니다. W3C 해당 페이지 링크 최초 입력 2001년 5월 1일 마지막 갱신 2021년 2월 6일 Flex, Grid 시스템 구조를 사용하지 않고 호환성을 유지하면서 CSS1~3 기본 코드를 조합하여 element의 위치를 조정하는 방법을 설명하고 있습니다. https://www.w3.org/Style/Examples/007/center.en.html#vertical Centering lines of text Centering a block of text or an image Centering a block or an image vertically Centering vertically in level 3 Centering verticall.. 2021. 11. 20. Position Sticky를 구현하는 Fixed JS 코드 활용 1. 원글: Position Sticky를 구현하는 Fixed JS 코드 오류 수정 2. 수정: Position Sticky를 구현하는 Fixed JS 코드 2차 수정본 3. 수정: Position Sticky를 구현하는 Fixed JS 코드 3차 수정본 4. 수정: Position Sticky를 구현하는 Fixed JS 코드 4차 수정본 5. 활용: 본문 cloneNode()를 사용하여 DOM 객체의 복제본을 만들지 않고, siblings()를 사용하여 'position: fixed' 지정할 객체의 위 혹은 아래 객체(element)에 margin 속성을 부여하는 방법입니다. 1. 'position: fixed' 객체의 빠져나간 공간을 상위 sibling 객체에 marginBottom을 지정하여 메우는.. 2021. 10. 5. Position Sticky를 구현하는 Fixed JS 코드 4차 수정본 2021.04.19 - [IT/코딩 Javascript] - Position Sticky를 구현하는 Fixed JS 코드 오류 수정 2021.06.10 - [IT/코딩 Javascript] - Position Sticky를 구현하는 Fixed JS 코드 2차 수정본 2021.06.13 - [IT/코딩 Javascript] - Position Sticky를 구현하는 Fixed JS 코드 3차 수정본 2021.10.05 - [IT/코딩 Javascript] - Position Sticky를 구현하는 Fixed JS 코드 활용 4차 수정 코드 const nav = document.getElementById('main-header'), rectTop = nav.offsetTop, tmp = nav.cloneNo.. 2021. 9. 28. position absolute의 height 설정 position: relative + position: absolute "position: relative" 객체는 document의 정상적인 흐름을 따르지만, "position: absolute" 객체는 그 흐름에서 튀어나와 분리됩니다. position 속성에 absolute 값을 지닌 child(자식) 객체에 top, bottom, left, right, height, width 값을 설정할 때 "position: relative" 값을 가진 가장 가까운 parent(상위, 부모) 객체를 기준으로 지정합니다. 바로 상위 객체에 position 속성으로 relative 값을 가진 객체가 없을 경우 찾을 때까지 더 상위 객체로 거슬러 올라갑니다. 만약에 없을 경우에는 - "document body"를 이.. 2021. 8. 31. Position Sticky를 구현하는 Fixed JS 코드 3차 수정본 1. 원글: Position Sticky를 구현하는 Fixed JS 코드 오류 수정 2. 수정: Position Sticky를 구현하는 Fixed JS 코드 2차 수정본 3. 수정: 본문 4. 수정: Position Sticky를 구현하는 Fixed JS 코드 4차 수정본 5. 활용: Position Sticky를 구현하는 Fixed JS 코드 활용 2, 3차 수정 코드 비교하고 간단한 설명 덧붙입니다. ※ The HTMLElement.offsetTop read-only property returns the distance of the outer border of the current element relative to the inner border of the top of the offsetParent.. 2021. 6. 13. Position Sticky를 구현하는 Fixed JS 코드 2차 수정본 1. 원글: Position Sticky를 구현하는 Fixed JS 코드 오류 수정 2. 수정: 본문 3. 수정: Position Sticky를 구현하는 Fixed JS 코드 3차 수정 4. 수정: Position Sticky를 구현하는 Fixed JS 코드 4차 수정 5. 활용: Position Sticky를 구현하는 Fixed JS 코드 활용 윗글에 이어서 다시 수정한 부분을 반영하여 설명 진행합니다. 수정 내역 1. 블로그의 댓글 리스트에서 한 항목 링크를 누르면 페이지가 열리면서 하단 댓글 리스트로 이동합니다. 이때 "position: fixed"입니다. 페이지의 최상단으로 이동하면 "position: static"으로 변경되어야 하는 데, 오류 때문에 바뀌지 않습니다. 위치 코드를 출력하는 검사.. 2021. 6. 10. Position Sticky를 구현하는 Fixed JS 코드 오류 수정 1. 원글: 본문 2. 수정: Position Sticky를 구현하는 Fixed JS 코드 2차 수정 3. 수정: Position Sticky를 구현하는 Fixed JS 코드 3차 수정 4. 수정: Position Sticky를 구현하는 Fixed JS 코드 4차 수정 5. 활용: Position Sticky를 구현하는 Fixed JS 코드 활용 Position Sticky는 웹 페이지의 일부 Element가 사전 설정한 지점에서 움직임을 중지하고 고정되어 Position Fixed의 기능을 시작하는 매우 유용한 CSS 코드입니다. "Position Relative + Position Fixed"를 하나로 통합한 것이라고 말할 수 있습니다. 대형 포털과 블로그 등 여러 사이트의 페이지 상단에 배치된 내.. 2021. 4. 19.
