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

아 결국 페이지 구성을 대폭적으로 바꾸게 되었습니다. 어떻게 되겠지 하는 마음에 엉성하게 짜둔 HTML 코드였던지라, 손을 대면 손을 댈수록 점점 제가 원하던 것과는 거리가 멀어지더군요. -_-; 더군다나 브라우저에 따라 다른 렌더링 방식은 그냥 엄청난 압박이더군요.

그리하여 나온 결과물! table, td, tr 이 난무하는 대신 div 태그가 군데 군데 좀 많이(!) 보입니다만, 그래도 단순히 테이블 태그만을 썼을 때보단 훨씬 간결하게 보이는 듯 하네요. (직접 테이블 태그만 써서 짜보지는 않았으니 확신은 못합니다만)

CSS 코드도 간결하게 하려 노력해봤습니다. 군데 군데 너저분하게 널려 있던 font-family 태그를 한군데에 묶어주고, 폰트 크기를 절대적으로 지정해주던 부분도 왠만하면 상대적으로 지정되게 바꿨습니다. 그렇다고 아예 지정하지 않을 수는 없어서 body 부분에 살짝쿵 넣어뒀어요. 🙂

한가지 완벽하게 해결하지 못한 부분은, 메인페이지 부분의 위와 아래에 빈공간이 생기는 부분입니다. 한 1픽셀씩 공간이 비던데, 도대체 이유를 모르겠더군요. 익스플로러 6에서는 원하는대로 보이는 듯 싶은데, 파이어폭스에서는 계속 공간이 생기더라구요. 그래서 결국 임시조치로 위, 아래를 padding 으로 메꾸어 버렸습니다. 이렇게 하고 보니, 마치 부실공사한 뒤에 시멘트나 콘크리트로 겉에만 조금씩 떼우는 느낌이 들더군요. ㅜ_ㅜ 이유를 알기 전까진, 사이트가 익스플로러 6와 파이어폭스에서 조금씩 다르게 보이는 건 어쩔 도리가 없네요. 별로 큰 차이가 아니어서 그냥 넘어가려 합니다. 우선은 말이죠.

CSS 가 써먹기 힘들긴 하지만, 막상 쓰기 시작하니 참 편리한 점이 많더군요. 많은 분들이 CSS로 사이트 디자인을 하시려는 이유를 이제서야 조금은 알듯 싶습니다.

제가 생각하는 CSS 태그의 편한 점 몇가지:

1. CSS 는 마치 모듈/함수 모음과 같은 것 같습니다. HTML 코드안에서 일일히 매번 똑같은 내용을 지정하는 것 보다, CSS 코드 안에 한번 정해주면, 계속 써먹을 수 있으니까요. 예를 들면, img { border: 0px; } 같은 것은 꽤 쓸만하더군요. 더군다나 한번 만들어 놓으면 어느 곳에서든 불러 써먹을 수 있으니 일석이조입니다. 일일히 HTML 코드 내부에 세세한 설정을 해두기란… 참 후우… (먼산)
2. CSS 는 뭐랄까 훨씬 유동적이며 세부적입니다. position 태그의 유용함이라든가, background-image: url(images/topmenu_background.jpg); background-repeat: repeat-x; 등의 뒷배경의 다양한 반복 가능성등, HTML 파일 내부에서도 자체적으로 가능할지도 모르겠습니다만, CSS 가 편하다는 건 두말할 나위가 없는 듯 싶네요.

제가 전문적이지 못해서 웹디자인/언어 쪽은 여전히 초보적인 단계입니다. 부족해 보이는 글이였더라도 너그럽게 이해해주셨으면~ 합니다. 😀