이런 디자인을 갖는 사이트는 마크업을 어떻게 해야 할까요?
연연두
먼저 마크업된 구조를 이미지로 보여드리겠습니다.
내용은 별루 없지만, 글을 이미지로 표현하다보니 스크롤압박이 있습니다. 양해부탁드려요~//html구조//
html
head
~헤더내용~
/head
body
div id=bodyWrap
div
~플래쉬네비랑 로고, 헤더 컨텐츠영역 ~
/div
hr /
!-- MainContents Area Start --
div id=contentWrap
div id=sideContent
~왼쪽메뉴와 관련이미지 영역 ~
/divdiv id=subCopy
~서브페이지 플래쉬 무비영역~
/div
div id=primaryContent
div id=subTitNavi
~페이지타이틀과 네비게이션~
/div
div id=inputContent_area_min
~메인컨텐츠 영역~
/div
/div
/div
!-- MainContents Area End --
/div
hr /
div id=footerArea
~풋터영역 ~
/div
/body
/html
기획단에서 의도한것은 무조건 중앙정렬을 해달라였습니다.
큰 이미지를 알씨로 보면 알씨 창을 이미지 사이즈보다 적게하든 크게하든 이미지는 중앙을 지키고 있는것처럼
html을 이용해서 그렇게 해야한다는 조건이 있었습니다.
상단과 하단으로 컨테이너를 분리했습니다. 저렇게 분리한 것은 의도가 있어서 나눈것 같은데 기억이 안나네요T_T.
참고로 다른페이지경우 1004픽셀의 고정페이지가 있습니다. 그것들은 왼쪽메뉴와 왼쪽이미지가 없어서 단지 1004픽셀의 통 이미지가 들어갑니다. 그래서 위에 있는 컨텐츠를 보다가 1004픽셀의 통 엘리먼트가 들어간 페이지를 사용자가 보더라도 어색함 없이 가운데로 위치한 사인트를 볼 수 있게 해달라는 거였습니다.
지금 위에 구조를 보면 왼쪽메뉴밑에 관련이미지사이즈가 왼족메뉴보다 348픽셀이 왼쪽으로 더 확보된 상태입니다. 왼쪽이미지 모두가 다 그러면좋은데 599픽셀을 모두 이용하는 이미지가 있는반면 약 300픽셀되는 이미지도 있습니다.이미지배경은 흰색이고요...
이상태에서윈도우사이즈 1394픽셀이하가 될때,보여지는 영역은 중앙정렬된 상태를 유지 할 수 있도록 js를 통하여 왼족으로 바디자체에 마이너스 마진값을 적용했습니다.그리고나서 리사이즈 함수를 이용해서 윈도우 리사이즈를 하더라도 왼쪽마진값이 자동으로 조정되어 보여지는 영역이 가운데로 위치하게끔 해줬습니다. 도큐먼트의 회소 가시영역은 위에 보여지는 것 처럼 1004픽셀은 유지해야 합니다. 이상태에서 당연히 중앙정렬이 되어야 하구요..
그냥 코딩만 된상태에서는 데이터양이 적어 문제가 의도한대로 된것 같았는데, 프로그램입힌 후 화면을 리사이즈할때서버통신과 함게불러오는 데이터양으로 인해 화면이 너무나 부자연스럽게 조정되는겁니다.
처음 기획자가 의도한 형태를 갖는 사이트를 마크업만으로 해결할 수 있는 방법이 있을까 하고 질문을 남겨봅니다.
그 동안 제가 해온 코딩스타일이나 디자인 스타일이 다른것도 있고, 이런 형태의 사이트를 구축하는 것도 첨이라
어려움이 있네요. 사이트는 부분오픈식으로 계속 오픈되고 있는데, 이문제를 해결하지 못하면 그 동안 해온 일이 모두 물거품이 될 것같네요.
자...수다닷컴분들에게 도움을 청해봅니다.
저도 여기에 어떻게 설명하면 되나 고민되고했는데 , 우선 이렇게 질문해보고 질문내용이 이해가 안되신다면 답글로 남겨주시면 수정해서 다시 올리겠습니다.
-
고딩
감쏴는~~ ㅎㅎ ㅋ
-
갤1
답변을 장황하게 썼다가 지웠습니다.
이문제는 쉽게 생각해보세요..
1004px 짜리 가운데 정렬한 컨테이너 안에서
레프트메뉴 영역에 있는 이미지 부분만 position:absoulte; right:0; 적용하면
이미지부분이 작은화면에서는 보여질수 있는 만큼만 보여지고 큰화면에선 다 보이겠죠;;
굳이 최대 몇픽셀 최소 몇픽셀 따질 필요가 없다고 봅니다. -
한빛
와우~ 넘 간단한 답이었군요~와와와아~
자세한 답변 정말 필요없었네요...짱짱짱~
absolute속성에 대해 다시 알수있었네요..정말 감사합니다...