브라우저를 줄일 때 화면 깨짐

Question

pc버전에서 브라우저 화면을 줄일 때 저렇게 화면이 깨지는데실제 다른 웹 사이트 처럼 화면을 줄여도 안 깨질려면 max-width 768 버전 말고 max-width 1200도 같이 만들어줘야 하나요?

Answer

브라우저 줄일 때 아예 가로 스크롤을 만들지 않으려면 Flex로 배치하는 것이 가장 이상적입니다.

그런데 지금 강의는 플렉스를 사용한 강의가 아니니까 나중에 플렉스를 배우시고 웹사이트 만드실 때 하시면 됩니다.

Answer

태블릿까지 생각하면 min-width: 768px and max-width: 1024px 해주시면 됩니다.

그런데 현재는 실무에서 하는 작업은 아니니까 max-width 768 이 정도까지만 하셔도 좋습니다.

물론 하시면 좋지만 손이 너무 많이 갑니다.

그리고 화면처럼 보이는게 보기 싫으시면 max-width: 1200에서만 네비게이션 부분만 퍼센트로 조정하시면 됩니다. 만약 header의 inner가 1200에 오면 width: 100% 이런 식으로 해주시면 됩니다.