본문 바로가기

Local Oriented/HTML CSS JS

이미지 위에 레이어를 올렸는데, 브라우저 폭이 변할때 같이 변하지 않거나 레이아웃에 가로줄이 생길때..


o 박스 안에 이미지와 절대좌표 박스가 들어간 형태에서 호환성 보기를 하면 레이아웃에 금이 가는 현상
   다른 웹브라우저나, IE 일반 모드에서는 정상인데.. 유독 IE 호환성 보기에서 레이아웃이 깨짐.
   <div style="position:relative" ...>
     <img src=".." />
     <div style="position:absolute" ...>
     ...
     </div>
   </div>

   이때는.. img 와 absolute 인 div 사이에 공간이 없게 해야 하는군요.
   <div style="position:relative" ...>
     <img src=".." /><div style="position:absolute" ...>
     ...
     </div>
   </div>

   그런데, 브라우저 폭이 변할때 absolute 로 잡은 영역이 같이 변하지 않아서 레이아웃이 깨진다면..
   아래와 같이 relative 영역에 이미지를 가져다 사용하는 것이 필요.
   <div style="position:relative; background:url('...'); width:..px; height:..px" ...>
     <div style="position:absolute" ...>
     ...
     </div>
   </div>