media qurey 반응형

 

 

📘 media qurey

 

미디어 쿼리는 참 또는 거짓을 나타내는 조건문으로,

이를 활용하여 화면 크기에 따라 다른 효과를 줄 수 있다.

 

아래는 미디어 쿼리에 기본 문법이다.

@media 타입 (조건문) {실행코드}

 

 

 

1. 타입

미디어 쿼리에 타입은 적용되는 매체의 종류를 뜻하며,

주로 all, screen이 자주 사용된다.

 

타입	설명
all	모든 매체에 사용함.
print	프린터 기기에 사용함.
screen	컴퓨터나 태블릿, 스마트폰 등 스크린(screen)이 있는 매체에 사용함.
speech	웹 페이지를 읽어주는 스크린 리더(screenreader)에 사용함.

 

 

 

2. 조건문

가로 또는 세로 폭을 기준으로

작은 화면부터 큰 화면까지 또는 그 반대로 지정해서 설정할 수 있다.

 

주로 가로폭의 테스크탑을 기준으로 삼는다.

아래 코드는 예시로 테스크탑 > 태블릿 > 모바일 순서대로 작성했다.

 

@media screen and (max-width: 1199px) { 
  /* 실행 코드*/
}
@media screen and (max-width: 991px) {
  /* 실행 코드*/
}
@media screen and (max-width: 767px) {
  /* 실행 코드*/
}
@media screen and (max-width:575px) { 
  /* 실행 코드*/
}