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

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

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

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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

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

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

댓글
2008.08.20 11:27:01 (*.96.31.61)
장길산
상세한 설명 해주셔서 고맙습니다.
수고하셨습니다.
번호
글쓴이
공지 HTML HTML 기초 다지기 4
오작교
225765   2008-06-17 2010-08-19 13:08
공지 HTML HTML과 CSS의 종합 정리 1
오작교
291844   2007-10-01 2010-08-19 12:45
공지 일반 스타일시트의 총정리
오작교
243527 14 2006-09-14 2010-08-19 12:45
242 CSS padding, margin, font, bold file
오작교
54859   2010-03-23 2010-03-23 08:22
 
241 Script 클릭하면 복사되는 소스
오작교
40166   2010-04-10 2013-11-13 10:09
<A HREF=" OnClick="window.clipboardData.setData('Text', 'https://park5611.pe.kr'); window.alert('주소가 클립보드로 복사되었습니다.'); return false;">주소 입력</A>  
240 CSS 포토샵 태그 - 1 2
오작교
28178   2010-05-25 2022-01-03 11:15
 
239 CSS 포토샵 태그 - 2
오작교
29737   2010-05-25 2010-05-25 22:18
 
238 CSS 이미지 맵 태그 -1
오작교
32338   2010-05-25 2010-08-19 13:22
 
237 CSS 이미지 맵 태그 -2
오작교
33490   2010-05-25 2010-05-25 23:27
 
236 CSS 이미지 맵 태그 -3
오작교
35136   2010-05-25 2010-05-25 23:30
 
235 HTML iframe의 속성
오작교
40666   2010-05-25 2010-05-25 23:36
기본 형식 <iframe src="주소"></iframe> 뒤에 꼭 </iframe>으로 아이프레임의 끝을 정해주어야 합니다. 속성(option) 설명 src="주소" iframe에서 표시할 경로를 지정해 줍니다. "https://..." name="down" iframe의 이름을 지정 합니다. 이름을 Yanni 로 했...  
234 CSS 간단히 링크 점선 없애는 방법 1
오작교
33181   2011-01-24 2011-01-24 10:28
보통 링크의 점선을 없애기위해 자바스크립트를 이용하거나 onfocus=this.blur(); 이런식으로 처리를 해왔습니다. 그러나 css를 이용하면 간단하게 처리를 할 수 있습니다. css 한 줄로 텍스트링크, 이미지링크 모두 처리가 가능합니다. a { selector-dummy : ...  
233 CSS 간단히 탭 메뉴 만들기
오작교
34286   2011-01-24 2011-01-24 10:32
<style type="text/css"> body { margin: 0px; padding: 0; font: 12px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; background: #FFFFFF; text-align: center; } ul{ margin: 0; padding: 0; list-style: none; } #treenav { margin: 10px; tex...  
232 Script a href="#" 사용을 할 때 유의사항
오작교
34485   2011-01-24 2011-01-24 10:34
가끔 <a href="#" OnClick="Javascript:window.open('https://,,, 이하 생략" 를 부득이 사용할때가 있습니다. 위와 같이 사용하게 되면 클릭시에 "새로고침"이 되서 페이지 전체가 상단(top)으로 이동을 하게 됩니다. 그걸 방지하기위해서 <a href="#" 대신...  
231 HTML 셀렉트 박스에서의 정열
오작교
33885   2011-01-24 2011-01-24 10:39
우측정열 내용 내용 <SELECT style="direction:rtl;"> <OPTION>내용</OPTION> <OPTION>내용</OPTION> </SELECT> 좌측정열 내용 내용 <SELECT style="direction:ltl;"> <OPTION>내용</OPTION> <OPTION>내용</OPTION> </SELECT>  
230 CSS 간단한 폰트 속성 지정
오작교
32142   2011-01-24 2011-01-24 13:02
보통 css 에서 폰트 속성을 지정할 때 아래와 같이 하지요... {font-family:굴림; font-size:9pt; color:black} 이것을 좀 더 간단하게 지정할 수 있습니다. {font:9pt "굴림"; color:black}<!--"< </  
229 HTML iframe 태그에 관하여....
오작교
33503   2011-01-25 2011-01-25 10:27
아이프레임(iframe) 개인적으로 자주 사용하는(;) 태그입니다.. 별로 잘 사용 되지 않는 태그로 알고있지만 많은 곳에 유용하게 쓸 수 있습니다. 음.. 아이프레임은... 말로하기 어렵군요; 한마디로 한 페이지 안에 또다른 페이지를 작은(?) 공간에 넣을 수 있...  
228 Script 방문자의 모니터 해상도를 나타내는 소스
오작교
32496   2011-03-22 2011-03-22 11:07
현재 당신의 해상도는 <script language="Javascript"> document.write(screen.width+"*"+screen.height) </script> 입니다.  
227 Script 싸이트 접속시 다른 곳으로 유도하기
오작교
33980   2011-03-22 2011-03-22 11:15
<META HTTP-EQUIV=REFRESH CONTENT="0; URL='보낼 경로'">  
226 Script 싸이트 머문 시간 표시하기
오작교
38192   2011-03-22 2011-03-22 11:19
<head>와 </head> 사이에 넣어 주세요. <script> var t=new Date(); t=t.getTime();h(); function h() { var r=new Date(); document.title="님께서는 오작교의 홈에 "+Math.ceil(((r.getTime()-t)/1000))+" 초째 머물고 계십니다"; status="님께서는 오작교의...  
225 CSS CSS 글꼴 크기 대조표
오작교
60785   2011-06-03 2011-06-03 10:29
CSS 글꼴단위 대조표 points pixels ems percent 6pt 8px 0.5em 50% 7pt 9px 0.55em 55% 7.5pt 10px 0.625em 62.5% 8pt 11px 0.7em 70% 9pt 12px 0.75em 75% 10pt 13px 0.8em 80% 10.5pt 14px 0.875em 87.5% 11pt 15px 0.95em 95% 12pt 16px 1em 100% 13pt 17...  
224 HTML html 요소 이름의 플어쓴 말과 한국말 표현
오작교
35546   2011-06-03 2011-06-03 10:44
HTML 요소 이름의 풀어쓴 말과 한국말 표현 NARADESIGN 이 문서는 여러 개인의 제안을 모아서 만듧니다. 공식적인 표준이 아니며 이 문서에서 권장하는 표현을 사용하지 않았다고 해서 틀리다고 말할 수는 없습니다. 단지 보다 권장하는 표현을 제안하고 있을 ...  
XE Login