반응형

미디어 쿼리
@media only all and (조건문) {실행문}

해석
@media : 미디어 쿼리가 시작됨을 표시합니다.
only : 미디어 쿼리 구문을 해석하라는 명령어입니다.(생략가능)
all : 미디어 쿼리를 해석해야 할 대상을 나타냅니다.(생략가능)
and : 앞과 뒤의 조건을 나타냅니다.(생략가능)
(조건문) : 해당 조건을 설정할 수 있습니다.
{실행문} : 조건에 따른 실행을 설정합니다.

사용법
@media (max-width: 1280px) { } -데스크탑
: 0에서 1280까지 사이를 설정

@media (max-width: 1024px) { } -데스크탑
: 0에서 1024까지 사이를 설정

@media (max-width: 960px) { } -노트북
: 0에서 960까지 사이를 설정

@media (max-width: 768px) { } -타블렛
: 0에서 768까지 사이를 설정

@media (max-width: 576px) { } -모바일
: 0에서 576까지 사이를 설정

media query 사용법
@media screen and (max-width: 768px) {

}

*반응형은 3~4개 정도면 충분함