πano

의도한 디자인은 폭이 고정된 메뉴바를 우측에 놓고, 본문은 브라우저 창의 크기에 따라 가변적으로 늘어나서 포스트를 최대한 넓게 볼 수 있도록 하는 것이었다. 또한 본문과 메뉴바는 높이가 서로 다르고 가변적이므로, 두 컬럼의 높이를 큰 쪽에 맞춰줄 필요가 있다.

table 태그를 사용하면 간단하게 할 수 있지만, 최근 web 2.0(주1)을 조금씩 줏어듣다 보니, div 태그와 CSS로 만들어보겠다는 생각이 들었다.

첫 며칠은, 짧은 지식으로 이것 저것 건드리다가 화면이 망가져서 포기하고 원상복구 시켜 놓았다.

그리고 어제, html상에서 메뉴바 div를 본문 div보다 위에 적고, 메뉴바를 float하여 오른쪽에 보내고, 본문을 메뉴바 폭 만큼 좌측으로 이동시키고, 이동한 만큼 좌측에 화면 밖으로 벗어나는게 있어서 다시 메뉴바 폭 만큼 좌측의 여백을 설정하여 원하는 모습이 나왔다.

파이어폭스 1.5(이하 FF)에서는 원하는 모습이 나왔다. 그런데 IE 6에서는 우측 메뉴바가 이미지를 제외하고 모두 투명하게 되었다. 메뉴에 마우스를 가져가면 커서가 링크 모양으로 변하고 클릭하여 페이지 이동도 가능한데, 글씨가 안 보였다. IE 7에는 제대로 나오겠지 하며 기대하고 열어봤는데 똑같이 나왔다.

그리고 FF에서는 겉보기에는 의도한 모양으로 나왔는데, 메뉴를 클릭할 수 없었다. 마치 투명한 레이어가 막고 있는것 처럼 마우스로 메뉴에 전혀 접근할 수 없었다.

오늘 다시 스킨 편집에 손을 댓고, 메뉴바의 position을 absolute로 주고, 본문은 메뉴바 폭 만큼 오른쪽 여백을 주고, 본문의 높이가 메뉴바의 높이보다 짧을 때 메뉴바 하단이 부모 div영역 밖으로 나가는 것을 막기 위해, 본문에 메뉴바 높이 정도의 min-height를 주었다. 그리고 FF에서 원하는 모습이 나왔다.

IE 6에서 min-height를 지원하지 않기 때문에 본문 높이가 메뉴바 높이보다 작으면 디자인이 조금 깨지지만, 블로그를 이용하는데 문제가 없다는 점에서 만족하기로 했다.



주1) html 태그는 컨텐츠를 의미하는데 사용한다. table 자체가 컨텐츠라면 table 태그를 쓰고, 화면상에 어떻게 보여질 지 레이아웃을 정하는 것이라면 CSS를 사용한다. 마찬가지 예로 이미지가 컨텐츠라면 img 태그를 쓰고, 단지 화면 디자인을 위한 배경 등의 의미라면 CSS를 사용하여 이미지를 표시한다.