[CSS] 반응형 웹 vs 적응형 웹

 

 

 

0. 반응형 웹이란?

 

• Responsive Web
• 같은 웹 페이지를 디바이스의 크기에 따라 알맞은 레이아웃을 보여줌
  ▶ 감지된 화면 크기에 따라 자동으로 페이지가 재배열되는 유동적인 방식
• 웹 페이지의 디자인과 레이아웃이 다양한 화면 크기에 자동적으로 맞춰짐
• CSS의  미디어 쿼리 (맞춤형 스타일 시트)  를 사용하여 구현
  ▶ 이를 바탕으로 자체적으로 렌더링
  
  
• 하나의 웹 페이지에서 처리할 수 있다는 장점 때문에 많이 사용
  ex ) 카카오모빌리티 :  https://www.kakaomobility.com/

 

PC에서 보이는 카카오모빌리티

 

개발자도구를 활용, 모바일에서 보이는 화면 확인

 

 

[ 장점 ]

• 모든 플랫폼에 대해 일관된 자료와 구조 제공
• 보편적이지 않은 화면 크기가 아닌 기기에서도 정상적으로 작동

 

[ 단점 ]

• 디자인에 대한 더 깊은 전문 지식 요구
• 요소가 잘못된 순서 혹은 크기로 배치되지 않도록 하기 위한 테스트 필요
• 동적인 콘텐츠를 불러오고 렌더링 할 때, 상대적으로 더  많은 작업이 요구

 

 

 

 

미디어 쿼리 (맞춤형 스타일 시트)란??

 

간단하게 설명하자면,

미디어 쿼리는 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 도와주는 소프트웨어 모듈이다.

미디어 쿼리를 이용한 사이트는 웹 사이트에 접속하는 기기에 따라서 레이아웃이 변환이 되며 이는 반응형 웹을 구현하는 데에 많은 도움이 된다.

 

 

( 추후 이에 대한 블로그를 작성하여 자세히 알아보려한다. )

 

 

작성했다 : )

 

▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼

 

 

https://jinnycoding.tistory.com/44

[CSS] 미디어 쿼리란?

 

 

 

---

 

 

 

1. 적응형 웹이란?

 

• 브라우저가 주어진 플랫폼에 맞춰 구현된 레이아웃을 불러오는 웹 디자인 유형
• 사용자가 웹을 보는 환경이 모바일인지, PC인지 구분을 한 뒤, 감지된 기기를 기반으로 이를 타깃으로 만들어진 정적인 레이아웃에 접속
  ex ) 네이버의 경우, PC는 https://naver.com, 모바일은 https://m.naver.com 이라는 서로 다른 URL을 제공

 

 

https://naver.com

 

 

https://m.naver.com

 

 

 

 

[ 장점 ]

• 플랫폼에서 제공하고자 하는 화면을 기기에 맞춰 구현하여 완벽하게 맞춤화 된 화면 출력
• 원하는 기기에 맞는 최적화된 디자인 제공 가능

 

 

[ 단점 ]

• 보편적이지 않은 화면 크기의 기기에서도 비정상적으로 작동하는 경우 발생 가능

 

 

 

---

 

 

 

 

2. Viewport

 

• 화면에 보여지는 화면
• PC의 경우 모니터에서의 viewport는 일반적으로 전체 화면 크기가 아닌 브라우저 창 안의 화면을 말한다.
• 모바일의 경우 브라우저가 전체 화면 모드일 때 viewport는 전체화면을 말한다.

 

• 데스크톱은 사용자가 브라우저 창의 크기를 조정할 수 있기 때문에 viewport의 크기 또한 조절할 수 있다.
  반면, 모바일 viewport는 브라우저 창 크기 자체를 조절할 수는 없으나, 더블탭, 확대, 축소 등을 통해 viewport의 배율을 변경할 수는 있다.
• PC를 기반으로 설계된 웹 페이지를 모바일 기기에서 열 경우, 화면이 작게 출력되어 가독성이 떨어지게 되기 때문에, viewport 및 속성들을 적절히 활용하여 좋은 웹 페이지를 구현하는 것이 중요하다.

 

 

 

출처:https://velog.io/@ken1204/viewport%EB%9E%80