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..
Colab 연결 끊어지지 않게 유지하는 법
function ClickConnect() { document .querySelector("#top-toolbar > colab-connect-button") .shadowRoot.querySelector("#connect") .click(); var today = new Date(); var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds(); console.log("Colab connected. " + time); } setInterval(ClickConnect, 60000); 이 코드는 일분(60000ms)에 한 번씩 Connect 버튼을 눌러주는 코드고 function HidePopUp() { let style..
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..
Big Sur 구글 드라이브 폴더 아이콘 바꾸기
구글 드라이브를 사용할 때 마다 구글이 아이콘 업데이트를 안 해줘서 항상 눈에 거슬렸는데요. 아이콘을 바꿔도 봤는데, 앱 속에 아이콘이 내장되어 있어서 바꿔도 껐다 켜면 아이콘이 다시 돌아온답니다... 그래서 껐다 켜도 돌아오지 않게 영구적으로 바꾸는 법을 알려 드릴게요. 어플리케이션 폴더에 들어가 Backup and sync from Google 앱에서 오른쪽 버튼, 눌러 패키지 내용 보기를 눌러 앱 폴더를 열어주세요 Resources/lib/python2.7/resources/images/folder-mac-yosemite.icns Resources/folder-mac-yosemite.icns 그다음엔 이렇게 두 곳에 있는 folder-mac-yosemite.icns 파일을 원하는 아이콘 파일로 바꿔..
티스토리 새 에디터에서 gif 안 움직일때 해결법
오랜만에 티스토리를 다시 시작했는데 새로 바뀐 에디터에서 gif를 올리면 이미지가 움직이지를 않더라고요... 그래서 페이지 코드를 확인해 보니까 이전 에디터에서는 사용하지 않던 srcset을 사용하더군요. srcset은 화면 크기에 따라 다른 크기의 이미지를 불러와서 이미지가 깨지지 않으면서도 이미지 파일의 크기가 필요 이상으로 커서 로딩 속도가 느려지는 것을 방지하는데 쓰이는데요. 이 다른 크기의 gif들로 변환하면서 이미지가 움직이지 않게 되는 것 같아요. 원본 gif는 잘 움직이는데 srcset 주소의 이미지는 안 움직이는게 보이시죠? 그래서 저는 이렇게 간단히 jQuery 코드를 추가해서 해결했답니다. 이 코드를 스킨편집에 들어가셔서 태그 안에 붙여 넣어 주시면 gif 가 움직일 거예요 혹시 블로..
맥 10년차 유저가 알려주는 메모앱 활용법
맥 메모앱은 간단하면서도 잘만 활용하면 왠만한 유료앱 이상으로 활용할 수 있는 앱이라고 생각해요. 저는 메모앱을 학교, 일 그리고 공부할때에도 사용하고 있는데요. 일반 맥 사용자들이 잘 모를 수 있는 메모앱 활용법을 알려드려 볼까 해요 폴더 정리, 이모티콘 활용 맥 메모앱에선 태그를 지원하지 않지만 폴더를 잘 사용하면 비슷한 효과를 줄 수 있어요. 메모앱은 폴더 아래 서브 폴더도 지원하고, 각 폴더 안에서 중요한 메모를 고정해 둘수도 있죠. 그리고 폴더명에 이모티콘을 사용하면 더 쉽게 구분할 수 있어요. 이모티콘은 Ctrl ⌘ Space 단축키로 간단히 삽입할 수 있답니다. 아이폰 / 아이패드를 사용한 이미지 삽입, 편집 메모앱 위쪽에 있는 이미지 아이콘을 클릭하면 아이폰 또는 아이패드를 이용해 사진을 ..