html5 브라우저 호환 준비하기

지난 포스팅에서 HTML5 태그를 이용하여 구조화를 해보았습니다.

이 코드를 브라우저에서 실행해보신 여러분들 여러분들이 원하시는 모양대로 나오던가요?

아마 그렇지 않다 라고 말씀하시는 분들이 많을 겁니다.


근래의 최신 버전의 브라우저들은 HTML5를 충분히 지원하는 경우도 있지만

그렇지 않은 경우가 많기 때문입니다.

그래서 우리는 이 구조화된 코드에 보충 작업을 해주어야 합니다.



대부분의 브라우저들은 HTML5 doctype을 완전히 지원하지 않아

새로운 HTML5의 태그들을 인지하고 있지 않습니다.

좀더 쉽게 설명하자면 "브라우저는 header, footer, section 태그를 모른다" 라는 뜻이지요.

그러나 브라우저들은 자신이 모르는 태그가 나타났을때 이를 유연하게 처리하려고 합니다.

하지만 한가지 이슈는 바로 이러한 새로운 태그들에는 default style이 없다는 것입니다.

그리고 대부분의 브라우저는 보통 새로운 태그들을 inline tag로 취급합니다.

그래서 HTML5의 새로운 태그들로 구조를 잡기 위해서는

마치 우리가 div와 같은 블록엘리먼트를 사용하듯이 블록레벨 엘리먼트로 바꿔줄 필요가 있습니다.


header, nav, article, footer, address {display: block;}


이렇게 말이죠.


여러분이 사용하실 HTML5의 새로운 태그들에 대해서 display:block을 선언해주시면

마치 div 엘리먼트를 다루듯이 사용하실 수 있습니다.