[CSS] Media Query (반응형 웹 페이지 제작)

📝Media Query

출력 장치의 여러 특징 가운데 일부를 참조하여 CSS 코드를 분기 처리해 하나의 HTML 소스로 여러가지 출력장치 크기에 따라 맞춤형으로 보여줄 수 있는 기능을 제공한다

 

• mobile
  • 320px ~ 480px
• tablet
  • 768px ~ 1024px
• desktop
  • 1024px ~

 

@media (조건문) {실행문} 순서로 작성이 가능하다.

 

가장 많이 쓰이는 부분을 하나 정리해주자면 넓이에 따라 반응형을 많이 만들기 때문에 min-width, width, max-widht [뷰포트 기반]를 사용한다 참고로 아래 참고 및 출처 사이트에 상세히 작성되어있으니 참고하면 좋다

 

See the Pen gradient progress bar by Lee (@mondaymonday2) on CodePen.

 

 

 

🔗 참고 및 출처

https://naradesign.github.io/media-query.html