div 스타일 정의시, IE 와 Chrome 모두 호환되게 하려면, 외부 style 로 정의

div 스타일 정의시, IE 와 Chrome 모두 호환되게 하려면, 외부 style 로 정의해야 한다.

지난번 작업한 소스를 수정하던중 IE 와 Chrome(크롬) 에서 각기 다르게 동작하는 상황이 벌어져 디자인이 깨지는 문제가 발생했다.

IE 의 경우에는 div 태그에 직접 style 로 정의해도 아무런 문제가 없었지만, Chrome 의 경우에는 스타일이 적용되지 않는 문제 발생.

소스를 직접 보며 상황에 대해 설명한다.

원래의 소스는 대략 이러했다.

<div id="div1" style="display:none;">

  <div id="div2" style="position:absolute;left:10px;top:10pt;">내용</div>

</div>

이것을 버튼을 누르면 div1 이 보이게 하면서, 지정된 위치에서 div2 가 보이도록 동작하는 것이었다.

이 소스는 IE 와 크롬 모두에서 똑같이 동작했다.

그런데, 사정상 div1 아이디를 가진 div 를 없애고, 하나로 통합했는데..

<div id="div2" style="display:none;position:absolute;left:10px;top:10px;">내용</div>

위와 같은 형식으로 통합하니, 버튼을 눌러서 div 가 나타나도록 했을때 지정된 위치를 가지지 못하고 페이지의 중간에 공간을 차지하면서 전체 디자인이 틀어지는 문제 발생.

IE 에서는 문제가 없었지만, 크롬에서는 문제가 발생한 것이다.

그래서, 아래와 같이 div 의 스타일을 지정하는 태그를 외부에 별도로 지정.

<style>

div.divstyle{

  position:absolute;left:10px;top:10px;

}

</style>

<div class="divstyle" id="div2" style="display:none;">내용</div>

위와같이 태그를 구성하니, IE 와 크롬에서 모두 똑같이 동작했다.