반응형웹에 대한 미디어쿼리의 사용
처음에 미디어 쿼리를 디바이스별로 정리를 해볼까 하다가 새로운 디바이스가 나올때마다 해상도 파악하고 기록하고... 삽질할 것을 생각하니 엄두가 나지 않아서 범용적으로 사용할 수 있는 방법으로 정리를 해야할 것 같아 포스팅을 합니다. 그래도 먼저 디바이스별 해상도에 대해서 궁금한 사람이 있을 수 있으니 신상 디바이스까지 업데이트를 잘 해주고 있는 사이트를 2개 공유하고 넘어 갑니다. mydevice screensiz.es 기본 설정 반응형웹을 적용하기 위해서는 먼저 meta viewport 를 설정해 줘야 합니다. meta viewport 의 width 를 device-width 로 지정하고 initial-scale 을 1 로 설정을 해 줘야 합니다. width=device-width : 화면의 넓이를 디바이스(단말기)의 넓이로 지정 initial-scale=1 : 기본 사이즈를 1로 지정하겠다고 선언 <meta name="viewport" content="width=device-width, initial-scale=1"> 이렇게 설정하면 다양한 크기의 화면에서도 보기에 편한 텍스트 크기와 레이아웃을 유지해 줍니다. 미디어쿼리 지정 기본설정을 했으면 이번에 다양한 크기(해상도)의 디바이스에 따라 CSS 가 다르게 적용될 수 있게 미디어쿼리(Media Query)를 지정해야 합니다. Breakpoints는 부트스트랩(Bootstrap)을 참조하였으며 그에 해당하는 미디어쿼리는 아래와 같이 가로 해상도에 따라 5가지로 구분할 수 있습니다. 반응형 웹개발에 있어서 고려해야 할 점이 있는데 모바일 퍼스트 로 개발을 할 것이냐 하는 것입니다. 모바일 퍼스트 개발은 화면 구현 시 먼저 모바일 화면을 기준으로 디자인(CSS)을 하고 차츰 태블릿 화면, 데스트탑 화면으로 디자인을 구현하는 것을 말합니다. 반응형 웹개발 시 근래의 추세는 모바일 퍼스트 로 개발하는 추세이긴 합니다만 상황에 따라서