Safari에서 HTML5

요소가 정상적으로 인식되도록 하는 방법

Safari에서 <main> 요소를 인식시키는 방법

HTML5에서 새롭게 도입된 <main> 요소는 구버전 Safari에서 기본적으로 인식되지 않는 문제가 있습니다. 이를 해결하려면 CSS에서 해당 요소의 스타일을 직접 지정해 주어야 합니다.

main {
    display: block;
    width: 800px;
    height: 800px;
    background-color: #0C0;
}

위 코드 전체에서 실제로 핵심이 되는 부분은 바로 다음 한 줄입니다.

main {
    display: block;
}

왜 display: block이 필요한가?

구버전 브라우저는 HTML5의 새로운 시맨틱 요소(<main>, <article>, <section> 등)를 미리 정의된 태그로 인식하지 못합니다. 이 경우 브라우저는 알 수 없는 요소를 기본적으로 인라인(inline) 요소처럼 취급하기 때문에, 너비나 높이, 배경색 등의 스타일이 의도한 대로 적용되지 않습니다.

따라서 display: block;을 명시적으로 선언해 주면, Safari를 포함한 모든 브라우저에서 <main> 요소가 블록 레벨 요소로 정상적으로 렌더링되며, 나머지 스타일 속성들도 올바르게 적용됩니다.