반응형 웹디자인

웹사이트의 레이아웃은 사용자의 모니터 화면 해상도를 고려해야 함
그래서 해상도에 따라 가로폭이나 배치를 변경하여 가독성을 높이게하는 것이 반응형 웹

@media

@media를 통해 사이즈 한계를 정할 수 있음

@media [only 또는 not] [미디어 유형] [and 또는 ,] ( 조건문 ) { 실행문 }

/* 예시 */
@media ( max-width: 768px ) {
    body { color: red; }
}

[only 또는 not]
only: mediaquery를 지원하는 브라우저에서만 미디어 쿼리를 해석하게 해주는 키워드
not: not 다음에 따라오는 조건을 부정하는 키워드
[and 또는 ,]
앞과 뒤의 조건이 모두 사실일 때 뒤에 다라오는 것을 해석하라는 의미
(조건문)
조건문이 참일때 뒤에 따라오는 것을 해석하라는 의미 and나 , 를 사용해서 두 가지 이상 작성할 수 있으며 생략가능
{실행문}
앞의 조건들이 모두 참일때 실행되는 실행문 실행문에는 일반적으로 CSS 코드를 작성해줌

Mobile First

min-width를 이용함

@media ( min-width: 768px ) {
    background: yellow;
}

@media ( mine-width: 1024px ) {
    background: blue;
}

Desktop First

max-width를 이용함

@media ( max-width: 1023px ) {
    background: red;
}
@media ( max-width: 767px ) {
    background: pupple;
}

미디어쿼리 사용법

외부 파일로 연결해서 사용

 <link rel='stylesheet' href='style.css' />

태그에 직접 미디어 쿼리를 작성
```
 <link rel='stylesheet' media='all and (min-width:320px)' href='style.css'>
```
단점: CSS 파일을 여러번 불러와야 되므로 웹사이트의 속도가 느려짐
문서내 작성
```
 <style>
     @media all and (min-width: 320px) {실행문}
 </style>
```
단점: CSS 코드를 문서내에 작성하게 될경우 문서의 용량이 커져 웹사이트의 속도가 느려짐
임포트 방식
```
 @import url('style.css') all and (min-width: 320px);
```
단점: 조건이 늘어나게 되면 2번처럼 웹사이트의 속도가 느려짐

뷰포트(viewport)

스마트 기기에서 미디어 쿼리가 정상적으로 동작하지 않는 문제가 생길수도 있기 때문에 뷰포트 메타 태그를 이용해서 화면의 크기나 배율을 조절해야함

                      <-- 뷰포트의 너비 설정 -->    <-- 초기 배율,   최소 축소 비율,    최대 확대 비율,   확대/축소 여부 설정 -->
<meta name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scaleable=no' />

출처