기본적으로 두 방법 모두 웹사이트가 다양한 크기의 화면과 모바일 기기에서 더 나은 사용자 경험을 제공하기 위한 방법이지만 설계와 구현에 차이가 있다.
1. 반응형 웹(Responsive Web)
미디어 쿼리를 사용해 화면 크기를 확인하고 flex, grid 등을 활용해 화면 크기 변화에 따라
페이지 크기 및 레이아웃을 조절한다.
글자 크기 자동 조정은 em, 이미지 크기는 % 사용해 구현한다.
하나의 템플릿을 사용하여 다양한 사용자와 기기에 대응할 수 있어 개발이 간편하지만
이미 PC용이나 모바일용으로 웹사이트가 구축되어 있을 경우, 사이트를 재구축해야한다.
또한 사용자는 모든 기기에 대한 css를 다운 받아야 하므로 로딩 시간 증가 및 데이터 낭비라는 단점을 가진다.
2. 적응형 웹(Adaptive Web)
서버나 클라이언트에서 웹에 접근한 기기를 체크하여 기준이 되는 사이즈가 되면
미디어 쿼리나 스크립트를 활용하여 레이아웃을 변형하여 화면을 구성하는 방법으로
선별된 기기 유형에 따라 홈페이지 사이즈가 고정된다.
모바일은 모바일용 템플릿, PC는 PC용 템플릿을 따로 제작해야해서 개발이 복잡해진다.
사용자는 접속한 기기에 맞는 템플릿과 CSS만 다운받으면 되므로 데이터 낭비가 적고 로딩이 빨라진다.
참고
https://terms.tta.or.kr/dictionary/dictionaryView.do?word_seq=054426-11
이미지 출처
https://terms.tta.or.kr/dictionary/dictionaryView.do?word_seq=054426-11
'NOTION 정리 > CSS' 카테고리의 다른 글
| IE에서 overflow:hidden 이 적용되지 않는 경우 (0) | 2023.11.02 |
|---|---|
| 반응형 이미지 비율 유지 (0) | 2023.11.02 |