[CSS]반응형 웹 미디어쿼리
반응형 웹이란?
웹사이트가 모바일기기와 다른 다양한 화면의 크기에서 더 나은 사용자 경험을 주기위한 방법 중 하나이다.
반응형웹은 하나의 템플릿으로 화면의 사이즈를 감지해 그에 맞춘 화면을 보여준다. 지금 이 블로그도 반응형이다. 화면의 가로를 줄이고 늘려보면 사이즈에 맞는 화면을 보여준다.
반응형 웹 외에는 적응형웹이 있다. 이것은 사용자의 기기를 감지해 그에 맞는 템플릿을 띄워주게 된다. 보통 m.naver.com과 같이 다른 url을 사용한다.
장점
- 유지보수가 효울적이다.
- 적응형웹과 달리 하나의 템플릿으로 관리하므로 유지보수가 쉬워진다.
- 사용자 입장에서 기기의 구애를 받지 않고 최적의 화면을 경험할 수 있다.
- 검색엔진 최적화 (SEO)에 유리하다.
- PC URL과 모바일용URL이 동일하기 때문에 검색포털등 광고를 통한 접속을 효율적으로 관리할 수 있다.
단점
- 한페이지의 리소스가 많아 진다.
- 웹 브라우저의 호환성 문제를 고려해야한다.
- IE 8 이하에서 사용불가하다.
- 디자인의 자유도가 떨어진다.
- 디자인에 따라 작업량이 많아질 수 있다.
구현 방법
이미지출처 https://blog.helloweb.co.kr/hello-web-ecommerce-responsive-web/
반응형을 작성하기 전에 처음 모바일을 기준으로 CSS를 작성한 이후 데스크탑으로 늘려갈것인지, 데스크탑을 기준으로 이후 모바일로 점차 줄여갈것 인지 정해야한다.
이후 breakpoint를 정한다. bootstrap library가 기본으로 권장하는 지점은 1200px(desktop) / 992px(laptop) / 768px(tablet) / 576px(mobile) 이렇게 4개정도이다. 혹은 1200px / 768px / 480px 이렇게 3분기로 나누기도 한다.
이후 CSS 하단에 미디어쿼리를 통해 구현한다.
/* pc 기준 */
@media screen and (max-width: 1200px) {... }
@media screen and (max-width: 992px) {... }
@media screen and (max-width: 768px) {... }
@media screen and (max-width: 576px) {... }
/* mobile기준 */
@media screen and (max-width: 576px) {... }
@media screen and (max-width: 768px) {... }
@media screen and (max-width: 992px) {... }
@media screen and (max-width: 1200px) {... }
혹은 필요에 따라서 @media screen and (min-height:640px) and (min-width:480px) and를 붙여 사용할 수 있다.
미디어 쿼리를 정확하게 적용시키기 위해서는 해더에 viewport 지정을 해주어야한다. 주로 모바일을 위한 기능이다. 처음 로딩이 되었을때 이미지 사이즈의 확대와 축소를 가능여부를 작성할 수 있다.
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1, user-scalable=yes,initial-scale=1.0" />
< Refer to >
Leave a comment