INJE BLOG
WASTING YOUR TIME
SINCE 2017
iOS 사파리 100vh 문제 해결법
아이폰에서는 100vh가 창보다 길게 설정됩니다. 한번 볼까요? .fill-screen { height: 100vh; width: 100vw; } 간단한 해결법은 100vh 대신 -webkit-fill-available를 사용하는 것입니다. .fill-screen { height: -webkit-fill-available; width: 100vw; } 문제는 크롬과 같은 지원하지 않는 데스크탑 브라우저들이 있다는 것이죠. 해결 하려면 -webkit-fill-available가 iOS 환경에서만 적용되도록 하면 됩니다. @supports (-webkit-touch-callout: none)를 사용하면 iOS 환경만 선택할 수 있죠. .fill-screen { height: 100vh; width: 100v..
Sass를 이용해 반응형 웹페이지 효율적으로 작성하기
Sass에서는 변수를 사용해서 편리하게 css 코드를 작성할 수 있는데요. @media 쿼리를 이용해 반응형 웹페이지를 작성할 때에는 문제가 발생합니다. $header-height: 90px; .header { height: $header-height; } @media only screen and (max-width: 768px) { $header-height: 70px; } 이렇게 작성하면 모바일에서 header-height가 70px 로 바뀔 것 같지만 .header { height: 90px; } /*# sourceMappingURL=test.css.map */ 컴파일을 해 보면 아무일도 일어나지 않는 걸 볼 수 있죠. $header-height: 90px; .header { height: $hea..
jQuery 창 가로길이에 따른 함수 적용하기
반응형 사이트나 모바일 사이트를 만들 때 함수가 특정 화면 넓이에서만 작동해야 할때가 있죠? 그럴땐 아래와 같이 width() 를 사용하면 되는데요 if($(window).width() > 768) { /* do something */ } 이 방법을 쓰면 함수를 실행했을 때 넓이만 인식을 하고 창 크기를 조정하는건 인식을 못한답니다 예를들어 768px 보다 클때만 배경음악이 나오는 사이트를 생각해 볼까요? 처음에 1000px 짜리 창을 켜고, 700px 로 줄이면 분명 768px 보다 작지만 노래가 계속 나오게 된다는 거죠 그럼 어떻게 해야할까요? resize() 함수를 사용하면 됩니다! $(window).resize(function() { if($(window).width() > 768) { /* do..