01 미디어쿼리

PC뿐 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해
반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS구문

• 반응형 : 브라우저 사이즈 변할 때 자연스럽게 변함
• 적응형: 뚝뚝 끊기면서 자연스럽지 않게 변함

.media {
width: 500px;
height: 800px;
}
@media(min-width: 320px) and (max-width: 800px) {
.media {
width: 300px;
height: 600px;
}
}

02 미디어쿼리 사용시 주의사항

첫번째

* viewport : 다양한 디지털 기기의 화면 상에 표시되는 영역 viewport가 반드시 head에 반드시 들어가 있어야 적용가능 화면상에 표시되는 영역을 의미 너비와 배율을 설정할 때 사용하는 메타 태그 속성 중 하나 너비와 배율의 설정은 content에서 한다. * width=divice-width viewport의 가로폭 = 디바이스의 가로폭 * initial-scale=1.0 비율은 항상 1.0

두번째

미디어쿼리 외부 영역에 있는 CSS속성을 상속 받음 (PC용 설정)
상속받지 않고자 하면, 속성값을로 none 입력 해줘야함.