[1주차] 미디어쿼리

1월 13일 자 학습 내용 정리입니다.

 

 

✅ 미디어쿼리

기존의 웹사이트들은 pc에 맞추어 만들어지는 것이 기본적이다.

하지만 최근 휴대폰, 태블릿 등 pc보다 작은 모바일 기기들이 많이 사용되고 있는 시점에서 각 모바일 기기들에 맞추어 화면을 보여주는 것이 필요해졌다.

따라서 pc 뿐만 아니라 모바일, 태블릿 등에서도 대응되는 반응형, 적응형 웹 사이트들을 만들기 위해 미디어 쿼리의 개념이 필요해졌다.

 

미디어쿼리는 여러 기기에 맞추어 웹 사이트를 만들기 위해 사용하는 css 구문으로 해당 기기의 화면 크기에 맞추어 요소들의 크기, 위치 등을 조절할 때 쓰인다.

 

미디어 쿼리의 구문은 아래와 같다.

 

@media (min-width) and (max-width) { ... }

 

min-width와 max-width로 브라우저의 최소, 최대 가로폭 사이즈를 상정하여 해당할 때에만 @media 안에 서술된 속성을 추가한다.

가로폭 사이즈로 지정하는 이유는 가로폭 사이즈를 통해 기기의 크기를 추측할 수 있고 그에 따라 사이즈 조절이 가능하기 때문이다.

 

 

✅ viewport meta tag

미디어쿼리를 사용할 때에는 다음의 meta tag를 사용해야 한다.

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

viewport라는 이름의 meta tag는 다양한 디지털 기기의 화면 상에 표시되는 영역을 의미하며 너비와 배율을 설정할 때 사용한다.

해당 meta tag를 넣지 않으면 미디어쿼리가 제대로 작동하지 않는 문제가 발생할 수 있다.

따라서 content에서 서술한 것처럼 width는 기기의 width와 같다, initial-scale은 1.0이다. 등의 너비와 배율을 먼저 설정해 주어야 모바일 기기에서 의도한 화면을 볼 수 있다.

 

 

🔍 참조

mediaquery https://www.w3schools.com/cssref/css3_pr_mediaquery.asp