@media , Responsive Design

반응형 웹(미디어 쿼리)
사이트는 크게 반응형 사이트와 적응형 사이트로 나뉜다

1. 적응형 사이트
   ex. 네이버
   크기를 줄였을 때 사이즈가 같이 줄어들지 않는 것

2. 반응형 사이트
   ex. 배달의민족, 코드캠프
   크기에 따라 이미지도 같이 줄어드는 것

요즘 트렌드는 반응형 사이트지만, 모든 부분을 반응형으로 만들수는 없기 때문에 반응형이 들어가야 할 곳에만 적절하게 넣어줘야 한다 !

반응형 웹 만들어보기
모바일 2. 태블릿 3. PC 세 가지로 나누기 부트스트랩 참고
export const breakPoints = {
tablet : "(min-width:767px) and (max-width:991px)",
mobile : "(max-width: 767px)"
}
breakPoints 따로 빼서 작성해주고, 사용할 때 import 해주기
import 하는 방법 : @media ${breackPoint.mobile}{ ...css코드... }

반응형 웹을 만들때는 가로사이즈를 퍼센트로 주기
rem : body사이즈의 영향을 받음(body가 작아지면 폰트도 작아짐)
(px to rem 구글링)
em : 부모사이즈의 영향을 받음(부모가 작아지면 폰트가 일괄적으로 작아짐)