web 표준에 대한 관심이 많아지고 있는 때이기도 하고, 무엇보다도 jquery 등 표준화된 Framework를 사용할 때에 기존의 table code의 경우에는 사용에 많은 제약 사항을 가지게 된다.
무엇보다도 table의 <tr>, <td>로 묶여있는 안에서 <div> 등으로 다시 묶어주는 그야말로 엉망인 일을 해야지 되기 때문에 좀더 정형화되고 표준화된 web code의 필요성은 절대적으로 필요하게 된다.
불행히도... 디자이너들중에서 css나 웹표준을 사용해서 디자인을 하시는 분들이 아직까지 많지 않은 현실에서 개발자가 요구사항을 충족하기 위해서 css를 공부해서 변경을 시켜야지 되는 일이 빈번하게 이루어지고 있다. -_-;; (나도 그중 하나. -_-)
공부도 할겸, 기존의 코드보다 뛰어나다는 것을 증명하고 싶어서 아직 디자인중인 코드를 정말로 몸으로 부딛혀서 만들어봤다. 조금 아는 것은 margin, padding, float 정도밖에 없는 상태에서 수많은 삽질과 삽질을 하면서. --;;
1. table에서의 cellspacing, cellpadding의 변경
table에서 옆의 table과 정확한 수평을 유지하고 원하는 디자인을 만들기위해서 cellspacing과 cellpading을 사용한다. 이 부분의 경우에는 간단하게 padding과 margin의 속성을 설정해주는 것으로 해결할 수 있다.
2. 모든 browser를 다 맞추기에는 힘들다.
IE, FIrefox, crome 3개의 browser에서 모두 테스트를 하면서 맞추어보고 있었는데..
솔찍히 IE에서 너무나 안맞는다. -_-;
그나마 괜찮다는 IE 7에서조차 이런데. 다른 사람들이 저주하는 IE 6에서는 도대체 어떤 일들이 벌어지고 있는지 감조차 오지 않는다.
이럴때 주로 사용하게 되는 것이 CSS Hack.
표준을 어기게 되는 코드이지만, 어쩔수없는 선택으로 사용하게 되는 것 같다.
<!--[if IE]>
<style type="text/css" rel="stylesheet">
.header_left_menu img
{
border:0px none;
margin:0px;
margin-top:-1px;
}
</style>
<![endif]-->
3. 먼저 page에 대한 그림을 그리자.
무턱대로 코드부터 시작하는 것이 아닌, page의 layout이 어떤 모양으로 되어있는지 그림을 그려보고, div로 묶는 것을 그림으로부터 시작하는 것이 빠르다. 그리고, 큰 그림에서 시작해서 작은 그림으로 넘어가게 되면 은근히 간단하게 바뀌게 된다.
4. 검증을 확실히 하자.
웹표준에 맞추기 위해서 코딩을 바꾸는것은 좋지만, 자신이 보는 브라우져에서만 보게 되면 십중 팔구 큰 문제가 생기게 된다. 모든 브라우져에서 한번 보면서 문제가 어느곳에서 생긴것인지를 찾는 노력이 필요하다.
게시판_공지_내용.aspx
