CSS 미적용, 다르게 적용

CSS의 등장으로 각 태그의 속성을 쉽고 간편하고, 좀더 다양하게 줄 수 있게 되었지만, 간편한 만큼 소홀히 해주면 안되는 것들이 있다.

혹시 자신이 적용한 CSS가 제대로 적용 되지 않는 다면 다음의 경우중 하나일 가능성이 높다.

1. 문서의 DOCTYPE 을 확인하자
HTML태그의 속성을 변경하는 것이기 때문에 DOCTYPE이 어떤식으로 정의되어 있느냐에 따라서 적용이 다르거나 안되는 경우가 많다. (특히 IE(Internet Explorer)에서는 더 심하게 구분되는 거 같다...)

2. 해당 페이지에 포함된 CSS들을 체계적으로 관리해라
간단한 웹페이지면 이럴경우가 없지만, 여러가지 문서들이 복합적으로 얽혀 있는 웹페이지라면, 관리가 중요하다. 특히 가장 상위에 포함시켜 거이 모든 페이지에서 쓰이고 있는 페이지들일 경우 따로 기본 CSS를 지정하기 마련이다. 이럴경우 충돌이 일어나 원하지 않은 결과를 초래하게 된다.

3. CSS의 우선순위를 확인하자
css의 우선순위
!important 명시 > style속성 > style요소 (id> class > contextual selector > general selector) > 외부 css 파일

아무리 CSS가 있다고 하여도, 해당 태그 내에 직접 입력한 속성들이 있다면 그것이 우선시 되는것이 보통이다.
만약에, CSS로 작성한 문장중에 class나 name으로 지명 되는 태그 이외에 직접 td{ }, table{ } 이런식으로 전체적인 속성을 컨트롤 해주는 부분이 있고, class나 name으로 td나 table 지정해준 부분이 있다면 td{ }나 talbe{ }로 지정된 것이 우선시 된다.

이외에도 더 있겠지만, 최근 필자는 이 3가지 경우때문에 고생좀 했다.
(고생한 기념으로 적는 글... )

//------------------------2012.05.15 추가사항.
css파일과 속성을 같이 쓰는 경우가 있다. 예를 들어

.table1 { text-align:center; }
<table class='table1' align='center'>

와 같은식으로 말이다. 이것은 웹 표준화 관점에서 볼때 상당히 안좋은 방법이다.
위와 같이 쓴다면, IE에선 제대로 보일수도 있지만, 타 브라우저에선 정렬이 제대로 안될 가능성이 높다.(해당 테이블을 감싸고 있는 태그들에 따라서 다를테니..)
한마디로 웹표준화를 위해서는, 해당 css와 속성들을 난잡하지 않게 해놓는 편이 좋을 것이다.