[React/TypeScript] 최종프로젝트 - Mango(환경오염 줄이기 / 지구 살리기 프로젝트!) (진행 중) - 모바일 반응형 구현하기

 

막막하기만 했던 반응형을 드디어 구현하게 되었다.

방법은 생각보다 간단했다

 

 

 

 

@media screen and (max-width: 431px) { } 라는 코드로 최대 넓이를 설정해주고 {} 안에 431px 미만일 때,

적용될 CSS를 쓰면된다. 만약 반응형 코드에 쓰지 않은 스타일이 있다면 원래 사용된 CSS로 적용이 된다.

즉, 431px 미만일 때, 이상하게 보여지는 CSS만 수정하면 되는 것

 

하다 보니, 반응형을 할 예정이면 무조건 같이 구현해야 한다는 것을 깨달았다.

처음부터 웹용으로만 만들다보니 잘 되지 않았다. 특히 스타일 컴포넌트를 구성하는 곳에서 어려움을 마주해야 했다

그래서 구조를 새롭게 짜거나 추가하는 경우가 꽤 있었다. 또한 다양한 넓이의 모바일이 존재했기 때문에

우리는 우선 아이폰 14 맥스에 맞추게 되었다. 그 보다 더 큰 넓이의 모바일에서 본다면 많이 깨지는데..

이건 다시 고민을 해봐야 하는 문제이다.

팀원들이 다 처음이었기 때문에 같이 구현해야 하는 중요성을 몰랐었다. 

그래도 생각보다 일찍 끝나서 다행이다. 자잘하게 남은 것만 수정하면 끝

 

밑에는 내가 맡은 mypage의 반응형 버전이다.

 

 

 

프로필 수정시