반응형 웹 디자인 유동형 레이아웃
■ N-Screen 시대에는 특정한 크기로만 홈페이지를 만들면 안 되기 때문에 반응형 웹 디자인이 뜨고 있는데요. 지난 글에서는 미디어쿼리를 이용해서 반응형 웹을 만드는 원리에 대해서 알아봤습니다. 이번에는 유동형 레이아웃에 대해서 알아보도록 할게요. 미디어쿼리의 원리에 대해서 알고 싶으면 아래 글 참고하시면 됩니다.
▶ 미디어쿼리 : http://godvow.tistory.com/46
■ 유동형 레이아웃이란 홈페이지의 요소의 크기가 화면의 크기에 따라서 변하게 되는 원리인데요. 일반적으로 홈페이지를 만들 때 픽셀 단위로 본문의 크기나 사이드 바 등을 만듭니다. 이렇게 크기가 고정되어 있으면 PC, 태블릿, 스마트폰에서 볼 때 모두 같은 화면으로 보이기 때문에 사용자가 화면을 확대하거나 축소해서 봐야 하는 불편함이 있습니다. 하지만 유동형 레이아웃을 이용하면 해당 기기의 화면 크기에 따라서 각각의 요소의 크기가 변하기 때문에 모든 기기에서 동일한 화면을 보실 수 있습니다.
■ 각 요소의 크기를 픽셀이 아닌 백분율로 표시하는 원리인데요. body 태그 안에 있는 헤더, 본문, 사이드바, 푸터 등을 하나의 큰 박스(div)로 묶어주고, 이 박스의 크기와 안에 들어 있는 요소들의 크기를 백분율로 처리하게 되면 화면의 크기가 변하면 각 요소들이 화면의 크기에 맞게 사이즈가 바뀌게 되는 원리 입니다.
■ 글로 설명하려니 보시는분도 어렵고 저도 어렵네요. ㅎ 예제를 만들어서 이해해 볼게요. 예제에서는 본문(body)에 div 박스를 하나 만들고 그 안에 이미지 한장을 넣고, div와 img의 사이즈를 백분율로 설정해서 어떻게 변하는지 살펴보겟습니다. 여기서 사용할 이미지는 1060X200 픽셀의 이미지 입니다.
가로가 1060이고 세로가 200 픽셀인데요. 이 그림을 넣어서 어떻게 변하는지 살펴볼게요. 먼저 소스를 보겠습니다.
■ body 태그 안에 div 태그를 넣어서 박스르 만들고 id를 "aaa"로 설정하고 준비한 그림을 넣었습니다. 그리고 이 박스(id="aaa")의 가로 크기를 화면의 90%, 세로는 200픽셀로 지정했습니다. 그리고 위.아래 margin은 "0"으로 오른쪽과 왼쪽의 마진은 "auto"로 설정했구요. (이렇게 오른쪽 왼족 여백을 auto로 설정하면 박스가 화면의 중앙에 위치하게 됩니다. )
■ 그리고 이미지의 사이즈도 상위 요소인 div(id="aaa")의 가로, 세로 각각 90%씩으로 지정했습니다. 이 예제를 웹 브라우저에 열어볼게요.
■ 화면의 크기에 따라서 회색으로 처리한 박스와 그림들의 사이즈가 변하게 되는데요. 그림으로는 표현 하기가 조금 힘드네요. ㅎ 간단하게 동영상으로 찎어볼게요.
■ 동영상을 보시면 좀 더 이해가 쉬울거에요. 이렇게 화면의 크기에 따라서 각 요소들의 크기를 백분율로 처리해서 사이즈를 변하게 하는 방법이 유동형 레이아웃이라고 할 수 있습니다. 수고하셨어요.^^
