CSS 반응형 웹, 적응형 웹

CSS 반응형 웹디자인 기초

---

오늘은 CSS에서 미디어 쿼리를 사용하여 반응형 웹에 대해 간단하게 설명드리겠습니다.

먼저 반응형 웹이란 웹페이지를 이용하는 각기 다른 사용자들이

스마트폰, 테블릿 pc, pc 모니터 등등의 기기를 통해 볼 수 있기 때문에

사용자마다 사용하는 기기의 화면의 크기에 맞게 변형되는 것을 반응형 웹이라고 합니다.

 

반응형 웹의 반대는 적응형 웹이라고 하는데 적응형 웹은

기기에 따라 변화하지 않고 특정한 화면이 유지되는 웹을 의미합니다.

 

대표적으로 애플의 홈페이지를 반응형, 네이버의 홈페이지를 적응형이라고 할 수 있습니다.

 

두 방식의 장단점을 보시면

반응형 웹의 장점은 수정하려고 할 때 한 파일에서만 작업을 하기 때문에 수정하기에 용이하고

단점은 한 파일에 모바일, PC의 웹을 다 작업하기 때문에 복잡할 수 있다는 것입니다.

 

적응형 웹의 장점은 모바일, PC의 웹을 따로 작업하기 때문에 정리하기 좋고

단점은 모바일, PC의 웹을 따로 작업하기 때문에 시간이 더 오래걸린다는 것입니다.

 

요즘은 반응형 웹을 많이 사용하는데 이유는 요즘은 트렌드가 빠르게 변화하면서

웹디자인도 자주 수정을 하게 되는데 그렇게 되면서

빠르게 수정하기 용이한 반응형 웹을 사용하면서 빠르게 수정하는 것을 추구하기 때문입니다.

 

---

 

오늘은 간단하게 반응형 웹과 적응형 웹에 대해 설명해 드렸고

반응형 웹에 대표적인 사이트는 애플,

적응형 웹에 대표적인 사이트는 네이버라는 것 까지 정리하고

마치겠습니다.

 

이 글을 보시고 한번 들어가서 반응형 웹과 적응형 웹이

어떻게 기능하시는지 확인하시면 좋겠습니다.

 

간단하게 확인하는 방식은 PC에서 네이버, 애플 홈페이지를

열어서 창을 줄였다가 늘렸다가 해보시면

바로 확인하실 수 있습니다.

 

감사합니다!!