1️⃣ meta 태그 (viewport)

반응형 웹을 만들기 위해서는 이러한 뷰포트 메타 테그가 필요하다.

뷰포트(viewport)란, 웹 페이지에서 사용자의 보이는 영역을 말한다.

속성

1. width

뷰포트의 가로 크기를 정한다. 
device-width 라고 지정하면, 기기의 스크린 너비에 맞추라는 뜻이다. 

2. initial-scale

페이지 처음 접속 시 보여질 배율이다. 

3. user-scalable

사용자의 축소/확대 허용 여부이다. 초기값은 yes이며, no로 금지 가능하다.

4. minimum-scale

뷰포트의 초소 배율값 (0~10)

5. maximum-scale

뷰포트의 최대 배율값 (0~10)

2️⃣ 미디어 쿼리

반응형을 위한 기본이자 핵심이다.
media 라는 키워드로 사용한다.

.title {
  font-size: 40px;
}
 
@media (max-width: 600px) {
  .title {
    font-size: 20px;
  }
}

타이틀은 40px이지만, 600px보다 작은 화면에서는 20px로 줄인다는 의미이다.

미디어 쿼리 적용

두가지 방법이 있다.
하지만 대부분의 경우 1번 방법을 쓴다.
왜냐하면 2번 처럼 css를 분리해도 브라우저는 일단 모든 css 파일을 다운로드하기 때문이다.

1. css 파일 내에 직접 작성

@media (max-width: 600px)

2. < link > 태그에 media 속성을 설정하여 사용

<link rel="stylesheet" media="all and (min-width:1200px)" href="desktop.css" >
<link rel="stylesheet" media="all and (min-width:768px) and (max-width:1199px)" href="laptop.css" >

3️⃣ 미디어 쿼리 구문

1. 미디어 유형

all : 모든 디바이스 대상 (default)
print: 인쇄 결과물 및 인쇄 미리보기 문서
screen: 화면 대상 ( 스크린이 있는 디바이스에서만 적용 )

2. 논리 연산자

and : 모든 쿼리가 참이어야 적용
not : 모든 쿼리가 거짓이어야 적용
, (comma) : 어느 하나라도 참이면 적용
only : 미디어쿼리를 지원하는 브라우저만 적용

3. 특성

width : 뷰포트 너비 (실무에서 주로 width 값 사용)
height : 뷰포트 높이
aspect-ratio : 뷰포트 가로세로비
orientation : 뷰포트 방향

4️⃣ 모바일과 데스크탑의 우선순위

여러 방법이 있지만 가장 선호하는 방법은
모바일 퍼스트 : min ( 분기점이 낮은 순서대로 작성 )

/* Mobile First */
 
.title { font-size: 12px; }
 
@media (min-width: 640px) {
  .title { font-size: 14px; }
}
 
@media (min-width: 768px) {
  .title { font-size: 16px; }
}
 
@media (min-width: 1024px) {
  .title { font-size: 18px; }
}

데스크탑 퍼스트 : max

/* Desktop First */
 
.title { font-size: 18px; }
 
@media (max-width: 1023px) {
  .title { font-size: 16px; }
}
 
@media (max-width: 767px) {
  .title { font-size: 14px; }
}
 
@media (max-width: 639px) {
  .title { font-size: 12px; }
}

5️⃣ 편리함을 더해주는 @mixin

분기점을 항상 외우고 다닐 순 없다!
이럴 때는 믹스인을 만들어 쓰면 좋다.
유지보수도 매우 편해진다.