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

 
Previous Post [Excel/엑셀] 셀에 작은 따옴표 입력 / 수식 자체를 그대로 셀에 입력하는 법 - S...아랍어 폰트 / 아라비아어 글꼴 다운로드 하는 곳은? - Arabic Fonts웹페이지/문장 자동 번역 사이트, 무료 서비스 중에서 - Machine Translatio...[C언어] Cygwin(시그윈)에, gcc (공개 C컴파일러) 설치하기구글(Google) 검색 결과를 100개씩 한꺼번에 나오게 하는 법은? [QnA][C언어] 컴파일러 테스트용의 간단한 소스 코드: Hello World[윈도우QnA] 워드패드(WordPad)에서, 텍스트 파일(.txt)의 한글이 모두 깨집니...[아래아한글(HWP)] '조합형' 텍스트 파일을, '완성형' 문서로 변환하기 - 한국(KS...VMware 가상머신 안에서 인터넷 설정 - 네트워크 설정 - NAT[Perl/펄] 각 내장 함수의 사용법 보기 / 함수 레퍼런스(Reference) 보기 -...

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

Wednesday, August 09, 2006

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와 파이어폭스에서 여백의 크기가 다르게 나타난다든지 하는 문제가 있었습니다. 반면 테이블 태그는 그런 호환성의 문제는 없고 잘 작동했습니다. 다만 좀 복잡하다는 것이 불편한 점이었습니다.


☞ 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 주소를 리더기에 등록하시면 됩니다.
Categories
Previous Posts
Monthly Archives
Top