[CSS] Media Query (미디어쿼리) 화면 사이즈 Breakpoints

Media Query (미디어쿼리)

미디어쿼리는 device 유형(print, screen 등)과 어떤 특성이나 수치(화면 해상도, 화면 크기 등) 에 따라 웹사이트나 앱을 수정할 때 유용한 기능입니다. 

 

기본적인 미디어쿼리 문법은 다음과 같습니다. 

 

@media ( 조건문 ) { 실행문 }

 

 

만약

 

@media ( max-width: 600px) {

                     background-color: red;

}

 

라는 코드를 작성했다면, 화면의 크기가 600px 이하일 때, 화면의 배경색이 빨간색이됩니다. 

 

 

 

Breakpoints (중단점)

미디어쿼리의 디바이스마다의 화면 크기 breakpoint는 다음과 같습니다. 

 

@media (max-width: 600px) { }

화면의 크기가 600px 이하일 때 { } 안의 코드 실행    ex) 핸드폰

 

@media (min-width: 600px) { }

화면의 크기가 600px 이상일 때 { } 안의 코드 실행    ex) 태블릿의 세로모드, 큰 스마트폰

 

@media (min-width: 768px) { }

화면의 크기가 768px 이상일 때 { } 안의 코드 실행    ex) 태블릿의 가로모드

 

@media (min-width: 992px) { }

화면의 크기가 992px 이상일 때 { } 안의 코드 실행    ex) 노트북, 작은 데스크톱

 

@media (min-width: 1200px) { }

화면의 크기가 1200px 이상일 때 { } 안의 코드 실행    ex) 큰 노트북, 데스크톱

 

 

 

미디어쿼리 사용 예시

<CSS>

div {
  height: 100px;
  background-color: red;
}
 
@media (max-width: 800px) {
  div {
    background-color: blue;
  }
}

 

 

 

 

공부한 것을 정리한 내용입니다. 수정할 부분이 있으면 알려주세요 :)