유동적인 '씨네큐브' 반응형웹 사이트 보기

씨네큐브 반응형웹 사이트 보기

 

우연히 사이트 메인시안을 참조하기 위해 벤치마킹을 하는 도중에 들어오게 된 사이트입니다.

요즘은 웹사이트에 들어가면 습관처럼 브라우저창 가로를 줄여보네요,

 

아무래도 반응형웹이 그만큼 대중화가 되어 사용이 되고 있다는 뜻이지요.

 

 

   | 이것은 씨네큐브의 메인페이지 입니다.

     기본적으로 GNB는 좌측에 위치하고 있으며 우측에는 관련 컨텐츠가 뿌려지는 형태입니다.

 

    조금 브라우저 창을 축소해보았습니다.

 

 

 

 

 

 | 네, 보시는것처럼 GNB가 상단으로 올라갔네요.

   메인 제이쿼리는 이와같이 비율유지하며 축소가 되고 하단부분에 좀더 큰 프레임으로 메인제이쿼리가 반복적으로

   구현되는것을 확인하실 수 있습니다.

 

 

 

 

 

 

 

| 이것은 대략 모바일 크기에 맞게 줄였을떄 구현되는 페이지

  모습입니다. GNB부분을 전체보기를 클릭하여 펼쳐보았습니다.

 

  확실히 간결해진 모습을 확인할 수 있네요,

 

 

 

 

 

 

 

| 이것은 서브페이지로써

  메인페이지와 동일한 레이아웃을 구성하고 있습니다.

 

 

 

 

 

 

 

| 서브페이지 역시 브라우저 크기를 축소할 경우 GNB가

  상단으로 이동하여 바로 하단부터 컨텐츠가 뿌려지는것

  을 확인할 수 있습니다.

 

  이미지를 일부 잘라낸것으로, 가로폭의 축소로 컨텐츠를

  전부 뽑아내기 위해 세로스크롤이 길어집니다.

 

  모바일로 확인시 손가락으로 부지런히 움직여야 할듯^^;;

  저번 사이트보단 구현되는게 좀더 단순하지만, 반응형웹

  기능은 브라우저상에서도 확인가능하게 되어있네요!

 

    

 

 씨네큐브

 http://www.icinecube.com/