CSS 스타일링을 모니터 기준으로 했기 때문에 모바일로 보았을 때 스타일이 깨져 보이거나 정상적인 사용을 하기에 불편한 부분이 몇 군데 있었다. 이를 해결하기 위해 크롬 개발자 도구 모바일 Galaxy Fold를 기준으로 화면을 확인해 가며 반응형 스타일링을 진행했다. Galaxy Fold를 기준으로 한 이유는 가장 가로 폭이 작아 예외처리하기 좋기 때문이다. @media screen and (min-width: 280px) and (max-width: 650px) 미디어 쿼리를 이용해 280px(갤럭시 폴드) ~ 650px까지의 화면에 대한 스타일링을 개별적으로 진행하였다. 1. Home 화면 🔨수정해야 할 부분 문제점 새 일기 작성 버튼이 div를 벗어나 있다. (개발자 도구를 이용해 다른 요소들과 ..

오류 상황 미디어쿼리를 다음과 같이 작성했음에도 모바일 화면에 원하는 결과가 나오지 않는 오류 발생 @media screen and (min-width: 320px) and (max-width: 800px) { /*css코드*/ } 라는 오류가 발생하고 onclick이벤트가 동작하지 않는 오류 발생 해결 html의 안에 다음 코드를 추가한다. width=device-width: 화면의 넓이를 디바이스의 넓이로 지정 initial-scale=1: 초기 화면 배율 참고: https://hohoya33.tistory.com/127 CSS 미디어 쿼리 디바이스별 해상도 분기점 기본적으로 반응형웹을 적용하기 위해서 먼저 HTML head 부분에 meta viewport를 설정해주어야 합니다. width=devic..