728x90
스마트폰이 출시되지 얼마 안되었을 때 인터넷을 접속하게 되면 모바일 환경의 웹이 없어 PC화면을 그대로 작은 모바일 디바이스를 통해 보게 되었다.
이 문제를 해결하기 위해 모바일 디바이스에 특화된 웹(모바일 웹)들이 등장했다.
초기에는 모바일 웹과 PC웹 2개를 만들어서 웹을 제공하였다. 이러한 사용자 환경별로 웹을 제공하는 기술을 적응형 웹 디자인(Adaptive Web Design)이라고 했다.(네이버, 다음 등의 모바일 환경처럼 주소창에 m이 붙어 별개의 사이트임)
하지만 해당 방식은 사이트를 2개씩 만들어야해서 비용과 효율면에서 단점이 있었고 그래서 하나의 사이트를 통해 사용자 환경에 따라(해상도에 따라) 레이아웃이 변경되는 기술을 반응형 웹 디자인(Responsive Web Design)이라고 하며 이러한 다양한 환경에서 제공하는 웹을 하이브리드 웹이라고 한다.
예시 (mailchimp.com/)
기존 PC화면의 웹페이지
창 크기를 줄이자 모바일화면에 맞게 레이아웃이 배치되었다.
'Front > CSS' 카테고리의 다른 글
| [CSS] 블럭요소의 가로배치 레이아웃 (Layout - float, clear) (0) | 2021.01.21 |
|---|---|
| [CSS] 배경 (Backgrounds color, image, repaeat) (0) | 2021.01.19 |
| [CSS] 디스플레이 속성 (inline, block, inline-block) (0) | 2021.01.17 |
| [CSS] 블록요소의 CSS 패딩과 마진, (블록의 여백/Padding, Margin) (0) | 2021.01.17 |
| [CSS] 마진상쇄현상(Margin Collapse) (0) | 2021.01.17 |
