반응형 웹사이트 만들기

미디어쿼리 (Media query)

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

• 반응형 : 자연스럽게 변경
• 적응형 : 일정 크기에 맞게 정해진 사이즈로 변경

<meta name="viewport" content="width=device-width, initial-scale=1.0">
// css //
<style>
  .media {
  width: 500px;
  height: 500px;
  background-color: red;
  }
  @media (min-width: 320px) and (max-width: 800px) {
  	.media {
  	  width: 300px;
  	  height: 300px;
  	  background-color: yellow;
  	}
  }
  </style>

• min-width, max-width
  브라우저 가로폭 설정
  최소-최대 가로폭이 기준에 충족할 때, 중괄호 안의 css 속성으로 대체
  
  

  viewport

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

다양한 디지털 기기의 화면 상에 표시되는 영역을 의미
너비와 배율을 설정할 때 사용하는 메타 태그의 속성 중 하나
미디어쿼리가 제대로 작동하지 않는 문제를 차단

• . width=device-width
  viewport의 가로폭 (=디바이스의 가로폭)
  
  
• . initial-scale=1.0
  비율은 항상 1.0
  
  

  CSS 속성 상속

<style>
  .media {
    width: 500px;
    height: 500px;
    background-color: yellow;
  }
  @media (min-width: 320px) and (max-width: 800px) {
 	.media {
  	  width: 300px;
  	  height: 300px;
  	  background-color: none;
  }
</style>

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