css

모달이나 팝업같은 UI를 만들때 body 컨텐츠 영역이 스크롤하는 것을 방지해야하는 필요가 있습니다. 그래서 필자는 모달이나 팝업이 떠있을때 body에 추가로 클래스를 부여해서 overflow-hidden을 함으로 데스크탑에서는 스크롤을 방지했었다. 하지만 모바일 테스트를 하면서 IOS에서는 overflow-hidden이 되어도 스크롤이 되는 문제가 있었고 위 코드를 통해서 IOS에서도 Body overflow hidden을 제대로 적용해줄 수 있었다. 추가로 최신 브라우저를 사용하는 경우 간단하게 css의 … Continued

ie11에서는 가상선택자의 포지션의 값을 %로 나타내면 재대로 렌더링 하지 못하는 이슈를 알게되었다. 그래서 ie11에서만 고정적인 값으로 포지션값을 수정했다.

TOC를 만들면서 특정 요소로 스크롤하는 기능을 추가했습니다. 저는 ie를 지원하지 않기 때문에 window.scrollTo를 사용해서 값을 구해서하는 방식이 아니라 조금 깔끔하게 구현하기 위해서 Element.scrollIntoView()를 사용했습니다. 문제는 이전처럼 값으로 window.scollTo로 이동한다면 여백을 스크립트에서 적용해서 이동하는 위치를 조절할 수 있지만 Element.scrollIntoView()에서는 따로 여백에 대한 값을 설정할 수 없었습니다. 여러가지 찾아보다가 간단하게 css의 값으로만 특정요소로 이동할 element에 아래처럼 스타일만 … Continued