반응형 웹 CSS 미디어쿼리 media query 템플릿 세팅

반응형 웹 CSS 미디어쿼리

반응형 웹

반응형 웹은 PC, 태블릿, 모바일(가로, 세로) 등을 모두 지원할 수 있게끔 설정 해주는 템플릿을 의믜한다. 일반적으로는 CSS의 미디어쿼리를 이용하여 분기처리를 하지만 적응형 웹으로도 사용할 수가 있다. 기기 장치에 따라 CSS 템플릿을 다르게 적재해서 사용하는 것을 의미

몇 년 전만 해도 모바일의 가로 크기는 보통 480px 이하로 작성했는데 노트 플러스, 아이폰 플러스 등의 비교적 큰 화면의 스마트폰이 나오기 시작하면서 모바일의 가로크기가 점점 커지기 시작했다

그리고 PC의 화면은 아직까지는 1920px로 유효하다. 가끔 27인치 이상의 모니터에서는 가로크기를 2500px을 넘기는게 간혹 있긴 한데 아직까지는 크게 신경쓰지 않아도 될 부분이다.

CSS 반응형 웹 작성시 필수적인 기본 미디어쿼리

/* 모바일 세로 화면 */
@media (max-width: 575.98px) {
  /* 코드 작성 */
}

/* 모바일 가로 화면 */
@media (min-width: 576px) and (max-width: 767.98px) {
  /* 코드 작성 */
}

/* 태블릿(갤럭시 탭, 아이패드) 화면 */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* 코드 작성 */
}

/* PC 화면 1200px 이하 */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* 코드 작성 */
}

/* PC 화면 1200px 이상 1920px 이하 */
@media (min-width: 1200px) and (max-width: 1919.99px) {
  /* 코드 작성 */
}

/* PC 화면 1920px 이상 */
@media (min-width: 1920px) {
  /* 코드 작성 */
}

그 외

그 외에도 print, tv, speech, screen 등의 미디어로 분기 시킬 수는 있지만 대체적으로는 all을 많이 사용한다

미디어 타입	설명
all	전부
print	출력 장치(프린터)
screen	모니터, 모바일 디바이스
tv	고화질 tv

좀 더 자세하게 알고 싶으면 mozilla 페이지를 이용

https://developer.mozilla.org/ko/docs/Web/CSS/@media