[TIL] 01주차-04

미디어쿼리란?

PC뿐만이 아니라 모바일과 태블릿 다양한 기기에서 대응되는 웹사이트를 만들기 위한 CSS 구문입니다.

반응형

브라우저에 폭을 줄이고 늘렸을 때 요소들이 자연스럽게 크기를 맞춰주는 효과

적응형

가로 폭을 줄이고 늘렸을 때 끊겨서 레이아웃 크기가 달라지는 효과

반응형 사용법

브라우제 가로폭이 min-width부터 max-width까지 width에서는 괄호 안에있는 CSS속성으로 대체하겠다는 의미

@media (min-width: 400px) and (max-width: 1000px){
	.mieda{
    	width: 500px;
    	height: 500px;
    	background-color: yellow;
    }
}

미디어쿼리 주의사항

1. viewport

미디어쿼리를 작동시키기 위해선 html문서 상단에 meta태그에 name="viewport" content"width=device-width, initial-scale=1.0"가 있어야 합니다.

viewport란 기기 화면을 뜻
width=device-width는 viewport의 가로폭 = 디바이스의 가로폭으로 대체 하겠다는 뜻
initial-scale = 1.0은 비율은 항상 1.0으로 하겠다는 뜻

2. CSS속성 상속

미디어쿼리 외부 영역에 있는 CSS 속성을 상속받음. 만약 상속을 받지 않고자 하면 none을 이용하면 됩니다.