위와 같은 레이아웃을 가진 페이지가 브라우저 넓이가 작은(768픽셀보다 작은) 장치(스마트폰 등)에서는 아래와 같이 보이게 하려면 반응형 스타일 설정을 해야합니다.
간단한 작업은 아니죠.
오즈홈빌더에서는 이러한 반응형 설정을 쉽게 설정할 수 있도록 기능을 추가했습니다.
위의 샘플 사이트에서는 아래와 같이 총 6개의 셀 속성을 설정하여 반응형 페이지를 구현하였습니다.
먼저 상단 헤더부분은 [메뉴/반응형 헤더] 모듈을 사용하였기 때문에 별도 반응형 설정을 하지 않아도 자동으로 반응형 설정이 완료됩니다.
① 좌측 단 - 셀 속성에서 아래화면처럼 브라우저 넓이가 768픽셀보다 큰경우는 3/12 만큼 넓이를 차지하게 설정하고, 768픽셀보다 작은경우는 전체넓이를 차지하게 설정한 속성입니다.
② 우측 단 - 좌측과는 반대로 12-3인 9칸을 차지하게 하여 좌우 단을 구성했습니다. 마찬가지로 768픽셀보다 작은 경우는 전체넓이를 차지하게 하여 좌우로 구성되었던 단이 상하로 줄바꿈처리되게 합니다.
이때 좌측에 있는 단이 우측단 밑으로 줄바꿈이 된 이유는 자식셀 순서에서 우측단이 앞서기 때문입니다. 순서는 앞서는데 좌우단에서는 좌측이 아닌 우측에 위치한것은 셀속성중 Float 속성으로 좌우 위치를 정했기 때문이죠.
③ ④ 하단 카피라이트 및 하단 보조메뉴 - 이번에는 8:4의 비율로 좌우 단을 구성하였습니다.
⑤ ⑥ 좌측 서브메뉴 및 우측 퀵배너용 셀 - 해당 셀들은 모바일 환경에서는 보여줄 필요가 없기 때문에 브라우저 넓이가 특정넓이(992 또는 768픽셀)보다 작아지면 숨기게 설정을 한 상태입니다.
위와 같은 설정으로 쉽게 반응형 페이지를 구성할 수 있습니다.
반응형 설정에 대한 자세한 설명은 여기를 참고해주세요.