일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- Big-O notation
- AWS조사
- 스코프
- 메모이제이션
- 생활코딩
- appendChild
- scope
- 인터프리터
- CSS
- 클로저
- JavaScript
- complexity
- 코드스테이츠
- APPEND
- flex기본
- vscode
- AWS기초
- 기초공부
- node.js설치
- var
- 원본과 복사본
- IT
- AWS
- 리커젼
- 재귀함수
- node.js
- prototype
- css기초
- 개발툴
- let
- Today
- Total
Jveloper
Responsive Web Design에 대해 알고있는부분을 설명해주세요 본문
반응형 웹의 등장 배경
최근 다양한 모바일 기기가 보급되면서 하나의 사이트를 만들더라도 데스크탑 / 모바일 폰 / 타블렛 PC 등 서로 다른 해상도를 가진 디바이스들을 고려하지 않을 수 없게 되었습니다.
데스크탑 하나만 보더라도 와이드의 고해상도 디스플레이가 확산됨에 따라 많은 사이트들이 기존의 1024x768 크기를 넘어 점차 사이즈를 키워가고 있는 추세이지만 그렇다고 하나의 해상도에만 맞춰 사이트를 제작하기도 어렵습니다.
이렇듯 N-Screen의 시대로 불리는 다양한 디바이스의 해상도에 맞춰 사이트의 레이아웃을 변환하는 이슈에 맞춰 등장한것이 반응형 웹입니다.
반응형 웹이란?
반응형 웹이란 HTML5의 "미디어 쿼리"를 이용하여 하나의 소스로 제작된 컨텐츠가 데스크탑에만 국한되지 않고 타블렛 PC, 모바일 폰 등 다양한 크기의 디바이스 환경에 맞추어 해상도나 화면이 동적으로 변환되는 기법을 말합니다.
모바일 웹을 별도로 제작할 필요없이 하나의 반응형 웹사이트로 사이즈에 맞춰 이미지나, 폰트, 사이즈 및 UI가 자동으로 변환되어 모든 디바이스에서 사이트 이용이 가능합니다.
반응형 웹을 정의할때면 적응형 웹에 대한 이야기가 늘 함께 등장합니다.
이런 상황에 대응하기 위해 '반응형 웹' 기술과 '적응형 웹' 기술이 탄생했습니다.
적응형 웹은 기본적으로 서버사이드에서 클라이언트의 정보를 미리 받아 해당 조건별로 정해진 화면을 보여줍니다.
즉, 클라이언트가 모바일인지 웹인지를 파악해서 리소스를 선택하고 그에 맞는 화면을 나타내주는 형태입니다.
예를 들어 모바일에서 네이버를에 접속할 때를 생각해보면 쉽게 이해할 수 있습니다.
주소창에 "www.naver.com" 이라고 입력해도 모바일 브라우저로 접근하면 "m.naver.com" 으로 전환되고,
렌더링하는 리소스들도 전혀 다릅니다.
"www.naver.com"의 경우, 크기를 늘렸다 줄였다 해도 레이아웃이 전혀 변경되지 않습니다.
반면에 반응형 웹은 같은 페이지 리소스를 가져와도 해당 페이지의 크기에 따라서 다르게 보입니다.
브라우저의 사이즈를 줄이면 레아이웃 자체가 바뀝니다.
웹 페이지마다 지향점이 다르기 때문에 둘 중 무엇이 더 좋다고 할 수는 없지만,
모바일 환경이 주를 이루는 요즘, 반응형 웹 페이지를 고려해야 하는것은 너무나 당연한 이야기입니다.
'끄적끄적' 카테고리의 다른 글
Cookie, Local Storage, Session Storage의 차이점에 대해 설명해주세요. (0) | 2019.11.26 |
---|---|
Git cherry-pick에 대해서 설명해주세요. (0) | 2019.11.26 |
HTML5에 대해서 알고있는부분에 대해 설명해주세요 (0) | 2019.11.22 |
와디즈 첫 펀딩 도전기(2019.9 ~ 2019.11) (0) | 2019.11.22 |
컴파일러와 인터프리터의 차이 (0) | 2019.04.21 |