Wednesday, August 09, 2006

HTML-CSS] DIV 태그 안에 DIV 태그 중첩-중복 / 큰 박스 속에 작은 박스 삽입

div 태그 안에 div 태그가 여러번 중첩되어 들어갈 수 있습니다. 웹 표준에도 어긋나지 않습니다.

다음 예제에서, 바깥쪽 div는 주황색 상자로, 내부에 포함된 div는 노란색 상자로 나타납니다.

중첩된 div Tag 예제

위의 예제의 결과:

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 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

그런데 주황색 상자 한복판에 노란색 상자가 포함되도록 만들려면 div 로는 좀 부자연스러웠습니다. 그럴 경우에는 다음과 같이 테이블 태그를 사용하는 것이 무난하더군요.

테이블 태그로, 큰 상자에 작은 상자 포함시키기

결과:

Test	Test	Test
Test	Test2	Test
Test	Test	Test

div 태그라는 것이 간편하고 합리적인 태그이긴 하지만, 문제가 많았습니다. 특히 IE와 파이어폭스에서 여백의 크기가 다르게 나타난다든지 하는 문제가 있었습니다. 반면 테이블 태그는 그런 호환성의 문제는 없고 잘 작동했습니다. 다만 좀 복잡하다는 것이 불편한 점이었습니다.

☞ HTML/CSS/JavaScript

0 Comments: