몇 가지 주의 사항

레이아웃 뿐만 아니라 웹페이지의 컨텐츠를 만드는 동안에는 가능하다면 크로스브라우징에 신경을 써야겠습니다. 웹표준을 다 지키지는 못하더라도 적어도 다양한 브라우저에서 동일한 결과가 나타나야합니다. 웹표준이나 크로스브라우징 같은 것을 잘 모를 경우 네이버의 웹표준화 가이드를 참고하세요.

더 울어 웹표준과 크로스브라우징에 가장 문제가 되는 것은 MS의 익스플로러 6입니다. 윈도우즈XP가 불법유통으로 개인에게 유통되다보니 여전히 국내에서는 많이 사용되고 있는 브라우저이기 때문이지요. 익스플로러 6이 없으면 테스트를 못하기 때문에 IETester라는 프로그램을 사용하면 됩니다.

익스플로러 외에 파이어폭스, 사파리, 오페라, 크롬과 같은 브라우저도 많이 사용됩니다. 모두 무료이기 때문에 설치해서 오류가 없는지 확인해봐야합니다.

다운로드

파이어폭스
사파리
오페라
크롬

디 폴트 CSS를 보시면 맨 아래에 :after라는 가상 클래스라는 것이 있습니다. 이를테면 부모요소인 #header가 자식요소인 #header-inner의 높이를 반영하지 않습니다. 때문에 가상클래스를 이용하는 것입니다. 자세한 CSS 설명은 웹표준에 관한 서적이나 컬 럼 구조 레이아웃 기법의 설명을 읽어보세요.

/* Utilities 레이아웃 가상클래스 ---- */

#header:after,
#header-inner:after,
#footer:after,
#footer-inner:after {
    content: " ";
    display: block;
    visibility: hidden;
    clear: both;
    height: 0.1px;
    font-size: 0.1em;
    line-height: 0;
}

자신의 선택자 명칭에 맞게 가상 클래스 부분을 적용하시면 됩니다. 만약 #article이라는 선택자를 만들었다면 #article:after를 위의 가상클래스에 포함시키면 됩니다. 저의 디폴트 CSS를 이용해서 레이아웃을 짜다가 레이아웃이 뭔가 이상한 점이 발견된다면 혹시라도 잊지 않았는지 주의하시기 바랍니다. 레이아웃에 관여된다고 싶은 부분이 있다면 전부 가상클래스에 넣어버리세요. 가상클래스 같은 것에 깊이 고민하면 머리아프니까요. 아무튼 저의 디폴트 CSS를 이용하시면 그밖에 크로스브라우징을 위해 CSS hack 같은 것은 적용하지 않아도 됩니다. (혹시 모르니 버그나 잘못된 점이 있다면 지적 부탁합니다)