04 반응형 웹사이트 제작

미디어쿼리 소개

미디어쿼리란?
pc 뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해, 모바일에 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문

• 미디어쿼리 media
  Ex)
  
  @media ~~~{
  .media{
  width:300px;
  height:300px;
  background-color:yellow;
  }
  }
  이런식으로 작성해야함(위는 잘못되어 있는 거)

• 미디어쿼리가 정상적으로 출력하는지 확인하는 방법

  1. 크롬 개발자 도구에서 Elements 옆에 모바일 표시 눌러서 확인 가능
  2. 다음 Troy Labs에서 확인 가능(단, 결과물이 서버에 등록되어 있어야함)

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

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

• CSS 속성 상속
  Ex)
  
  -background-color:none; 을 입력해주지 않으면 위의 속성을 상속받아 미디어쿼리의 background-color도 yellow가 됨

미디어쿼리 적용하기