블럭 단위로 CSS 를 사용하여 좌표에 대해서 조정이 필요할때,
이를테면 화면에서 B 블럭이 A 블럭 안에서 일정 거리를 두고 표시되어야 할때..
최근의 HTML 태그는 div 를 주로 사용하니까 문제는 없고요.
table 태그가 들어간 이전 HTML 태그들과 섞여 있는 화면이라면..
table 의 td 안에 div 로 B 블럭을 구현하려고 할 거에요.
이게 IE 에서는 잘 맞아 들어가는데,
IE 이외의 웹브라우저에서는 소용없는 짓이죠. ㅠ.ㅠ
그래서 이럴때는.. table 태그 안에 div 로 A 블럭을 만들고 그 안에 B 블럭을 만들면서..
A 블럭에는 position:relative 를, B 블럭에는 position:abolute 를 해 주어야 하는 거죠.
<table>
<tr>
<td style="position:relative">
<div style="position:absolute; left:100px; top:100px">
..
</div>
</td>
</tr>
</table>
상기와 같은 코드로는 IE 에서는 제대로 표현이 되지만 IE 이외의 웹브라우저에서는 제대로 안 된다는 거에요.
이때는 아래와 같이 코드를 심어 주어야 한다는 겁니다.
<table>
<tr>
<td>
<div style="position:relative">
<div style="position:absolute; left:100px; top:100px">
..
</div>
</div>
</td>
</tr>
</table>
'Local Oriented > HTML CSS JS' 카테고리의 다른 글
모바일 기기에 특화된 메타 태그 (2) | 2011.11.07 |
---|---|
스핀 spin 자바스크립트 (jQuery 나 prototype 가능) (0) | 2011.09.29 |
모바일 기기를 고려한다면, onclick 에서도 javascript 반드시 기술 (1) | 2011.08.30 |
CSS, 외부 포스트 모음 (0) | 2011.08.26 |
CSS 레이아웃 블럭을 가운데 정렬하는 방법 (margin:0 auto) (2) | 2011.08.25 |