허도경, limewhale

📘 반응형 웹이란? 웹 사이트는 크게 적응형과 반응형으로 나눌 수 있습니다. 아니 적응형은 뭐고 반응형은 또 뭔가요??🥶🥶🥶 적응형은 사용자의 환경에 최적화 되게 PC와 모바일 환경을 구분해서 두 개의 웹 사이트 주소로 각각 구성된 화면을 보여줍니다. 예를 들어 모바일 사용자가 네이버에 접속하면 m.naver.com에 접속되고 PC 사용자는 www.naver.com 주소로 접속 됩니다. 반면 반응형은 웹 사이트 크기에 따라서 화면의 UI가 변경되면서 사용자에게 최적화된 화면을 제공해주는 방식입니다. 두 개의 가장 큰 차이점은 하나의 소스로 관리되며 화면의 브라우저 크기에 맞게 최적화된 UI를 제공하는가(반응형) 아니면 두 개의 소스로 관리하면서 사용자에게 모바일, PC의 최적의 화면을 각각 제공하는가의 ..

반응형 웹 테블릿과 스마트폰에서도 인터넷을 사용할수 있게 되자 각 기기 화면 크기에 따라서 사용자들에게 최적화 된 화면을 재공하기 위해 웹 페이지의 사이즈가 '재조정' 되는 것을 말합니다. react-responsive 셋팅 npx create-react-app 작업폴더명 ※ 작업폴더 이름을 react-responsive로 하면 오류가 나니 라이브러리 이름과 다르게 만들어야 합니다. cd 작업폴더명 (작업폴더로 이동) npm install react-responsive npm install @types/react-responsive (typescript를 사용하는 서비스이기 때문에 아래 모듈도 설치 해줍니다. useMediaQuery 문법 const 변수명 = useMediaQuery ({ query :..

이제는 많은 분들이 아시지만 다시 예전의 내용을 정리하게 되면서 내용을 정리해 봅니다. 요즘은 동영상이나 youtube 영상을 웹에 바로 보여주는 경우가 많습니다. 이럴 때 가로 사이즈가 고정된 사이즈면 상관없지만 다양한 사이즈의 모바일이나 반응형 웹 화면으로 화면을 구성한다면 가로 화면 폭 사이즈에 맞게 해당 세로 값 화면 값을 유동적으로 변경될 수 있도록 해 주어야 화면이 틀어지거나 비율이 이상하게 나오지 않고 정상적인 화면이 유지됩니다. 요즘 영상은 16:9 화면 비율이 일반적이기 때문에 해당 화면을 비례식으로 놓고 계산하면 대략 56.26% 라는 값이 나오게 됩니다. 비율 값은 어떤 값으로 적용하냐에 따라서 조금은 차이가 있을 수 있습니다. 참고 : 비례식 공식 기본값(100) : 사용할 영상(박..