[CSS] 반응형 웹사이트 란 무엇인가 ( Feat. 적응형 웹 사이트 )

반응형 웹 사이트 vs 적응형 웹 사이트

최근 10년간 모바일 유저는 계속 증가해서 현재는 모바일 시장이 PC 웹 시장의 2배 가까이 되는 규모까지 증가했다.

지금 우리가 사용하는 웹 사이트를 모바일에 크기까지 그대로 옮기면 사용하는 사람은 아무도 없을것이다.

그래서 모바일 유저들의 접근성을 늘리기 위해 사용하는 방법으로, 반응형 웹과 적응형 웹을 주로 사용한다.

이 두개를 간단하게 소개해볼까한다.

반응형 웹 사이트

반응형 웹 사이트는 웹 페이지의 디자인과 레이아웃이 전부 화면 크기에 자동으로 맞춰지는 웹을 의미한다.

하나의 템플릿이 크기가 늘었다 줄었다 하면서 적응되면서 다른 도메인으로 변경되지 않고 계속 같은 화면에서 진행되는 웹을 의미한다. 인스타그램이 가장 대표적인 예시라고 할 수 있다.

그렇다면 반응형 웹 사이트는 어떻게 만들어지는 것일까?

1. 메타태그로 뷰포트 설정해주기

<meta name="viewport" content="width=device-width">

뷰포트에서 디바이스의 사이즈를 감지하기 위해 meta 태그에 viewport 를 넣고 viewport 의 변화를 감지해 디바이스 화면의 크기를 알아낸다.

2. 미디어 쿼리를 사용

@media 미디어 타입 ( 너비 및 높이 ) {
  (css 내용 입력)
}

보통 이런 방식을 통해서 반응형 웹 디자인을 한다.

적응형 웹 사이트

적응형 웹 사이트는 반응형 웹 사이트랑은 다르게 특정 사이즈부터 특정 사이즈까지 다른 템플릿을 적용하여 거기에 적용하는 방식으로 적응형 웹 사이트는 n개의 독립적 템플릿으로 이루어져있다.
반응형에 비해 독립적 템플릿이 뷰포트 사이즈를 감지해서 사이즈에 맞는 템플릿을 적용시켜주기때문에 항상 모든 정보를 가지고 있는 반응형에 비해 사이트가 빠르다는 장점이 있다.

가장 큰 특징중 하나는 보통 m.naver.com  등의 웹과 다른 도메인을 가지고 있다.