Page 9 -

정적 레이아웃으로 제작된 웹 사이트는 다양한 기기(데스크톱, 스마트폰, 태블릿PC 등)에서
접근했을 때 몇 가지 문제가 발생할 수 있습니다. 데스크톱 화면보다 크게 제작된 웹 사이트

를 데스크톱에서 접근하면 콘텐츠가 잘린 상태로 출력되면서 가로 스크롤이 발생합니다.

스마트폰이나 태블릿PC, 키오스크, 스마트워치에서는 웹 사이트 크기가 각 기기 화면에 맞
게 자동으로 조정되면서 콘텐츠가 작게 출력됩니다. 사용자는 손가락으로 특정 영역을 터치

해 확대하면서 웹 사이트를 이용해야 하므로 불편합니다.

그림 1-4 정적 레이아웃: 브라우저 너비를 줄이면 브라우저 하단에 가로 스크롤이 나타남

콘텐츠가 잘림

가로 스크롤이 나타남

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

책에서 제공하는 예제 파일은 길벗출판사 홈페이지(www.gilbut.co.kr)에서 ‘도서명’으로 검색한 후 내려받을 수 있습니다. 해당 HTML
파일을 크롬 브라우저에서 열면 예시 화면을 볼 수 있습니다.

이처럼 정적 레이아웃은 데스크톱, 스마트폰, 태블릿PC 등을 모두 고려해서 웹 사이트를 제

작하기에는 적합하지 않습니다. 이러한 문제를 해결하기 위해 최근에는 스마트폰과 태블릿
환경에 적용할 수 있는 적응형이나 반응형 레이아웃으로 웹 사이트를 제작하는 경우가 많습

니다.

동적 레이아웃

동적 레이아웃은 브라우저 너비와 상관없이 화면에 콘텐츠가 꽉 채워지도록 제작하는 방식
입니다. 브라우저 너비가 바뀌면 공간 크기가 동적으로 변하기 때문에 가로 스크롤이 나타

나지 않습니다.

DAY 01 웹을 구성하는 요소 15