유동적인 '씨네큐브' 반응형웹 사이트 보기
씨네큐브 반응형웹 사이트 보기
우연히 사이트 메인시안을 참조하기 위해 벤치마킹을 하는 도중에 들어오게 된 사이트입니다.
요즘은 웹사이트에 들어가면 습관처럼 브라우저창 가로를 줄여보네요,
아무래도 반응형웹이 그만큼 대중화가 되어 사용이 되고 있다는 뜻이지요.
| 이것은 씨네큐브의 메인페이지 입니다.
기본적으로 GNB는 좌측에 위치하고 있으며 우측에는 관련 컨텐츠가 뿌려지는 형태입니다.
조금 브라우저 창을 축소해보았습니다.
| 네, 보시는것처럼 GNB가 상단으로 올라갔네요.
메인 제이쿼리는 이와같이 비율유지하며 축소가 되고 하단부분에 좀더 큰 프레임으로 메인제이쿼리가 반복적으로
구현되는것을 확인하실 수 있습니다.
| 이것은 대략 모바일 크기에 맞게 줄였을떄 구현되는 페이지
모습입니다. GNB부분을 전체보기를 클릭하여 펼쳐보았습니다.
확실히 간결해진 모습을 확인할 수 있네요,
| 이것은 서브페이지로써
메인페이지와 동일한 레이아웃을 구성하고 있습니다.
| 서브페이지 역시 브라우저 크기를 축소할 경우 GNB가
상단으로 이동하여 바로 하단부터 컨텐츠가 뿌려지는것
을 확인할 수 있습니다.
이미지를 일부 잘라낸것으로, 가로폭의 축소로 컨텐츠를
전부 뽑아내기 위해 세로스크롤이 길어집니다.
모바일로 확인시 손가락으로 부지런히 움직여야 할듯^^;;
저번 사이트보단 구현되는게 좀더 단순하지만, 반응형웹
기능은 브라우저상에서도 확인가능하게 되어있네요!
씨네큐브