티스토리 블로그 W3C 웹표준 통과하기 팁

최근에 블로그 스킨과 글을 수정해서 W3C Markup Validation Service 웹표준 검사에 통과했는데요, 그때 사용했던 몇 가지 방법들을 소개해 드립니다. 혹시 웹표준에 관심이 있었으나 어려워하셨던 분들은 참고하셔서 수정해보세요.

웹표준 통과 팁 (XHTML 기준)

• 모든 태그는 소문자로 써야 하고, 속성에 값을 넣을 때는 따옴표로 감싸줘야 합니다. 종료 태그로 확실히 닫아줘야 하고 순서가 바뀌면 안 됩니다.
  
  <div style="border: solid 1px rgb(243, 197, 52);"><font color="#FF8B16">웹표준</font></div>
   
• 티에디션, 테터데스크, 블로그 아이콘 보기, 블로그 파비콘 보기 등 플러그인 사용 해제
  위 플러그인들은 사용하면 웹표준 검사에서 오류가 납니다. 이런 현상들은 스킨을 수정할 수가 없으니 사용하지 않는 방법 밖에 없습니다.
   
• &는 &amp;로
  &는 직접 입력할 때도 주의해야 하지만 링크 주소나 위젯의 주소에 포함되는 경우가 많습니다. 이 때 &를 &amp;로 수정해 주세요. 마찬가지로 >는 &gt;, <는 &lt;로 바꿔줘야 합니다.
   
• 링크 추가할 때, "현재창으로 열기"를 선택하면 추가되는 target="" 삭제하기
  링크를 추가할 때 편집창 오른 쪽 위에 보면 링크를 현재창에 열 것인지 새창에 열 것인지 선택할 수 있도록 작은 창이 열리죠? 그 창에서 "현재 창"을 선택하면 html 태그에 target="" 이라는 내용이 추가되는데 이 부분을 삭제해줘야 합니다.
  
  <a href="www.tistory.com" alt="[www.tistory.com]으로 이동합니다." target="">www.tistory.com</a>
   
• 파일 첨부할 때, <p> 태그 삭제
  파일, 그림을 첨부해서 본문에 삽입하면 <p>[.....]</p>로 입력됩니다. 여기서 앞 뒤에 있는 <p>, </p> 태그를 삭제해 줘야 합니다.
  <p>태그를 삭제하면 플러그인 중에 Light TT EX(이미지 크게 보기) 플러그인이 동작하지 않습니다. 이 때는 <p> 대신 <div>를 써주면 됩니다.
  
  <p>[##_1C|cfile4.uf@2061CD1B4C172C60DB9663.exe|filename="test.exe" filemime=""|_##]</p>
   
• FootNote(각주)나 슬라이드쇼 삽입 금지
  그림을 넣을 때 슬라이드쇼 형식으로 넣거나 각주를 넣으면 오류가 생깁니다. 사용하지 마세요.
   
• javascript는 //<![CDATA[,   //]]>로 감싸기
  스킨에 보면 스크립트를 사용하게 되는데 이 부분에서 오류가 나오기도 합니다. 그래서 이 부분을 일반 html 태그로 인식하지 않도록 아래처럼 처리해줘야 합니다.
  
  <script type="text/javascript">
  //<![CDATA[
  스크립트 내용
  //]]>
  </script>
  
   
• 외부에서 만든 스크립트 중에 style도 함께 입력하는 경우가 있습니다. 애드클릭스 광고 코드 같은 경우 말이죠. 그 때 sytle 부분은 스킨 편집의 style.css로 넣어야합니다.

주의 해야할 태그

• img 태그는 alt 속성이 꼭 있어야 하고, 마지막에 /(슬래쉬)를 넣어줘야 합니다.
  <img src="이미지 주소" alt="이미지가 보이지 않을 때 표시할 텍스트" />
   
• br, hr 태그 역시 뒤에 /를 넣어서 닫아주세요.
  <br /><hr />

※ 이 글은 크롬플러스로 작성하고 있는데, 글쓰기 모드와 HTML 편집 모드를 변경하면 img 태그와 hr 태그의 뒤 /(슬러쉬)가 없어집니다. IE에서도 같은 현상이 발생하고, 더욱이 태그들이 모두 대문자로 바뀌는 문제까지 생깁니다. 각 브라우저 별로 차이가 있는 것 같습니다. 본인이 사용하는 브라우저에서 생기는 문제에 주의하셔야 합니다.

관련글

W3C Markup Validation Service 웹표준 테스트 통과
웹표준을 지킨 사이트로 등록되었습니다.