1. 픽셀을 사용하지 않고 글자 크기를 지정

우리나라에서도 웹 표준이 화두로 떠오르면서 글자 크기를 em으로 지정하는 경우가 많이 있습니다. em으로 하니 감이 잘 오지 않으실 겁니다. 픽셀과 단위가 다르기 때문인데 다음과 같은 코드를 사용하여 동일하게 사용할 수 있습니다.

body { font-size: 62.5% }

위와 같이 선언해 주면 1.0em이 10px 와 같아집니다. 이제 크기를 어림잡기가 편해집니다.

2. CSS 코드를 읽기 편하게 작성

기본 개념은 같은 태그에 속하는 선언을 모아두는 것입니다. 다음과 같이 작성합니다.

h1 {}
  h1#logo { font-size: 2em; color: #000; }
h2 {}
  h2.title { font-size: 1.8em; font-weight: normal; }

CSS의 스타일 선언을 한눈에 훑어 볼 수 있습니다. 각각의 제목마다 스타일이 다를 경우 h2와 같이 관련있는 것들을 묶어 놓는다면 한결 보기가 편해집니다.

3. 유형별로 코드를 분리

CSS를 작성해 놓고 많은 시간이 흐른다면 (저같은 경우 2주일 정도..) 자신이 작성한 스타일도 어디에서 선언되었는지 모를때가 있습니다. 단락의 모양이나 글자 유형들을 변경하기 위해서는 CSS 코드를 다 뒤져봐야 하는 경우가 허다합니다. 이럴 경우 각각의 유형별로 주석을 달아 분리시켜 놓으면 찾기가 쉬워집니다. 필자가 소개한 구조는 아래와 같습니다.

/* Structure */
div등 전체적인 사이트 레이아웃 스타일

/* Typography */
문단이나 제목, 강조등의 글자 스타일

/* Links */
링크Anchor 스타일

/* Lists, images, etc. */
리스트나 이미지 등의 기타 스타일

4. 너무 많은 div 사용을 자제

사이트 레이아웃 표현을 위해 div를 도배하는 것은 좋지 않습니다. 최소한의 태그를 이용해 화면을 구성하는 것이 좋습니다. 이것은 의미론적 마크업이라는 측면에서도 가치가 있는 일입니다. 레이아웃만을 위한 의미없는 div는 HTML 코드만 지저분하게 만들 뿐입니다. 많은 경험해 보는것이 중요한 것 같습니다.

5. 모든 스타일을 한번에 선언

사이트 레이아웃을 잡기 위해서 제일 처음 하는 일은 기본 여백(margin, padding)을 0으로 만드는 것일 겁니다. 이 경우 각각의 태그에 지정하기 보다는 전체 선택자(*)를 이용해 한번에 지정하면 좋습니다.

* { margin: 0; padding: 0; }