미디어쿼리

[HTML+CSS] Media Query, Viewport

1. 미디어쿼리 (Media Query) 미디어쿼리란 PC 뿐만 아니라 모바일과 태블릿에도 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문으로 특정 조건에서만 CSS 코드를 적용시켜 준다. min-width : 최소 너비 max-width : 최대 너비 min-height : 최소 높이 max-height : 최대 높이 aspect-ratio : 가로세로비 orientation : 방향 @media (조건) { 속성 } ex .media { width: 500px; height: 500px; background-color: red; } /* 미디어쿼리 */ @media (min-width: 320px) and (max-width: 800px) { .media { width: 300p..