반응형 웹(Responsive Web Design)

여러 가지 디바이스의 해상도에 반응하여 각각에 맞는 최적의 화면을 보여주는 웹페이지이다.

• ex) 모바일 화면과 데스크탑 화면이 다르게 뜨는 것

미디어 쿼리(Media query)

CSS 문법 중 하나. 반응형 웹을 만드는 데 사용되며
특정한 조건에서 CSS를 작동시키도록 명령할 수 있다.

1) 디바이스별 해상도에 따라 적용되는 지점(break point)

해상도 320 - 480px -> 모바일
해상도 768 - 1024px -> 타블렛
해상도 1024px ~ -> 데스크탑
(표준적인 지점이므로 디바이스마다 지점 확인 필요)

2) 미디어 쿼리 적용 방법

• CSS 시트에 @media 를 사용해
  지정한 조건을 충족시키면 {} 안의 스타일이 적용.
  @meida

@media screen and (max-width: 1024px) {
.lol{
display:none;
 }
}

• 디바이스 크기가 작은 것부터 적용하려면 min,
  디바이스 크기가 큰 것부터 적용하려면 max로 작성해준다.

• link 방식으로도 사용할 수 있지만 CSS 파일이 많으면
  속도가 느려지므로 추천하지 않음.