[반응형 웹]
화면의 크기에 따라 홈페이지의 사이즈가 변화한다. PC / 태블릿 / 모바일 각각의 전용 홈페이지를 만들 필요가 없음
장점 :
1. 유지보수가 효율적이다.
-> 하나의 소스를 수정하면 모든 기기 사이즈에 맞추어 콘텐츠가 최적화
2. 사용자가 기기에 구애를 받지 않는다
단점 :
1. 비용이 높다
해상도별로 출력될 화면을 정의하는데 소요되는 공수가 있어 제작비용이 높다
2. 접근성이 떨어지거나 , 비효율적일 수 있다.
-> 쇼핑몰과 같이 많은 양의 정보를 한 화면에서 보여주는 경우
3. 코드가 복잡하다. (적응형 웹보다 가격이 비싼이유이다.)
-> 고정된 픽셀값 대신 백분율 값을 사용하고 기기화면 크기에 따라 조정해야 되기 때문
[적응형 웹]
적응형 홈페이지는 기준이 되는 기기의 사이즈가 되면 미디어 쿼리나 스크립트를 활용해서 레이아웃을 변형하여 화면을 구성하는 방법으로 선별된 기기 유형에 따라 홈페이지 사이즈가 고정된 것을 말합니다. 반응형 웹과 비슷한 개념으로 이해할 수 있지만, 적응형 웹은 미리 정해진 몇 가지 크기의 사이즈를 기준으로 화면을 구성한다는 점이 가장 큰 차이점
장점 :
1. 디자인을 하기에 자유로움
PC와 모바일 등 기기에 맞는 사이즈를 별도로 구축하므로(그러나 다양한 스마트 기기가 대세를 이루고 있는 상황에선 디자인의 자유로움만으로는 적응형 웹을 선택할 수는 없다.)
2. 비용이 저렴하다.
3. 많은 양의 정보를 한 화면에 보여주는 경우에 좋다.
4. 코드가 복잡하지 않다.
단점 :
1. 유지보수가 어렵다.
-> 해상도별 업데이트가 필요하기 때문