반응형 웹

• 브라우저나 장치 환경(크기)에 따라 웹페이지의 모습이 변하는 웹페이지

@media (미디어 쿼리)

• 사용 환경, 크기에 따라 CSS를 지정 가능하게 해주는

min-width

• 최소 너비
• 내부 요소 또는 화면의 크기가 지정된 너비보다 넓으면 자동으로 증가

min-height

• 최소 높이
• 내부 요소 또는 화면의 크기가 지정된 높이보다 높으면 자동으로 증가

max-width

• 최대 너비
• 내부 요소 또는 화면의 크기가 지정된 너비보다 좁으면 자동으로 축소
• 내부 요소 또는 화면의 크기가 지정된 너비보다 크더라도 지정된 값 이상으로 증가 X

max-height

• 최대 높이

@media 미디어유형 and (속성)

• 미디어유형 : 지정할 미디어의 종류 (all, screen, print,...)
• 1024px 이상 : 16:9 비율 모니터, 노트북
  768px ~ 1024px : 태블릿 가로, 4:3비율 모니터
  480px ~ 768px : 태블릿 세로, 모바일 가로
  ~ 480px : 모바일
• ex) 화면크기가 최대 768px 이하일 경우 적용

@media screen and (max-width: 768px){
	CSS 코드;
}