css3 반응형 웹

https://www.nextree.co.kr/p8622/

CSS : 반응형 웹(Responsive Web)

 

쉽게 말해서 현재 사이트를 보고 있는 기기에 따라 최적의 화면을 제공한다는 것이다.

사람이 늘 pc로만 웹사이트를 보는게 아니다. pc도 해상도가 다 다르고, 태블릿, 모바일로도 웹사이트를 많이 보기 때문에

반응형웹에 대한 관심이 생겼다.

내가 만든 개인홈페이지나 포트폴리오를 모바일에서 보면 당연히 레이아웃이 원하는 대로 출력되지 않는다.

pc - 크롬 웹 기준으로 제작했기 때문이다.

 

예전에 안드로이드 화면단도 이런 이슈가 있었다.

고해상도 스마트폰이 출시 되면서 기존 저~중해상도 전용 레이아웃이 다 깨져버린 것이다.

내 기억으로는 애니팡도 이런 문제를 겪었던거 같았는데.. 고해상도에서 게임을 실행하면 화면이 작게 나옴..

초창기에 나온 스마트폰 중 갤2가  720dp 였는데 이 레이아웃 그대로 1920  스마트폰에 적용하면 구조가 다 무너졌다.

처음엔 대표적인 3개의 해상도"만" 고려한 채 각각의 해상도 폴더에 절대값 레이아웃으로 하나하나 디자인했는데..

문제는 시간이 지나면서 여러 해상도의 스마트폰이 출시되다보니 이 업무가 엄청난 스노우볼이 되어 굴러온 것이다.

그 때 상대적 레이아웃인 relativelayout을 사용하고 px대신 비율로 작업해서 수고를 덜었다.

반응형 웹도 비슷한 양상인거같다.