반응형 레이아웃

반응형 레이아웃은 브라우저 너비에 따라 공간의 크기가 달라지는 동적 레이아웃과 공간의 배치가 달라지는 적응형 레이아웃 방식을 결합한 레이아웃입니다.

 

그림 1-7 반응형 레이아웃: 브라우저 너비를 줄이면 공간이 재조정되면서 레이아웃 배치가 달라짐

 

● 예시 화면: Exercise/1장/4_responsive_layout.html

 

과거에는 데스크톱과 모바일에 대응하기 위해 웹 사이트를 기기에 맞춰 따로 제작했습니다. 최근에는 거의 볼 수 없지만 웹 사이트 주소에 m.xxx.com처럼 앞에 m이 들어간 주소를 보았다면 그 웹 사이트가 바로 모바일 버전용 웹 사이트입니다^*.

적응형·반응형 레이아웃이 등장하면서 데스크톱과 모바일 양쪽에 모두 대응하는 웹 사이트 제작이 가능해졌습니다. 덕분에 사용자는 가로 스크롤 없이 어느 기기에서나 대응하는 웹 사이트 화면을 편안하게 볼 수 있게 되었습니다. 개발자 역시 기기에 맞춰 웹 사이트를 별도로 제작할 필요가 없어지면서 개발 비용을 줄일 수 있게 되었습니다(대신 기획자와 디자이너는 그만큼 더 깊게 고민해야 합니다).