1. 반응형 웹이란

기기에 반응하는 웹으로, 사이즈가 다른 기기에 맞춰 레이아웃, 요소 등이 변경됩니다

디바이스가 다른 게 포인트가 아니라, 사이즈(기기해상도)가 다르다는 게 포인트입니다

반응형 웹을 쉽게 확인할 수 있는 방법은 브라우저 사이즈를 줄여보면 됩니다

브라우저 사이즈를 줄였을 때 화면 크기에 맞추어 레이아웃과 요소가 변화된다면 반응형으로 볼 수 있습니다.

그런데 왜 네이버 모바일 웹은 아까 봤던 네이버 데스크톱 웹처럼 사이즈만 '줄어들고 레이아웃/요소는 변화하지 않는' 것이 아닐까? 같은 웹으로 들어갔는데, 완전히 다른 화면입니다.

네이버 화면이 완전히 다른 이유는, url이 다르기 때문입니다. 

데스크톱으로 접근한 웹은 https://naver.com이고, 모바일로 접근한 웹은 https://m.naver.com이다. 같은 화면이 아닌 것입니다.

다시 돌아가서, 반응형 웹은 디바이스(창) 크기에 따라, 각 디바이스(창)에 최적화된 레이아웃으로 창이 '반응'하는 것입니다. 

2. 미디어쿼리(media query)란

미디어쿼리는 반응형 웹을 만들기 위한 CSS 기능입니다. 

앞에서 보았듯이 반응형 웹은 창의 가로 사이즈에 따라 달라집니다. 

Behance로 예를 들자면, 가로 폭이 클 때는 4단, 조금 줄였을 땐 3단, 더 줄였을 땐 2단, 더더 줄였을 땐 1단으로 변화하는 것처럼 말이죠.

미디어쿼리는 범위에 따라 화면을 다르게 할 수 있는 CSS의 기능입니다. 

오른쪽 개발자모드(맥북 기준 cmd+opt+i)를 보면 @media라고 보입니다. 

좀 더 자세히 읽어보자면 @media(min-width:1025px) 이런 식으로 적혀있는 걸 볼 수 있다. 1025 미만이면 아래에 있는 코드 {.has-message~를 적용해 화면을 띄우라는 것입니다. 

범위에 따라 화면을 다르게 하는 것이니까 min-width(최소 너비), max-width(최대 너비)처럼 범위를 지정해줘야 합니다.

​

3. 분기점(breakpoint)이란

미디어쿼리를 적용하기 위해서는 먼저 분기점을 지정해야 한다. 분기점이란 변화하는 지점(point)입니다.

가령 가로 너비가 1024이하면 A버전(ex. 콘텐츠 레이아웃 3단인 버전)로 화면을 띄워주고, 가로 너비가 1024 초과면 B버전(ex. 콘텐츠 레이아웃 4단인 버전)으로 화면을 띄워줘야 하는 거면, 분기점은 1024px가 됩니다.

보통은 모바일, 태블릿, 데스크톱을 기준으로 분기점을 설정하는데요 

모바일은 768px 미만

태블릿은 768 이상, 1024 미만

데스크톱은 1024 이상

물론 조직에 따라 달라질 수 있으며, 분기점을 더 상세하게 설정하는 경우도 있습니다.

(모바일 S사이즈, M사이즈, L사이즈처럼 모바일 안에서도 여러 분기점을 설정해 여러 미디어쿼리(범위)를 적용할 수 있습니다)