반응형  @media

반응형의 반댓말은 적응형이다

보여줄 데이터의 양이 많을 경우 적응형으로 만드는것이 유리하다

사람마다 모니터의 사이즈가 다르기 때문에 가로는 1024px 세로는 1200px 로 기준을 잡는다

양 옆으로 남는 공간은 중요하지 않은 데이터를 담아주거나 빈공간으로 남긴다

요즘은 사람들이 데이터를 접하는 형태(pc, tablet, mobile)가 다양하기 때문에 그 크기에 맞춰서 작업을 해준다

가장 유명한 프레임워크는 부트스트랩 인데 너무 많이 써서 오히려 쓰지말자! 라는 회사가 생겨났다
하지만 그 화면의 크기는 잘 정리해서 보여주기에 참고하기에 좋다!

화면 크기를 참고!

반응형을 만들어 줄때는 화면 크기 상황에 맞게 하나씩 모두 설정해 주어야 한다
개발자에게는 번거롭지만 유저에게는 친화적이다

화면을 작게 만들었을 때 많이 사용되는 방법은
1. 전체사이즈를 줄이는 방법
2. 가로 사이즈만 줄이는 방법 (주로 사용 된다! 세로는 스크롤 형태로 처리한다)

모바일 사이즈를 만들 때 어떤 핸드폰 사이즈에 맞출 것인가?
1. 가장 많이 사용하는 핸드폰
2. 만약 3가지 종류가 있다면 가장 작은 사이즈에 맞춰서 제작 (아이폰 미니!)

만약에 프레임워크를 이용해 제작하였다면 의존성이 너무 높아 다른 프레임워크와의 혼용이 어렵다

전체사이즈를 바꾸고 싶을 때는 rem 이라는 단위를 사용하며 body태그의 폰트사이즈에 의존하고 있다 body태그의 폰트사이즈가 커지면 다 커진다! 구글에 px to rem 를 쳐보면 원하는 픽셀 얻을 수 있음!!

‏‏‎ ‎

em도 사이즈를 바꿀 수 있는 단위이며 부모의 사이즈에 맞게 자식의 사이즈가 바뀌는것이다