목록2024/02/01 (1)

나의 개발일지

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

막막하기만 했던 반응형을 드디어 구현하게 되었다. 방법은 생각보다 간단했다 @media screen and (max-width: 431px) { } 라는 코드로 최대 넓이를 설정해주고 {} 안에 431px 미만일 때, 적용될 CSS를 쓰면된다. 만약 반응형 코드에 쓰지 않은 스타일이 있다면 원래 사용된 CSS로 적용이 된다. 즉, 431px 미만일 때, 이상하게 보여지는 CSS만 수정하면 되는 것 하다 보니, 반응형을 할 예정이면 무조건 같이 구현해야 한다는 것을 깨달았다. 처음부터 웹용으로만 만들다보니 잘 되지 않았다. 특히 스타일 컴포넌트를 구성하는 곳에서 어려움을 마주해야 했다 그래서 구조를 새롭게 짜거나 추가하는 경우가 꽤 있었다. 또한 다양한 넓이의 모바일이 존재했기 때문에 우리는 우선 아이폰 ..
과제 및 팀프로젝트 2024. 2. 1. 19:11
이전 Prev 1 Next 다음