반응형 웹이란?

반응형 웹은 말그대로 브라우저의 가로 넓이에 '반응'하여 구성요소가 변하는 웹입니다.

(웹에 대한 설명을 먼저 보시고 이 포스팅을 보시는 것을 추천드립니다)

venture-capital.tistory.com/24

HTML 문서 개념 잡기 (Feat. 웹, CSS, JS)

 

반응형 웹은 왜 생겨난걸까요?

과거에는 PC 모니터에만 웹 화면을 맞추면 됐지만, 스마트폰과 테블릿 등 다양한 크기를 가진 기기들이 등장하면서 PC에 맞춰져 있는 웹들이 보기가 힘들어진 것이죠.

화면 크기가 다른 기기 (출처 : 비전공자를 위한 이해할 수 있는 IT지식)

이 문제를 해결하고자 각 웹별로 CSS를 수정해도 됐지만, 그럴 경우 매번 웹을 수정할때 마다 모든 기기의 CSS를 수정해줘야 하는 등 비효율적인 작업이 중복되었고 이에 따라 버그도 많이 생기는 문제가 발생하였습니다.

 

이런 비효율성을 해결하기 위해 개발된 것이 바로 반응형 웹입니다.

아래 그림처럼 가로 길이에 따라서 웹페이지의 레이아웃이 바뀌는거죠.

가로 넓이에 따른 CSS 변화 (출처 : 비전공자를 위한 이해할 수 있는 IT지식)

반응형 웹디자인을 통해 웹사이트가 휴대폰, 태블릿, 노트북 등 모든 기기의 화면 크기에 맞춰 작동하게 만들 수 있습니다.

---

※ 본 포스팅은 최원영님의 '비전공자를 위한 이해할 수 있는 IT지식' 책의 내용을 바탕으로 작성하였습니다.