반응형 웹

웹 프로그래밍/HTML+CSS

0_TLS 2024. 11. 15. 19:01

데스크톱 PC용 브라우저를 기본으로 만들어진 웹 사이트를 스마트폰에서 접속하면 매우 작은 글씨고 표시되는 문제가 발생 -> 모바일 기기의 특성을 활용할 수 있도록 모바일 사이트를 별도로 제작하기 시작함.

-> 기존의 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시할 수 있는 방법 ??

=> 반응형 웹 디자인

여러 기기에 맞는 사이트를 별도로 제작하지 않고 앞의 사이트처럼 화면 크기에 '반응'해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것 = 반응형 웹 디자인

반응형 웹의 장단점

1. 모든 스마트 기기에서 접속 가능

2. 가로 모드에 맞추어 레이아웃 변경 가능

3. 사이트 유지,관리 용이 => 사이트가 하나뿐이기 때문에 유지, 관리가 쉬움.

스마트폰 화면에서 실제 내용이 표시되는 영역.

뷰포트를 지정하면 접속한 기기 화면에 맞추어 확대하거나 축소해 표시할 수 있음.

<기본형>

ex) 웹 페이지 뷰포트의 너비를 스마트폰 화면 너비에 맞추고 초기 화면 배율을 1로 지정한 것

<meta name = "viewport" content="width=device-width, initial-scale=1">

recoding;