내가 레퍼런스가 되자 내가 레퍼런스가 되자

최근 Tablet과 Mobile에서 사용 중인 landscape를 인식하는 로직에 이슈가 발생하여 확인하게 되었습니다. 해당 부분 내용을 남겨두면 좋을 것 같아 포스팅하게 되었습니다. 해결 과정기존 landscape 로직은 아래와 같습니다. device detect 관련 로직은 제외했습니다. const width = window.outerWidth; const height = window.outerHeight; const isOverLandscapeRatio = width / height > 16 / 9; const isLandscapeOrientation = screen.orientation.type.includes('landscape'); const isLandscape = isOverLa..

최근에 작업을 진행하면서 CSS의 backdrop-filter를 사용할 일이 있었습니다. backdrop-filter를 사용하면서 이슈도 있었고 이번 기회에 CSS의 filter와 backdrop-filter 내용을 정리하게 되었습니다. filter? backdrop-filter?filter와 backdrop-filter는 CSS 속성으로 요소에 그래픽 효과를 적용합니다. filter와 backdrop-filter는 같은 구문을 가지며 많이 사용하는 필터 함수를 살펴보겠습니다./* 흐림 처리 */filter: blur(5px);/* 밝기 조절 */filter: brightness(0.4);/* 색상 대비 조절 */filter: contrast(200%);/* shadow 처리 */filter: drop-..

height가 전체를 차지하는 화면을 개발할 때 100vh를 사용합니다. 하지만 모바일에서 해당 화면을 보면 주소창 때문에 잘려 보여 곤란한 상황이 생깁니다. vh 단위는 주소창이 없는 화면을 기준으로 설정되어 있어 이와 같은 이슈가 발생하게 됩니다. 스크립트로 해결할 수도 있지만 css 단위로 깔끔하게 처리하는 방법을 알아보겠습니다. vh? css 단위 중 vh는 viewport height로 스크린의 가시 height를 백분율로 나타냅니다. 현재 스크린의 height가 800px일 경우 1vh는 8px이 되며 10vh는 80px이 됩니다. 이처럼 vh는 백분율로 나타내어 사용합니다. 또한 vh 단위는 width에서도 사용이 가능합니다. 그러면 100%와 100vh의 차이가 무엇인지 궁금증을 가질 수 ..