태그를 이용하여 게시물을 올리다 보면 가끔씩 깜짝 놀라는 경우가 있습니다.
특히 테이블 태그를 사용하여 우리 홈과 같은 노프레임으로 되어 있는 홈에서는 애써 올린 게시물이 반쪽만 나온다던지 아니면 게시판의 목록이 옆으로 주욱 늘어나 버린 다던지 하는 경우를 만나서 우리를 당혹하게 만드는 일이 왕왕 있지요?

사실 알고보면 별 것도 아닌 것이 우리를 놀라게 합니다.
이 공간을 통하여 몇 번의 강좌를 올린 적도 있지만 아직 이해를 하지 못하시는 분이 계시는 것 같아서 이미지로 설명을 해볼려고 합니다.

이후로는 똑같은 일을 당하여 놀라는 일은 없겠지요?

이러한 영상시를 예로 들어서 설명을 해보겠습니다.
정상적으로 게시물이 올려진 장면입니다.


"소스보기"의 버튼을 클릭하여 소스를 확인해 볼까요?
소스보기는 7레벨 이상이 되어야만 가능하다는 것은 아시지요?


위 영상을 올린 태그들이 보입니다.
위 태그를 보니까 테이블을 두 번을 열었고, 그리고 두 번을 닫았군요.
<table~~><tr><td~>는 테이블을 여는 태그이고
</td><tr></table>는 테이블을 닫는 태그입니다.
간혹 다음의 게시판 등에서 <tbody>라는 태그를 사용하는 것이 있는 데, 이것은 불필요한 태그입니다.


이 태그들을 복사하기 위하여 "태그선택복사" 버튼을 클릭하세요.


태그들이 선택이 되면서 클립보드로 복사가 된 상태입니다.
"창닫기 버튼을 클릭하여 창을 닫습니다.


제가 즐겨 사용하는 EditPlus 프로그램에 붙여 넣기를 한 상태입니다.
(이 프로그램은 우리 홈의 자료실에 있습니다.)


"브라우져로 보기" 버튼을 클릭하니 정상대로 출력이 되는군요.


이것을 홈 게시판에서 "쓰기" 버튼을 누르고 "붙여넣기"를 했습니다.


자, 그럼 파란색으로 표시가 된 부분을 삭제를 해 볼까요?


이미지에서 말한 바와 같이 정상적인 태그에서 테이블을 닫는 태그 하나를 삭제를 해보겠습니다.


이크!! 이것도 우리를 깜짝 놀라게 하는 것 중의 하나이지요?
이것은 태그만을 이용하여 게시물을 작성한 경우게 생기는 것으로서
이럴 때는 게시물의 마지막에 점하나를 찍어 주시면 됩니다.


무언가 이상하지요? 그렇습니다. 게시물이 반쪽으로 줄어 버렸네요?


이러한 경우를 당하면 무담시 죄를 짓는 것 같이 가슴이 콩닥거리고
후다닥 도망을 가고 싶은 생각이 들곤 합니다.
테이블을 두 번을 열었는데 한 번만 닫은 경우에 발생을 하는 현상입니다.
그럼 대처는? 당연하게 테이블을 정상적으로 닫아 주면 됩니다. 쉽지요?


그럼, 이제는 반대로 테이블을 한 번 더 닫을 경우에는
어떠한 일이 벌어지는지 확인을 해 볼까요?


무엇이 잘못된 것인지 확인을 하셨나요?
이것을 발견했다면 님께서는 매우 민감한 "눈"을 가지신 분입니다.


예. 게시판 목록이 페이지 전체로 늘어나 버렸지요?


자 그럼 결론을 내려 봅니다.
테이블 태그를 사용하여 게시물을 올릴 때에는 테이블을 여는 만큼만 닫아 주어야 한다.
따라서 게시판의 목록이 페이지 전체로 늘어날 경우에는 테이블을 여는 것보다
더 닫았다는 증거이고(두번 또는 그보다 훨씬 많은 경우에도 같은 증상이 생깁니다.),
게시물이 반쪽으로 될 경우에는 테이블을 닫지 않았다는 반증입니다.

간혹 이러한 질문을 하시는 분들이 계십니다.
"다음(daum)같은 곳에서는 아무 이상이 없이 잘 올라가는데 왜 이 홈에서만 이러한 현상이 나는 것일까요?" 하는 질문 말입니다.
그것은 위에서 말씀을 드리는 바와 같이 우리 홈페이지는 노프레임으로 형성이 된
공간이기 때문에 그렇습니다.
노프레임에 관하여는 이미 많은 설명을 하였기 때문에 이곳에서는 더 이상 설명을 드리지 않겠습니다.

이제는 이것으로 인하여 당황을 하는 경우는 없겠지요?
여기까지 오시느라고 수고가 많으셨습니다.

댓글
2008.08.20 11:27:01 (*.96.31.61)
장길산
상세한 설명 해주셔서 고맙습니다.
수고하셨습니다.
번호
글쓴이
공지 HTML HTML 기초 다지기 4
오작교
216285   2008-06-17 2010-08-19 13:08
공지 HTML HTML과 CSS의 종합 정리 1
오작교
253558   2007-10-01 2010-08-19 12:45
공지 일반 스타일시트의 총정리
오작교
231786 14 2006-09-14 2010-08-19 12:45
263 Script input안에 미리 글자를 넣어놓기
오작교
23025   2007-10-23 2007-10-23 17:14
input type="text" onfocus="this.value='';" value="이름을 입력하세요">.  
262 HTML 테이블 배경이미지도 크기를 지정해보자
오작교
22614   2008-02-23 2008-02-23 11:42
DIV style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; MARGIN: 10px 0px; PADDING-TOP: 5px; BACKGROUND-COLOR: #fef4e7">table border=0 cellspacing=0 cellpadding=0 style='width:300px; height:100px; filter:progid:DXImageTransform...  
261 HTML Fieldset이용하기
오작교
22490   2009-04-17 2009-04-17 01:06
fieldset를 이용하면 테두리를 여러모로 유용하게 이용할 수 있습니다. 겉보기에는 테이블과 별 차이가 없어 보이지만 약간 다릅니다. 한 칸으로 구성된 박스를 만들 때 테이블을 사용하면 tr 이나 td 도 따로 넣어야 하는 수고가 따르지만, fieldset 은 그런...  
260 CSS CSS로 바꾸어 주는 HTML 소스
오작교
22430   2007-09-17 2007-09-17 23:35
XHTML및 HTML 4.01부터 사용 불가능한 태그 : center, s, strike, u 등이 있습니다. center의 대책!.. CSS로 바꾸어 씁니다. text-align: center; s의 대책!..[strike 포함] CSS로 바꾸어 씁니다. text-decoration: line-through; u의 대책!.. CSS로 바꾸어 씁...  
259 HTML fieldset을 이용한 예쁜 공지창을 만들기
오작교
22024 48 2006-09-14 2006-09-14 11:14
예제 오작교 Field 간단한 공지사항으로 사용 기본적인 태그 <fieldset><legend align="center">제목</legend>내용</fieldset> 색상 변경 style="border:1 solid 테두리 색상" 또는 style="border:1 solid; border-top-color: 위쪽색상;border-right-color: ...  
258 일반 배경음악 제어하기
오작교
21898 102 2005-11-03 2005-11-03 10:14
▶ 음악연주 ■ 음악멈춤 embed src="https://data.park5611.pe.kr/music/1001/NottiSenzaAmore.wma" hidden=true autostart=false loop=1> a href="javascript:document.embeds[0].play();">▶ 음악연주/a> a href="javascript:document.embeds[0].stop();">■ ...  
257 HTML html4와 5의 차이
오작교
21649   2015-09-13 2015-09-13 21:30
html4와 html5차이 참조 사이트: https://www.webphp.co.kr/bbs/board.php?bo_table=data_01&wr_id=6 *{font-size:12px} .tableList{border-top:solid 1px rgb(19,194,193);border-left:solid 1px rgb(209,209,209);border-right:none;border-bottom:none...  
256 CSS 단어와 글자 여백을 조정하는 스타일
오작교
21582   2009-07-07 2009-07-07 16:40
<style type="text/css"> <!-- h1 { word-spacing:5px; } h2 { letter-spacing:7px; } --> </style> <body> 오작교의 스타일 시트 <h1>word-spacing 속성은 단어사이의 여백 조정</h1> <h2>letter-spacing 속성은 글자사이의 여백 조정 </h2> </body>  
255 HTML textarea에 글자 넣기 및 응용
오작교
21493   2009-04-30 2009-04-30 10:02
내용을 적어주세요.^^ 내용을 적어주세요.^^ textarea cols=40 rows=5 onClick="this.value=''">내용을 적어주세요.^^/textarea> textarea cols=40 rows=5 onMouseOver="this.value='마우스를 올리면 이렇게.....'" onMouseOut="this.value='마우스가 내려가...  
254 Script 아이프레임 투명하게 하기
오작교
21319   2008-01-07 2008-01-07 13:00
아이프레임 영역에 ALLOWTRANSPARENCY="true" 를 해주시면 됩니다. <iframe src="tran_iframe.html" ALLOWTRANSPARENCY="true"> 그리고 아이프레임의 html 의 body에는 <BODY STYLE="background-color:transparent"> 라고 해주면 됩니다.. 그리고는 제로보드 ...  
253 Script 선택된 테이블에 색상 입히기
오작교
21126   2007-10-23 2007-10-23 17:00
. table width=100 height=30 border=1 bordercolor=000000> tr> td onmouseover="this.style.backgroundColor='ff0000'" onmouseout="this.style.backgroundColor=''"> /td>/tr>/table>  
252 Script iframe의 가로 세로 조정
오작교
21081   2007-10-04 2007-10-04 11:45
아이프레임을 불러올시 가로 또는 세로 길이가 변경되었을 시 정해진 크기 외의 부분이 짤릴수 있습니다. 이를 해결할 방법으로 불러와 지는 페이지에 <head> 와 </head> 사이에 <script> function window::onload(){ self.resizeTo(document.body.scrollWidth...  
251 Script 보이기 / 감추기 스크립트
오작교
20799   2007-10-23 2007-10-23 16:56
보이기/감추기 function menu(){ if (ch.style.display == 'none') { ch.style.display = ''; } else { ch.style.display = 'none'; } } // 출력할 내용이 들어갈 부분 // input onclick='menu()' type=checkbox name=chk value='yes' onfocus='this.blur()'>...  
250 CSS html문서에 그라데이션 적용하기
오작교
20507   2009-04-30 2009-04-30 09:41
스타일시트의 필터기능만으로 html 문서 내에 그라데이션 효과를 넣을 수 있습니다. 지금 보고 계신 테이블에는 수직그라데이션을 적용했습니다. 이렇게 가로방향으로 수평그라데이션을 적용할 수도 있습니다. <body>태그 안에 삽입할 경우, 문서 전체배경의 ...  
249 일반 스위시 영상에서 글 스크롤 시키기
오작교
20463 94 2005-10-10 2005-10-10 16:18
스위시 프로그램으로 영상시를 만드는 것 중에서 클이 스크롤이 되는 효과를 알아 보도록 하겠습니다. 먼저 예제을 한 번 보겠습니다. 클릭 예제보기 클릭 예제소스 받기 제가 가지고 있는 스위시 프로그램이 2004. 08. 23.버젼이기 때문에 그보다 더 낮은 버...  
248 HTML 테이블 프레임 속성
오작교
20454   2015-08-30 2015-08-30 12:19
오늘은 테이블에 프레임속성을 주는 그런 소스가 되겠습니다. 테이블 속성으로는 경계를 정하는 border 속성이 있을수 있겠고 또 정렬을 주는 align도 있겠습니다. 오늘은 그 중에 frame속성입니다. 이것은 예를들어 <table frame="above">를 주면 그 테이블은...  
247 일반 Fieldset을 이용한 이쁜 공지창을 만들자
오작교
20416 12 2006-05-06 2006-05-06 19:52
예제 오작교의 홈 간단한 공지사항으로 사용 기본적인 태그 <fieldset><legend align="center">제목</legend>내용</fieldset> 색상 변경 style="border:1 solid 테두리 색상" 또는 style="border:1 solid; border-top-color: 위쪽색상;border-right-color: 오...  
246 Script 깔끔한 슬라이드 메뉴 만들기
오작교
20406 14 2006-04-17 2006-04-17 15:25
<style> <!-- 주석중 "무시..."부분은 변경 불가 소스거나 수정시 (예:크기지정) 아무런 변화가 없을시 그리고 주석 붙인이가 모를때.. ^^;; //--> <!-- .menu { <!-- ## 메인 메뉴 ## 무시.. 배경색 메뉴 테두리 색 가로 크기 글자 크기 글자체 글자 속성 (기...  
245 일반 스위시나 플래시위에 글 올리기
오작교
20308 77 2005-10-18 2005-10-18 23:17
오작교의 홈 플래시 위에는 텍스트나 이미지를 올리는 것은 불가능하다고 알고 있는데.. 가상화면인 레이어를 응용하면 가능합니다. 소스에서 플래쉬의 주소를 사용하고자 하는 플래쉬 주소로 바꾸어주고, '레이어의 위치 선정하기'에서 글이 들어갈 넓이(wid...  
244 일반 만화로 배우는 포토샵 3
오작교
20254 93 2004-11-24 2009-11-19 18:17
 
XE Login