반응형 웹(Responsive Web)
하나의 템플릿이 디바이스의 뷰 포트에 맞게 자동 조정되는 접근 방식으로 모든 디바이스에서 url이 동일하다.
반응형 웹은 미디어 쿼리(Media query) 등을 이용해 제작할 수 있다.
반응형 레이아웃 - 데스크탑용/모바일용
Media query 최소화 방법
- 상대 길이 사용(rem, em, vw etc)
- grid와 flex를 활용
위의 방법으로 유연한 레이아웃을 구성하면 미디어 쿼리의 사용을 줄일 수 있다.
적응형 웹(Adaptive Web)
모바일, 태블릿, 데스크탑 등 디바이스의 크기에 따라 별도의 템플릿을 제작하여 디바이스마다 그에 맞는 화면을 제공하는 접근 방식이다.
데스크탑용 네이버 주소 = www.naver.com
모바일용 네이버 주소 = m.naver.com (m : mobile)
반응형과 적응형의 차이
반응형 웹은 필요 이외의 모든 콘텐츠를 다운로드해 사용하므로 로딩 속도가 느리다. 따라서 미디어 쿼리를 최소화하는 노력이 필요하다.
적응형 웹은 디바이스에 맞는 필요한 콘텐츠만 다운로드해 사용하므로 로딩 속도가 빠르다. 그러나 각 디바이스에 맞는 컨텐츠를 제작하는 추가 비용이 발생한다.
