Internet Explorer에서 ```html

요소의 배경색이 렌더링되지 않는 문제와 해결 방법

Internet Explorer에서 <main> 요소가 정상적으로 표시되지 않는 이유

Internet Explorer 11(IE11)은 HTML5 시맨틱 요소 중 하나인 <main> 태그를 기본적으로 지원하지 않습니다. 그렇기 때문에 해당 요소에 배경색이나 여러 가지 스타일을 지정해도 브라우저가 이를 정상적인 요소로 인식하지 못해 화면에 아무것도 렌더링되지 않는 문제가 발생합니다.

JavaScript로 <main> 요소 지원 추가하기

이 문제를 해결하는 첫 번째 단계는 JavaScript를 사용해 브라우저가 해당 요소를 인식하도록 만드는 것입니다. Modernizr 라이브러리를 사용하거나, 아래의 간단한 코드 한 줄을 문서에 추가하면 됩니다.

document.createElement('main');

이 코드는 IE에게 'main'이라는 이름의 요소가 존재한다는 사실을 알려주는 역할을 합니다. 이는 HTML5 Shiv라고 불리는 대표적인 하위 호환성 확보 기법으로, <header>, <section>, <article> 같은 다른 HTML5 시맨틱 요소에도 동일하게 적용할 수 있습니다.

CSS로 블록 레벨 요소 선언하기

다만, 위의 JavaScript 코드만 추가한다고 해서 모든 작업이 끝나는 것은 아닙니다. IE는 인식하지 못하는 요소를 기본적으로 인라인(inline) 요소로 취급하기 때문에, 너비나 높이, 배경색 등의 스타일이 의도한 대로 적용되지 않을 수 있습니다.

따라서 마지막으로 아래와 같이 CSS에서 <main> 요소를 블록 레벨(block-level) 요소로 명시적으로 선언해 주어야 합니다.

main {
    display: block;
}

정리

Internet Explorer에서 <main> 요소의 배경색이 렌더링되지 않는 문제는 다음 두 단계로 해결할 수 있습니다.

• 1단계: document.createElement('main'); 코드를 추가하여 요소를 인식시킵니다. (또는 Modernizr 사용)
• 2단계: CSS에서 main { display: block; }을 선언하여 블록 레벨 요소로 동작하도록 합니다.

이 두 가지 처리를 함께 적용하면 구형 Internet Explorer 환경에서도 <main> 요소와 그 스타일이 정상적으로 표시됩니다.