Wednesday, August 09, 2006
HTML-CSS] DIV 태그 안에 DIV 태그 중첩-중복 / 큰 박스 속에 작은 박스 삽입
div 태그 안에 div 태그가 여러번 중첩되어 들어갈 수 있습니다. 웹 표준에도 어긋나지 않습니다.
다음 예제에서, 바깥쪽 div는 주황색 상자로, 내부에 포함된 div는 노란색 상자로 나타납니다.
중첩된 div Tag 예제
위의 예제의 결과:
그런데 주황색 상자 한복판에 노란색 상자가 포함되도록 만들려면 div 로는 좀 부자연스러웠습니다. 그럴 경우에는 다음과 같이 테이블 태그를 사용하는 것이 무난하더군요.
테이블 태그로, 큰 상자에 작은 상자 포함시키기
결과:
div 태그라는 것이 간편하고 합리적인 태그이긴 하지만, 문제가 많았습니다. 특히 IE와 파이어폭스에서 여백의 크기가 다르게 나타난다든지 하는 문제가 있었습니다. 반면 테이블 태그는 그런 호환성의 문제는 없고 잘 작동했습니다. 다만 좀 복잡하다는 것이 불편한 점이었습니다.
다음 예제에서, 바깥쪽 div는 주황색 상자로, 내부에 포함된 div는 노란색 상자로 나타납니다.
중첩된 div Tag 예제
<div style="background-color:orange;">
Test Test Test Test Test Test Test<br />
Test Test Test Test Test Test Test<br />
Test Test Test Test Test Test Test<br />
Test Test Test Test Test Test Test<br />
Test Test Test Test Test Test Test<br />
<div style="background-color:yellow;">
Test2 Test2 Test2 Test2<br />
Test2 Test2 Test2 Test2<br />
</div>
Test Test Test Test Test Test Test<br />
Test Test Test Test Test Test Test<br />
Test Test Test Test Test Test Test<br />
Test Test Test Test Test Test Test<br />
Test Test Test Test Test Test Test<br />
</div>
Test Test Test Test Test Test Test<br />
Test Test Test Test Test Test Test<br />
Test Test Test Test Test Test Test<br />
Test Test Test Test Test Test Test<br />
Test Test Test Test Test Test Test<br />
<div style="background-color:yellow;">
Test2 Test2 Test2 Test2<br />
Test2 Test2 Test2 Test2<br />
</div>
Test Test Test Test Test Test Test<br />
Test Test Test Test Test Test Test<br />
Test Test Test Test Test Test Test<br />
Test Test Test Test Test Test Test<br />
Test Test Test Test Test Test Test<br />
</div>
위의 예제의 결과:
Test Test Test Test Test Test Test
Test Test Test Test Test Test Test
Test Test Test Test Test Test Test
Test Test Test Test Test Test Test
Test Test Test Test Test Test Test
Test Test Test Test Test Test Test
Test Test Test Test Test Test Test
Test Test Test Test Test Test Test
Test Test Test Test Test Test Test
Test Test Test Test Test Test Test
Test Test Test Test Test Test Test
Test Test Test Test Test Test Test
Test Test Test Test Test Test Test
Test2 Test2 Test2 Test2
Test2 Test2 Test2 Test2
Test Test Test Test Test Test TestTest2 Test2 Test2 Test2
Test Test Test Test Test Test Test
Test Test Test Test Test Test Test
Test Test Test Test Test Test Test
Test Test Test Test Test Test Test
그런데 주황색 상자 한복판에 노란색 상자가 포함되도록 만들려면 div 로는 좀 부자연스러웠습니다. 그럴 경우에는 다음과 같이 테이블 태그를 사용하는 것이 무난하더군요.
테이블 태그로, 큰 상자에 작은 상자 포함시키기
<table style="background-color:orange;">
<tr><td>Test</td><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td style="background-color:yellow;">Test2</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td><td>Test</td></tr>
</table>
<tr><td>Test</td><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td style="background-color:yellow;">Test2</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td><td>Test</td></tr>
</table>
결과:
| Test | Test | Test |
| Test | Test2 | Test |
| Test | Test | Test |
div 태그라는 것이 간편하고 합리적인 태그이긴 하지만, 문제가 많았습니다. 특히 IE와 파이어폭스에서 여백의 크기가 다르게 나타난다든지 하는 문제가 있었습니다. 반면 테이블 태그는 그런 호환성의 문제는 없고 잘 작동했습니다. 다만 좀 복잡하다는 것이 불편한 점이었습니다.
tag: html
HTML | CSS | 자바스크립트 JavaScript
<< Home