HTML & CSS 정리해본 예

정상혁정상혁

제가 있는 프로젝트의 UI표준은 2004년 10월경에 처음 정해진 것입니다. 연속 사업 중 첫번째 사업 때 정해진 틀을 그 뒤에도 수정없이 copy&paste로 입혀서 쓰고 있는 중이죠. 디자이너가 html으로 파일을 만들어 주었을 당시에는 팀원 중에 웹표준에 대해서 신경을 썼던 사람이 없었습니다. 지금 다시 들어다보니 css를 잘 정의했으면 훨씬 깔끔하게 중복없이 만들수 있었던 코드가 많이 보입니다.

저도 작년에 파주시 프로젝트에서 웹표준에 맞춰서 개발을 하고 있다는 말을 듣기 전까지는 스스로 css를 정리해볼 생각은 없었습니다. 그런 작업은 디자이너의 영역이라고 안이한 생각을 하고 있었던 것이죠 ^^; 새로 프로젝트 들어가면 깔끔하게 UI표준 만들어주는 사람을 만나기를 바라는 마음만 있을 뿐이였습니다. 그러다가 정동인씨나 최효근씨 같은 후배들에게 배우고 느낀 바가 많아서 저도 현재의 프로젝트에서도 서서히 적용하겠다는 의지를 가지게 되었습니다.

이번에 고객이 다른 업무와 독립적으로 쓰여질 프로그램을 요청했는데, 그 페이지에는 새로운 css를 만들어서 적용하고 싶었습니다. 현재 프로젝트에 남은 3명의 인원만으로는 모든 페이지를 다 갈아 엎는 것은 무리라고 생각했었는데 적당한 시작점을 찾은 것이죠.

처음 수정한 부분은 화면의 큰 제목과 하위 제목이였습니다.

image

와 같이 보여지는데, 기존 코드로는

<table border="0" cellpadding="0" cellspacing="0" width="100%">
 <!-- 제목 -->
 <tr>
  <td>
   <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr><td class="title1"><img src="/image/title_header.gif" align="absmiddle">&nbsp;감사사항 목록</td></tr>
    <tr><td class="tilte_space"></td></tr>
    <tr><td class="title_line"></td></tr>
    <tr><td class="tilte_space"></td></tr>
   </table>
  </td>
 </tr>
 <!-- 조회조건 -->
 <tr>
  <td>
   <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td align="left" class="title_small">
            <img src="/image/title_small.gif" align="absmiddle">&nbsp;조회조건
        </td>
    </tr>
   </table>
  </td>
 </tr>

로 나와있는 부분입니다. 이걸 css를 새로 만들고 나니

  <h1>감사사항 목록</h1>
  <h2>조회조건</h2>

이렇게 딱 두줄로 바꿀수가 있네요. CSS에 다음과 같이 배경이미지, 선 등을 넣어서 정리한 것이죠. 매페이지마다 반복되는 글자 앞의 이미지, 선과 여백을 위한 table, tr, td 문장들이 모두 정리됩니다.

h1 {
  font-size:14px; color:#5C5C5C;
  font-family: 돋움, arial;
  font-weight:bold;
  height:14px;
  padding-left: 20px;
  padding-bottom: 10px;
  margin: 10px 10px 2px 10px;
  background-image: url(/image/title_header.gif);
    background-position: 0% 10% ;
  background-repeat: no-repeat;
  border-color:#C0C3C6;
  border-width:1px;
  border-bottom-style: solid;
}

h2 {
  font-family: 돋움, arial;
  font-weight:bold;
  font-size:12px;
  height:13px;
  color: #4f4f30;
  padding-left: 20px;
  margin-bottom: 4px
  padding-bottom: 10px;
  margin: 10px;
  background-image: url(/image/title_small.gif);
  background-position: 0% 0% ;
  background-repeat: no-repeat;
}

그리고 새로 개발되는 화면에 좌측 메뉴부분이 있는데, css에서 float:left 선언을 이용하니 table없이 레이아웃을 잡을 수가 있었습니다. 웹표준을 설명하는 자료에서 많이 드는 예제이죠. 반복되는 class 지정에도 선택자를 잘 활용하면 클래스 지정없는 태크만으로 처리할 수 있는 부분이 많아보였습니다.

이제 기초적인 것을 적용시킨 것 뿐이고 제가 공부할 것이 아직 많아서 갈 길이 멀다는 기분이에요. 그래도 간결한 jsp를 보니 몇달만에 방청소 했을 때보다 더 속이 시원합니다.

그동안 UI단 코드의 중복에는 지나치게 관대하게 살아왔었다고 반성했습니다.

웹표준관련 권장 자료

(부서 후배 최효근씨가 추천해준 자료입니다)

  • 한국소프트웨어진흥원의 실전웹표준가이드

  • Head First HTML(XHTML, CSS) -한빛미디어-

  • 실용예제로 배우는 웹표준 -에이콘- // 본격적인 활용기

  • 웹2.0을 이끄는 방탄웹 -에이콘- // 아이디어가 넘치는 책

  • CSS 마스터 전략 -에이콘-

  • CSS designing without tables -sitepoint-(원서) // 무릅을 탁 치게 되는 책

  • CSS the css anthology -sitepoint-(원서)