HTML/CSS 기초 - 4장 모바일에 대응되는 웹사이트를 만들어 보자

01. 미디어쿼리 소개

미디어쿼리란

• pc 뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해
• 모바일에 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문
  • 반응형 자연스러운 리사이징
    • 적응형 뚝뚝끊겨서 반응함

미디어쿼리 media

min-width와 max-width로 브라우저 가로폭 설정
브라우저의 가로폭이 최소 320px, 최대 800px이 되었을 경우, 중괄호 안의 css속성으로 대체하겠다는 의미

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

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

viewport

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

• 미디어쿼리가 제대로 작동하지 않는 문제가 발생할 수 있으므로 viewport로 너비와 배율을 설정해야 모바일 디바이스에서 의도한 화면을 볼 수 있음.
• 다양한 디지털 기기의 화면 상에 표시되는 영역을 의미
• 너비와 배율을 설정할 때 사용하는 메타태그의 속성 중 하나
• width=device-width: viewport의 가로폭 = 디바이스의 가로폭
• initial-scale=1.0: 비율은 항상 1.0

CSS 속성 상속

미디어쿼리 외부 영역에 있는 CSS 속성을 상속받음
만약 상속을 받지 않고자 하면 속성값으로 none 입력