CSS 로 테이블 태그를 대신하다

요즘 들어 바쁘군요. 회사일하랴, 뒤처지지 않기 위해 여기저기 웹서핑하면서 정보 얻으랴, 거기다가 최근에는 대학 공과 친목도모용 웹사이트를 만들기 위해 분주하게 움직이고 있답니다. 실은 웹사이트는 예전부터 계획하고 실행까지 옮겼습니다만 번번히 실패했어요. 부실한 내용과 관리부족 에다 주위 호응까지 떨어져서 그만 포기했었습니다.

웹사이트 말이 나왔으니, 최근 몇일간 제가 배우게 된 몇가지를 짚고 넘어가죠. 싫으셔도 피하실 수 없어요, 이미 늦었단 말입니다. 음하하핫 -_-;

솔직히 제가 직업이 웹디자이너도 아니고 딱히 크게 관심을 가지고 있는 것도 아니어서 지금 뭐가 어떻게 돌아가는 지 모르겠네요. 거기다가 웹표준이 지속적으로 바뀌어가고 개선되어 가고 있는 요즘, 브라우저 종류까지 늘어나서, 이것 저것 신경 써야 할 부분이 한두개가 아니군요. 웹표준이야 최대한 어떻게든 지키면 되겠지 싶지만, 브라우저마다 렌더링 방식이 다른 것은 참… oTL

글 제목처럼 과감하게 테이블 태그를 벗어던지고 CSS 로 모든 구성을 해보려 했습니다. 다만 문제는 애시당초 사이트 템플레이트를 제가 만든게 아니라, NZEO 사이트 자료실에서 얻어온 것이기에 짧기도 짧은 제 지식으로는 도저히 테이블 태그 없이 모든 것을 다 담을 수가 없네요. 결국 내린 결론은 양 옆을 살짝 잘라 내어 버리는 것! 그로 인해 얻은 결과물은 양옆의 그림자가 없는 페이지입니다만, 나름대로 만족중입니다. 😀

더 큰 문제는 익스플로러 6와 파이어폭스의 CSS 렌더링 방식 차이에 있었습니다. 7은 테스트를 안해봤으니 패스.

div#mainpage {
  margin-left: auto;
  margin-right: auto;
}

제가 알기로는, 위 태그로 분명히 div tag 안에 포함된 내용이 가운데로 정렬되어야 하는 데, 아무리 해도 익스플로러 6에서는 안되더군요. 결국 머리를 쥐어 뜯고 한참 검색을 한 후에야,

body {
  text-align: center;
}

위의 방법으로 아예 body 를 가운데로 정렬하게 만들고, 필요한 부분마다 새로 정렬해 주는 방식을 선택하고야 말았습니다. 더 깔끔한 방법도 있겠지만, 임시로, 더군다나 제가 디자인한 템플레이트도 아니다 보니, 그냥 저렇게 처리하는 게 제일 속편하더군요.

어느 정도 완성된 현재 웹사이트, http://hyomini.new21.net/temp/topmenu_home.html 는 파이어폭스로 테스트해보지 못했기에 아직 마음이 편하지는 않습니다. 그래도 표준을 지켰고, 익스플로러 6에서도 제대로 보인다면, 파이어폭스에서도 잘 보일 것만 같군요. 🙂

이번 일을 계기로 하나 배운겁니다만, CSS 로 테이블 태그 하나 없이 사이트 만들어 보는 것도 나름대로 재미있더군요. 애초에 사이트 디자인을 테이블 없이 할 것을 각오하고 만든다면 더 수월할지도 모르겠습니다. 아니면 단순히 제가 부족해서 그런지도 모르겠어요. 😛