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

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

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

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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

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

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

댓글
2008.08.20 11:27:01 (*.96.31.61)
장길산
상세한 설명 해주셔서 고맙습니다.
수고하셨습니다.
번호
글쓴이
공지 HTML HTML 기초 다지기 4
오작교
221661   2008-06-17 2010-08-19 13:08
공지 HTML HTML과 CSS의 종합 정리 1
오작교
281271   2007-10-01 2010-08-19 12:45
공지 일반 스타일시트의 총정리
오작교
238681 14 2006-09-14 2010-08-19 12:45
243 HTML swf파일을 투명하게 올리기
오작교
26490 24 2006-09-20 2006-09-20 15:16
태그연습장에 함해보세요 ~~~ html 소스의 swf 파일을 삽입한 부분에 <param name="wmode" value="transparent">를 넣어주면 됩니다. 예> 드림위버로 플래시를 삽입했을때 아래와같은 소스가 들어감을 알수있습니다. 제홈페이지 메뉴에 적용된 소스인데요 ~ <b...  
242 HTML 폰트의 색상입니다
오작교
18066 24 2006-09-14 2006-09-14 10:51
■ 000000 black 블랙 ■ 2f4f4f darkslategray 다크슬레이트그레이 ■ 708090 slategray 슬레이트그레이 ■ 778899 lightslategray 라이트슬레이트그레이 ■ 696969 dimgray 딤그레이 ■ 808080 gray 그레이 ■ a9a9a9 darkgray 다크그레이 ■ c0c0c0 silver 실버 ■ d...  
241 CSS Marquee를 이용한 타자치는 효과를
오작교
14092 24 2006-05-06 2006-05-06 20:28
단순한 태그로도 타자치는 효과를... 어때여?*^^* 스크롤되는 방향을 오른쪽 왼쪽 정해주면 단순한 태그로도 타자치는 효과를 낼 수 있어요. 마퀴소스앞에 요것만 써 주면 되여. marquee direction=right>marquee direction=left> 단순한 태그로도 타자치는 ...  
240 CSS 이미지에 효과를 주어보자
오작교
13967 24 2006-04-17 2006-04-17 15:35
img src="https://loveking.co.kr/img/rose1.gif" style="Filter: Alpha (Opacity=20, Style=0)"> img src="https://loveking.co.kr/img/rose1.gif" style="Filter: Alpha (Opacity=80, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=...  
239 CSS 글자정렬
오작교
14716 24 2006-04-17 2006-04-17 14:11
웹상에서 문서를 작성하다 보면 좌측 뿐만 아니라 우측에도 반듯하게 정렬이 되었으면 할 때가 있습니다. 그럴 때 사용할 수 있는 간단한 CSS입니다. <div style='text-align:justify'> 글내용 </div>  
238 HTML <<!>td>를 간단하게 하는 <<!>col> 태그
오작교
16690 23 2006-09-14 2006-09-14 13:43
테이블을 많이 사용하다 보면 보통 한 테이블 안에 <td>태그가 보통 이십개를 넘어가는 경우가 있습니다. 이러할 경우에 각 <td>에 width, align, valign, style, class, heigt 등을 각각 넣어주는데 만일 테이블을 고쳐야 할 경우에는 각각의 <td>태그안에 들...  
237 HTML Iframe없이 한문서에 박스를 만들어 내는 태그
오작교
19345 23 2006-09-14 2006-09-14 10:53
iframe없이 한 문서내에 박스를 만들어내는 태그입니다. #box1 {width: 190; height: 100; overflow: auto; padding:5px; border:1 solid #e9e9e9;} #box2 {width: 190; height: 100; overflow: auto; padding:5px; border:1 solid #000000;} 나의 밤기도는 길...  
236 일반 Text Area
오작교
17549 23 2006-05-06 2006-05-06 20:20
텍스트 에어리어(text area) 오른쪽 정렬입니다 글자를 쳐보세요 투명한 스크롤바 소스 + 정렬하기 + 선종류바꾸기 + 글자크기바꾸기를 사용 text area with dotted line 선종류바꾸기 (점선) + 가운데 정렬 + 글자모양바꾸기 + 스크롤바 색 바꾸기를 사용 선...  
235 CSS 여러방법의 창닫기
오작교
20992 23 2006-04-16 2006-04-16 21:41
<HTML><HEAD> <META http-equiv=Content-Type content="text/html; charset=ks_c_5601-1987"> <STYLE>BODY { FONT-SIZE: 12px } TD { FONT-SIZE: 12px } </STYLE> <META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD> <BODY> <TABLE cellSpacing=1 cel...  
234 HTML 색상있는 셀렉트 홈
오작교
77628 22 2006-09-14 2006-09-14 11:35
select color black darkslategray dimgray gray slategray lightslategray darkgray silver lightgrey gainsboro white seashell snow ghostwhite floralwhite whitesmoke aliceblue azure oldlace mintcream papayawhip peachpuff linen palegoldenrod mist...  
233 Script 움직임이 부드러운 슬라이딩 TIP 버튼
오작교
20712 22 2006-05-06 2006-05-06 20:33
문서가 아주 길 경우, 탑버튼을 넣어주어 한번에 위로 올려주는 버튼 만드는 방법 입니다. 우선 아래 소스를 복사하여 js파일을 만듭니다. function back_top() { x = document.body.scrollLeft; y = document.body.scrollTop; step = 2; while ((x != 0) || (...  
232 CSS 가로 스크롤바만 없애는 방법
오작교
14703 22 2006-05-06 2006-05-06 20:12
body 태그 안에 style="overflow-x:hidden" 을 넣어보세요. <body style="overflow-x:hidden">  
231 CSS 칼라에 관한 스타일시트-3
오작교
18040 22 2006-05-06 2006-05-06 10:20
☞ background-position 배경 이미지의 위치를 조절해주는 속성입니다. 속성값은 키워드식 , 픽셀방식 , 퍼센트(%) 방식이 있습니다. 키워드 방식 body { background-position: top left; } 픽셀방식 body { background-position: 40px 50px } 퍼센트 방식 body...  
230 CSS 레이어를 원하는 곳에 고정하기
오작교
13520 22 2006-04-16 2006-04-16 21:14
다음을 헤드나 바디에 넣으세요. <script language="JavaScript"> <!-- self.onError=null; currentX = currentY = 0; whichIt = null; lastScrollX = 0; lastScrollY = 0; action = window.setInterval("heartBeat()",1); function heartBeat() { // combowid...  
229 CSS 움직임이 부드러운 슬라이딩 탑버튼
오작교
16784 22 2006-04-16 2006-04-16 21:10
문서가 아주 길 경우, 탑버튼을 넣어주어 한번에 위로 올려주는 버튼 만드는 방법 입니다. 우선 아래 소스를 복사하여 js파일을 만듭니다. function back_top() { x = document.body.scrollLeft; y = document.body.scrollTop; step = 2; while ((x != 0) || (...  
228 CSS 배경그림 고정하기
오작교
14718 21 2006-04-17 2006-04-17 15:04
스크롤바를 내려도 배경그림이 움직이지 않고 글씨만 올라갑니다. <body>안에 bgproperties="fixed" 만 추가하면 배경 이미지가 고정됩니다. <body bgproperties="fixed"> 간단하죠? 스타일시트로 배경그림 고정시키기 에서는 이것보다 다양한 방법으로 배경그...  
227 Script 마우스가 올라오면 랜덤으로 색갈이 변하는 소스
오작교
16981 21 2006-04-16 2006-04-16 21:40
<p align="center">표위에 마우스를!!</p> <table align="center" border="1" width="200" height="200" cellpadding="0" cellspacing="0"> <tr> <td onmousemove="gogo(this)"> <p> </p> </td> <td onmousemove="gogo(this)"> <p> </p> </td> <td onmousemove...  
226 PHP Subject 초보자를 위한 PHP 강좌 14부 - 반복 제어문(2)
오작교
17091 20 2007-03-14 2007-03-14 22:23
안녕하세요~~ 요즘 강좌글이 너무 뜸하게 올라오죠. 죄송...^^ 오늘은 앞 강좌에 이어서 반복 제어문에서 사용되는 "break", "continue" 구문에 대해서 알아보겠습니다. break 구문은 for, while 등의 반복 제어문과 같이 사용되는 것으로 반복문이 사용된 블...  
225 HTML 글자에 배경넘기 1
오작교
22523 20 2006-11-21 2006-11-21 17:32
오작교의 홈을 사랑하시는 여러분 !! font style="BACKGROUND-COLOR: red; COLOR: white">오작교의 홈을 사랑하시는 여러분 !!/font> 오작교도 여러분을 사랑합니다!! font style="font-size:14pt;BACKGROUND-COLOR: 00ffff; COLOR: 000000">오작교도 여러분을...  
224 Script 시간을 지연하여 음악을 플레이시키는 스크립트
오작교
16294 20 2006-05-21 2010-11-15 11:41
<html> <head> <title>재생 스크립트</title> <script> function delay_play() { document.player1.Play(); } </script> </head> <body onload="setTimeout('delay_play()',15000)"> <embed src="https://myhome.naver.com/namhk72/pop/adrine.wma autostart=f...  
XE Login