Bleeding edge

"화면의 너비에 따라 아이콘 크기 변경하기"라는 주제로, 화면 크기에 따라 유연하게 아이콘 크기를 조정하는 방법을 정리해보겠습니다. 이 방법은 특히 이미지와의 상호작용이 필요한 경우나, 부모 요소의 너비가 명시되지 않아 % 단위를 사용할 수 없는 상황에서 유용합니다. 주로 네비게이션 아이콘이나 햄버거 메뉴 아이콘처럼 고정된 크기의 아이콘이 아닌, 다양한 해상도에서 크기가 조정되어야 하는 아이콘에 적용할 수 있습니다.방법 개요아이콘 크기 조정 시 화면의 max-width가 설정된 경우와 그렇지 않은 경우가 있는데요, 이 글에서는 max-width가 지정된 경우를 다루겠습니다. 가장 작은 화면에서도 동일한 논리를 반대로 적용해 크기를 조정할 수 있습니다.1. 미디어 쿼리로 기본 크기 설정먼저, 화면 너비가 ..

이번에 노마드 코더 슬랙채널에서 티스토리 성능 개선하는 방법에 대한 질문의 글이 올라와서 그냥 스레드에 글을 남기기엔 긴 것 같아서 블로그에 정리를 하게 되었다. 우선 슬랙채널에 올라온 스킨은 #1 였고, 나는 #2 였다. 스킨이 다르더라도 공통되는 진단사항을 수정하는 것이 좋을 것 같아서 그 사항을 수정하려고 한다. # 2스킨에서 진단하였을 때 나온 문제점은 요렇게 5가지가 있었고 공통되는 사항은 4가지였다.이 중에서 차세대 형식이미지 제공은 jpeg를 webp로 바꾸는 것을 의미하고, 효율적으로 이미지 인코딩 역시 이미지 사이즈를 변경하는 것이니, 코드로 해결할 수 있는 것에 한계가 있음으로 생략하겠다 # 0 스킨 편집하는 페이지로 이동 1번을 시작하기에 앞서 우선 스킨을 편집하는 페이지로 이동하는 ..

보통 pc를 고려해서 웹을 만드는 경우에는 hover정도만 고려해서 css를 만들라는 요구사항이 있어서 크게 고민해본 적이 없었는데.. 최근에 react-native와 webview를 이용하여 프로젝트를 진행하다보니 마우스를 pressed를 하는 경우 다른 상태로 버튼을 적용하는 것을 만들일 일 생겼다. 임시 해결 방법 버튼을 누르고 있는 상태를 pseudo class로 캐치하는 방법이 당장에 나지 않았고, 고민할 시간이 없어서 빠르게 touchmove event를 이용하여 pressed를 감지했다. 문제점 버튼이 눌리고 있는 것에 대한 유무에 따라서 무언가 다른 변화가 없는데, 굳이 이를 상태로 관리하는 것보다는 hover와 같이 pseudo class로 해결하는 방법에 대해서 찾아봤다. 해결 방법 :..

css처럼 애니메이션을 바로 사용하게 된다면 scss에서는 문제가 발생한다. 이유는 애니메이션의 name이 바뀐다! 만일 animation이름을 fadeOut이라는 이름을 SnackBar에서 사용하면 애니메이션이름은 다음과 같이 바뀐다 .Snackbar_wrapper{ animation-name: Snackbar_fadeOut__uuidexample; } scss에서는 애니메이션을 제외하고는 이름의 중복을 피해주는 sass 덕분에 편리하지만, 애니메이션에서 mixin을 사용하지 않으면 상당히 불편하다. 그래서 다음과 같은 mixin을 작성하였다. mixin @mixin animate($animation, $duration, $method, $times) { animation-name: $animation..

React Native와 웹뷰를 이용하여 어플리케이션을 만들다보니, 항상 QA를 많이 받는 것이 "앱처럼 만들어 주세요" 였다. 이번 주에는 앱처럼 "페이지가 없는 부분에서는 스크롤을 막아주세요" 라는 요청을 받았다. 해결 만일 x축 y축 모두 막고 싶다면 다음과 같이 사용하면 되지만, 나같은 경우에는 y만 막으면 ok이기 때문에 이 방법을 사용하였다. overscroll-behavior-y: none; 이 부분을 body와 해당하는 div에 추가적으로 적용하면 되지만, default가 되는 부분은 모두 막고 싶었기 때문에 *{ overscroll-behavior-y: none; } 모든 y에 대한 over scroll을 막아버렸다.

스마트폰이나 다른 여러 디바이스가 등장함에 따라서 다양한 aspect를 고려해야 했던 것 처럼, 새로운 모양의 device를 고려해야하는 케이스가 아이폰의 노치가 등장하면서 생겼다. 노치? 우선 아래의 사진을 보자. 처음에는 m.... 이런식으로 많이 표현되었던 모양이지만(개인적으로는 상단에 배터리나 다른 공간을 활용할 수 있기 때문에 꼭 나쁘다고 생각은 하지 않는다) 이건 디바이스인 생각이고, 프론트엔드로써나는 저 노치의 공간이 생겼을 때의 css를 고려할 수밖에 없었다.이전에 웹에서는 노치를 신경을 별로쓰지 않았던 것 같은데 주소창이 없는 웹뷰 react native에서는 이를 고려할 일들이 몇 번 생겼다. 1. 태그 설정 서론이 길었으니 우선 사전작업을 하는 방법을 이야기하면 우선 head태그 안에..

서론 회사에서 최근에 애니메이션을 특정 state의 변화에 넣어달라는 요청을 받았다. height를 0%로 하였을 때 height가 0이 되는 것들 혹은 내가 만드는 컴포넌트의 높이가 정해져 있는 경우에는 쉽게 구현할 수 있었지만, height를 0으로 할 수 없는 경우나, height를 특정할 수 없는 경우에는 transition을 정하기 어려웠다. 시도한 방법 맨 처음에는, hiehgt에 0% 0, 100%를 넣어서 시도해봤었지만 모두 실패였다. react-animation에서는 변할 height를 구해서 inline으로 적용하는 방법을 사용하였다. 하지만, 굳이 이 애니메이션 때문에 라이브러리를 설치하고 싶지는 않아서 마지막으로 max-height를 사용하였다. Max-height 텍스트가 있는 경..

문제가 생기는 이유 특히 싱글페이지로 웹을 개발하는 경우에 많이 만날 수 있는데, 100vh를 적용하면 모바일에 알맞지 않게 나오는 현상이 있다. 이 이유는 device의 높이를 잡을 때 주소창과 같은 dynamic한 요소들 때문에 생긴다. 해결책? 사실 인터넷을 검색하면, webkit fill이나 100%를 이용해서 해결하는 방법과 자바스크립트를 이용해서 vh를 지속적으로 변화시키는 방법이 있는데, 이 방법들은 너무 번거로워서 항상 귀찮았었는데, 요번에 검색을 하다가 새로운 방법을 찾게되었다. dvh, svh https://www.terluinwebdesign.nl/en/css/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw/ Incoming: ..

고민한 이유 보통 before이나 after에는 background-image에 이미지 파일만 사용하여 처리를 많이한다. 하지만 이미지를 올리기 힘든 경우에는 어떻게 처리하는게 좋을까? SVG Tag 이미 이미지 파일 없이 우리는 svg tag를 이용하여 html에 벡터를 사용해본 사람이 많을 것이라고 생각한다. javascript에서 createURLObject를 이용하면 없는 파일을 텍스트로 만드는 것처럼 CSS에서도 이런 방법이 있지 않을까? SVG URL-encoder https://yoksel.github.io/url-encoder/ 이 페이지에 들어가면, svg를 URL-encoder로 바꾸어 주는 기능이 있다. 이것을 이용하면 요런 svg Element를 사이트에서 변환하면 Ready for..