mwultong Blog ... 프로그래밍 / 계산기

컴퓨터 엑셀 워드 포토샵 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Wednesday, August 09, 2006

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


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

다음 예제에서, 바깥쪽 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
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 로는 좀 부자연스러웠습니다. 그럴 경우에는 다음과 같이 테이블 태그를 사용하는 것이 무난하더군요.


테이블 태그로, 큰 상자에 작은 상자 포함시키기
<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>



결과:
TestTestTest
TestTest2Test
TestTestTest


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




tag: html
HTML | CSS | 자바스크립트 JavaScript

0 Comments:

Post a Comment

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Previous Posts
Monthly Archives
Top