css 반응형 공부 : 미디어 쿼리 대해서 깊게 이해하기

반응형은 미디어 쿼리

반응형으로 작업시 미디어 쿼리를 빼놓을 수가 없습니다. 미디어 쿼리의 코드를 알아보겠습니다.
코드는 min-width max-width 2가지가 있습니다.

코드

@media all and (min-width:768px) and (max-width:1024px) {
  /* 코드입력 */
} 

코드 설명

min-width:768px 는 768px 이상인 경우에 코드가 실행합니다.
max-width:1024px 는 1023px 이하인 경우에 코드가 실행합니다.
즉, 브라우저 크기가 768px ~ 1023px일 때 {} 안에 있는 코드를 실행하라는 뜻입니다.