material-ui
-
[React] How to make responsive components according to the screen size.(리엑트 화면 사이즈에 따른 반응형 컴포넌트 만들기)Frontend/react 2020. 10. 16. 15:55
요즘 반응형 웹 페이지 제작은 필수이다. 리엑트로도 당연히 가능하다. 현재 페이지의 대부분을 material-ui의 Grid를 사용해서 레이아웃을 관리한다. 그런데 브라우저 창 크기의 변화에 따라 direction을 row에서 column으로 변경하고 싶은데 Grid에서 그런 기능을 해주는 부분은 찾지 못했다. (결론부터 보고 싶으면 스크롤을 좀 내리길.) 일단 구글링,, 이곳저곳 찾아봤다. 'flex' 'flex-direction' 과 같은 키워드로 많은 글들이 보이는데, 거의 레이아웃에 대한 기본적인 설명이었다. 그러다 w3schools.com에서 한가지를 발견했다. www.w3schools.com/cssref/css3_pr_flex-direction.asp @media를 사용한 예제로 친절하게 데모..