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

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

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

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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

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

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

댓글
2008.08.20 11:27:01 (*.96.31.61)
장길산
상세한 설명 해주셔서 고맙습니다.
수고하셨습니다.
번호
글쓴이
공지 HTML HTML 기초 다지기 4
오작교
225715   2008-06-17 2010-08-19 13:08
공지 HTML HTML과 CSS의 종합 정리 1
오작교
291793   2007-10-01 2010-08-19 12:45
공지 일반 스타일시트의 총정리
오작교
243476 14 2006-09-14 2010-08-19 12:45
243 HTML A 태그를 다른 것으로 바꾸어 보자
오작교
16696   2008-02-23 2008-02-23 12:25
일반적으로 링크 태그는 <a href=#>링크</a> 이런 방식을 주로 사용합니다. 그러나 뒤로 버튼을 누르면 # 이전으로 가는거지.. 페이지의 뒤로 가는 것은 아닙니다. 그래서 ▒ 링크시에는 <p style="cursor: pointer" onclick="window.location='https://www.tip...  
242 HTML input 태그의 기초
오작교
20465   2008-02-23 2008-02-23 12:19
가장 기본적으로 쓰이는 input 태그들입니다. 알고 있으면서도 가끔 헛갈릴 때 한번 되돌아 보세요. <input type="hidden" name="form1"> //숨김 타입 <input type="text" name="form1" size="20" maxlength="15" style="background-color:purple;border-color...  
241 CSS 하이퍼 링크 점선 없애기 2가지 팁
오작교
17104   2008-02-23 2008-02-23 12:00
1. 특정한 한부분에만 적용시키기 아래의 소스는 <BODY>와 </BODY> 사이에 들어가는 예제 입니다. <A HREF="링크될 경로" onfocus='this.blur()'><img src="이미지경로" border="0"><A> ※ 예제 설명 : 빨간색 부분만 수정해 주시면 됩니다. -----------------...  
240 HTML 테이블 배경이미지도 크기를 지정해보자
오작교
25759   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...  
239 Swish 스위시에서 토글 버튼으로 영상 제어하기 - 3(Script 삽입하기) 1
오작교
19208   2008-01-31 2010-01-12 08:20
버튼으로 스위시의 영상제어하기 swfWrite('https://data.park5611.pe.kr/Study/Swish/Swish/Button.swf',500,400,'','','') 스위시 미리보기 3. 제어 Script 삽입하기 1) Btnset의 스프라이트를 연다. 2) 먼저 "시보기" 버튼을 활성화한 후에, 우측 레이아웃...  
238 Swish 스위시에서 토글 버튼으로 영상 제어하기 - 2(제어창 만들기)
오작교
19826   2008-01-31 2014-03-17 20:28
버튼으로 스위시의 영상제어하기 swfWrite('https://data.park5611.pe.kr/Study/Swish/Swish/Button.swf',500,400,'','','') 스위시 미리보기 2. 제어창 만들기 1) 버튼으로 제어할 창(詩나 기타의 것)을 만든다. 이곳에서는 Shape을 50% 투명창을 만들고, 시...  
237 Swish 스위시에서 토글 버튼으로 영상 제어하기 - 1(버튼 만들기)
오작교
21074   2008-01-31 2014-03-17 20:30
버튼으로 스위시의 영상제어하기 swfWrite('https://data.park5611.pe.kr/Study/Swish/Swish/Button.swf',500,400,'','','') 스위시 미리보기 1. 버튼을 만든다. 1) 토글버튼으로 사용할 텍스트를 입력한다. 2) 텍스트 위에 마우스를 올리고 우측 버튼을 클릭...  
236 CSS div 태그의 위치속성에서 relative와 absolute 차이 1
오작교
18486   2008-01-09 2008-01-09 13:33
포지션에 대한 속성에서 absolute와 relative를 보면 absolute(절대적 위치) 브라우저를 기준으로 위치 속성을 사용 하며 parent 요소에 의해 하위 위치에 있다면 그 곳을 기준으로 합니다. 즉, 레이어 속성인 z-index를 쓸경우 top, left, right, bottom을 통...  
235 HTML 마우스를 링크위에 올리면 소리내기
오작교
28843   2008-01-08 2008-01-08 16:02
일단.. <head>와</head> 사이에 <bgsound src="#" id=msound loop=1 autostart="true"> 집어 넣습니다.. 그리고 <body>와 </body>의 원하는 곳에 아래처럼 링크합니다. <a href="주소" onMouseOver="document.all.msound.src='소리url'">링 크</a> <a href="주...  
234 Script 자동 다운로드 태그
오작교
30484   2008-01-08 2008-01-08 13:26
특정 웹페이지를 접속하면 자동으로 지정해준 파일을 다운로드 받게 해주는 팁입니다. 소스는 의외로 간단합니다. <script> document.location='https://주소/파일명'; </script> 위에 처럼 해주시면 다운로드 여부를 묻는 창이 뜨지 않고 바로 다운로드 되어...  
233 Script 아이프레임 투명하게 하기
오작교
32419   2008-01-07 2008-01-07 13:00
아이프레임 영역에 ALLOWTRANSPARENCY="true" 를 해주시면 됩니다. <iframe src="tran_iframe.html" ALLOWTRANSPARENCY="true"> 그리고 아이프레임의 html 의 body에는 <BODY STYLE="background-color:transparent"> 라고 해주면 됩니다.. 그리고는 제로보드 ...  
232 Script 팜업창에서 아무 곳이나 클릭해도 창 닫기
오작교
20056   2008-01-07 2008-01-07 12:52
팝업창 body 부분에 <body onclick="window.close()" style="cursor:hand"> 이렇게 onclick="window.close()" style="cursor:hand" 이 소스를 추가합니다.  
231 PHP PHP 메뉴얼
오작교
19806   2007-10-30 2007-10-30 17:24
php 메뉴얼 https://kldp.org/Translations/html/PHP-KLDP/PHP-KLDP.html 함수관계 https://kr.php.net/quickref.php  
230 일반 녹색과 잘 어울리는 색 2
오작교
44962   2007-10-25 2007-10-25 13:02
녹색과 청색은 어울리지 않습니다. (윈도우XP 바탕화면의 그것과 같은) 초원의 색과 하늘의 색이 어울릴 것 같지만 실제로는 썰렁하고 부조화한 느낌만을 줍니다. 또한 노란색과도 잘 어울리지 않습니다. 진한 녹색과 진한 빨강은 아주 촌스러운 느낌을 줍니다...  
229 일반 연두색과 잘 어울리는 색들
오작교
39944   2007-10-25 2007-10-25 12:50
연두색이란 노란색을 띤 밝은 녹색입니다. 연두색도 녹색의 일종이고, 녹색은 다른 색과 잘 어울리지 않는 색이기에, 연두와 어울리는 색도 그리 많지 않습니다. 연두색은 혼자서는 아름답게 보이지만, 다른 색상과 대비되어 역겨운 느낌을 주기 쉬운 색상입...  
228 HTML Div란 무엇일까?
오작교
28236   2007-10-25 2007-10-25 12:42
div는 무엇일까? 어떻게 사용해야 할까? HTML에서의 div는 Division Marker의 줄임말로서 영역을 구분짓거나 무리(구분)지어주는 엘리먼트이다. div는 div를 열고 닫은 앞뒤로 줄바꿈이 되는 블럭 레벨 항목 block level element이다. div의 앞 뒤에 있는 항목...  
227 CSS div 두 개 나란히 이어 붙이기 2
오작교
82180   2007-10-23 2007-10-23 17:35
아래와 같이 두 셀을 가로로 나열하기 위해 테이블로 아래와 같은 간단한 방법을 사용하실 수 있습니다. 안녕하세요 오작교의 홈입니다. <tr> <td width="200" bgcolor="#aaaaaa">안녕하세요</td> <td width="200" bgcolor="#cccccc">오작교의 홈입니다.</td> ...  
226 Script JavaScript Method
오작교
19060   2007-10-23 2007-10-23 17:18
자바스크립트 Event 항목 모음 Event 설 명 OnLoad 현 페이지가 로딩되었을 경우 OnUnload 현 페이지에서 다른 페이지로 이동할 경우 OnError 현 페이지를 읽는 중에 자바스크립트 에러가 날 경우 OnAbort 이미지를 읽는 도중 중지하였을 경우 OnMouseOver 마...  
225 Script textarea안에 미리 문구를 넣어두기
오작교
24555   2007-10-23 2007-10-23 17:16
이름을 입력하세요 textarea onfocus="this.value='';">이름을 입력하세요/textarea>  
224 Script input안에 미리 글자를 넣어놓기
오작교
23655   2007-10-23 2007-10-23 17:14
input type="text" onfocus="this.value='';" value="이름을 입력하세요">.  
XE Login