# resize
[오무] 리팩토링 : 모바일에서 서비스 사용 막기 + 화면 너비에 따라 콘텐츠 개수 조절하기
550px 이하인 브라우저에서 서비스를 사용할 수 없게 하려고 한다.1\. innerWidth를 가져와야하고2\. innerWidth에 따라 resize event를 추가해준다.이때 렌더링이 너무 많이 일어날 수 있어 useEffect에 넣는다.말그대로 resize라서
resize
사이드 프로젝트를 하는데, 화면크기와 사이드바에 따라 하위 컴포넌트의 크기를 감지해줘야하는 경우가 생겼다. 찾아본 결과로는 npm에서 resize-observer와 관련된 라이브러리를 사용하는 방법과 자바스크립트 이벤트중 하나인 resize를 이용해 미디어쿼리를 적용하
모바일 기기 가로/세로 방향 확인
https://stackoverflow.com/questions/4917664/detect-viewport-orientation-if-orientation-is-portrait-display-alert-message-adportrait 세로, landscape
[JS] 17 - 이벤트 처리 - scroll
스크롤바의 Y좌표 const scrollTop = window.scrollY;웹 브라우저의 창 높이 const windowHeight = window.screen.availHeight;HTML 문서의 높이 const documentHeight

7/8 13일차
오늘은 마이페이지 디자인이 전체적으로 나와서 css를 만졌다.중요한 것은 이 정도인 것 같다.피그마의 사진을 처음 export 해봤다!이미지를 저장한 뒤, 프로젝트 파일에 옮겼다.위치는 src > public > img 가 보편적이라고 한다.그리고 이미지를 쓰려면 im

<textarea> 요소 크기 고정하기
기본적으로 <textarea>의 크기를 조정할 수 있는 도구를 제공한다.위의 그림에서 빨간 동그라미 부분을 마우스로 클릭하여 드래그 하면 크기가 그에 따라 달라진다.하지만 해당 도구가 가끔은 필요하지 않을 때가 있다.속성을 부여함으로 textarea 양식의 크기를
제이쿼리 브라우저 리사이즈
미디어 쿼리를 하다보면 느끼는건데 JS로는 반응형 제작이 어려울까 생각 하던도중 window resize 기능을 사용하면 될것 같은 생각이 든다.코드를 보자면, resize 함수에서 브라우저 해상도가 768 이하라면 serch_input 클래스의 display를 non

Nutanix CSI 사용시 resize 안되는 현상
최근 진행중인 프로젝트에서 Nutanix HCI 환경에서 쿠버네티스 클러스터를 구성하여 구축 및 운영을 진행중이다. Nutanix에서는 공식적으로 CSI Driver를 지원하고 있으며 Nutanix Files, Nutanix Volumes 타입 등이 있다. 참고 : 뉴
22.01.27 TIL - CSS resize
resize 속성은 textarea 에만 적용했었는데 알고보니 textarea 말고도 다른 html 태그들에도 적용이 가능했다.resize 속성을 적용할 수 없는 조건은 다음과 같다.inline 요소overflow 속성이 visible인 Block 요소htmlcss랜더

[Flutter Library] flutter_screenutil
이번 포스트에서는 푸념같은 여담을 해보자면, 핸드폰 화면 크기와 해상도가 천차만별인 시대에 기기마다 딱 맞는 화면을 그리는 일은 큰 골칫거리 중에 하나였습니다. 안드로이드 네이티브에서 ‘GuideLine’으로 해결했던 문제를 플러터로 넘어왔을 때에도 역시 마주쳤고 저희
Resize Observer
와인오디오 3차 리뉴얼 작업-반응형 Navigation 작업 중 Javascript에서 스크린의 width값을 체크하며 특정 width값 이하가 되면 true/false값을 시켜주는 변수가 있었으면 좋겠다는 생각이 들었다. 그래서 바로 구글링을 해보니 resize 이벤
python pillow resize, thumbnail 사용 시 이미지 rotate되는 문제 해결
python pillow라이브러리를 통해 thumbnail을 만들었는데, 몇몇 결과 사진이 아래 예시처럼 rotate되는 현상이 발생함. (모든 사진이 그런건 아니고 특정 사진에서만 rotate됨)<a href="https://stackoverflow.c

[Jquery - 실습]window resize를 이용한 공튀기기
resize()메서드를 이용해 창에 닿으면 공이 튕겨나가는 기능을 구현하는 것을 통해 윈도우 크기가 바뀔 때 일어나는 이벤트를 제어하는 문법을 이해한다..resize()\-. 윈도우 크기가 바뀔 때 어떤 작업을 할 수 있게 한다.syntax $( window ).res
[React(Typescript)] resize 이벤트 처리 & in NEXT.js
1. React/Typescript/Next.js에서의 resize Event 처리 2. lodash의 debounce / window is not defined / Expected server HTML to contain a matching <div> in <div>
앱에서 서버로 부터 받은 이미지 로딩 시 속도 느린 경우
이미지 리사이즈 - 반드시 필요. 서버에서 클라이언트로 보내주기 전에 이미지를 리사이징한다.이미지 최적화 - 올바른 형식과 퀄리티를 선택해야한다.적절한 CDN(Content Delivery Networks) 선택 - CDN들은 글로벌하게 분산된 캐시/프록시 서버의 집합