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

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

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

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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

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

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

댓글
2008.08.20 11:27:01 (*.96.31.61)
장길산
상세한 설명 해주셔서 고맙습니다.
수고하셨습니다.
번호
글쓴이
공지 HTML HTML 기초 다지기 4
오작교
223835   2008-06-17 2010-08-19 13:08
공지 HTML HTML과 CSS의 종합 정리 1
오작교
287218   2007-10-01 2010-08-19 12:45
공지 일반 스타일시트의 총정리
오작교
241292 14 2006-09-14 2010-08-19 12:45
63 Script input안에 미리 글자를 넣어놓기
오작교
23523   2007-10-23 2007-10-23 17:14
input type="text" onfocus="this.value='';" value="이름을 입력하세요">.  
62 HTML 글자에 배경넘기 1
오작교
23527 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">오작교도 여러분을...  
61 Script 클릭하면 사라지는 글 만들기
오작교
23550   2008-08-08 2008-08-08 11:58
var curObj; function toggleMultimedia() { if (textFade.filters(0).status == 2) { textFade.filters(0).Stop(); if (textFade.style.visibility == "hidden") textFade.style.visibility = "visible"; else textFade.style.visibility = "hidden"; window...  
60 Script 새창 띄우기(펌)
오작교
23563   2009-02-03 2009-02-03 16:05
웹서핑을 하다보면 사이트 첫페이지나 중간 중간에 작은 창을 이용하여 공지사항을 달아놓은 것을 많이 보았을 것입니다. 이해가 안되시면 여기를 한번 눌러보세요^^ 이러한 것은 자바스크립트를 이용한 브라우져 조절 기능인데.......알고 있으면 아주 유용하...  
59 Script 반짝거리는 글씨 1
오작교
23627 10 2006-04-16 2006-04-16 23:07
반짝거리는 글씨 1. 먼저 <head> 와 </HEAD> 사이에 아래 스크립트를 넣습니다. <script> function doBlink() { var blink = document.all.tags("BLINK") for (var i=0; i < blink.length; i++) blink[i].style.visibility = blink[i].style.visibility == ""...  
58 CSS 여러방법의 창닫기
오작교
24044 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...  
57 일반 SWF파일 다운받아서 소스보기 3
오작교
24061 36 2006-01-29 2006-01-29 12:23
◈ SWF파일 다운받는 방법 1] 태그연습장에 다음과 같이 씁니다 <a href="이곳에 다운받을 swf주소를넣습니다">다운받습니다,오른쪽마우스클릭. 다른이름으로대상 저장합니다. </a> 예)다운받습니다,오른쪽마우스클릭. 다른이름으로 대상 저장합니다. 2] swish ...  
56 HTML 테이블 만들기 - 1
멋진그대
24138 8 2007-01-29 2007-01-29 14:39
홈페이지를 제작하는데 있어서 표를 빼놓고는 홈페이지를 만든 다는 생각을 할 수 없을 정도로 table 태그는 아주 중요합니다. 또한 table 태그만 잘만 사용해도 웹 디자인은 따로 할 필요가 없을 정도로 유용한 태그입니다. 표를 잘 이용하면 홈페이지를 아주...  
55 Script textarea안에 미리 문구를 넣어두기
오작교
24327   2007-10-23 2007-10-23 17:16
이름을 입력하세요 textarea onfocus="this.value='';">이름을 입력하세요/textarea>  
54 CSS Filter Grow 적용하기
오작교
24334 25 2006-05-06 2006-05-06 20:23
엄숙한 시간 지금 이 세상 어디에선가 우는 사람은, 까닭없이 이 세상에서 우는 사람은 내가 슬퍼 울고 있다. 지금 이 밤 어디에선가 웃는 사람은, 까닭없이 이 밤에 웃는 사람은 나를 비웃고 있다.지금 이 세상 어디에선가 가고 있는 사람은, 까닭없이 이 세...  
53 CSS Text에 MouseOver 적용하기 1
오작교
24369   2009-04-17 2009-04-17 01:13
오작교의 홈 오작교의 홈 오작교의 홈 오른쪽의 텍스트에 마우스커서를 각각 올려보세요. 간단한 방법으로 마우스커서가 글자 위에 올라갔을 때 글자에 변화를 줍니다. 별 볼 일 없는 듯하지만, 필요할 때도 있겠지요;;  
52 Script 글자 및 이미지에 깜박이는 효과 주기 1
오작교
24374   2007-10-23 2007-10-23 17:08
<html> <head> <script language="JavaScript"> function doBlink() { var blink = document.all.tags("BLINK") for (var i=0; i < blink.length; i++) blink[i].style.visibility = blink[i].style.visibility == "" ? "hidden" : "" } function startBlink()...  
51 CSS 홈페이지에 웹폰트 적용시키기
오작교
24421   2008-05-18 2008-05-18 12:08
홈페이지에 웹폰트 적용하기 <style type="text/css"> <!-- @font-face {font-family: 웹폰트이름; src:url(https://웹폰트가있는주소/웹폰트이름.eot);} a:link {font-family: 웹폰트이름;font-size: 9pt;} a:visited {font-family: 웹폰트이름;font-size: 9p...  
50 Script 선택된 테이블에 색상 입히기
오작교
24462   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>  
49 일반 스위시 물결효과를 만드는 물결판 file
오작교
25069 75 2006-01-03 2006-01-03 15:36
 
48 Script 자바 스크립트에서 자주 사용되는 이벤트들
오작교
25111   2009-02-26 2009-02-26 19:30
■ JavaScript에서 자주 사용되는 Event들... EVENT EVENT 내용 OnLoad 현재의 페이지가 로딩되었을 경우 OnUnload 현재의 페이지에서 다른 페이지로 이동할 경우 OnError 현재의 페이지를 읽는 중에 JavaScript Error가 발생할 경우 OnAbort 이미지를 읽는 도...  
47 HTML 테이블 배경이미지도 크기를 지정해보자
오작교
25287   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...  
46 Script iframe의 가로 세로 조정
오작교
25710   2007-10-04 2007-10-04 11:45
아이프레임을 불러올시 가로 또는 세로 길이가 변경되었을 시 정해진 크기 외의 부분이 짤릴수 있습니다. 이를 해결할 방법으로 불러와 지는 페이지에 <head> 와 </head> 사이에 <script> function window::onload(){ self.resizeTo(document.body.scrollWidth...  
45 HTML Fieldset 이용하기
오작교
26055 17 2007-05-23 2007-05-23 00:05
<fieldset> <legend>필드셋 제목</legend> legend 태그로 제목을 넣은 경우 </fieldset> 스타일시트 적용 가능 <fieldset style="border:1 solid; border-top-color: #808080;border-right-color: #f9f9f9; border-left-color: #f9f9f9;border-bottom-color: #...  
44 CSS 글자 좋아하시는 스타일대로 골라가세요.
오작교
26492 18 2006-11-29 2006-11-29 09:14
한마음 포털 커뮤니티 font style="font-family:돋움;font-size:12pt;color:#ffffff;width:100%;height:20;Filter:Glow(color=#0000ff,strength:2)">한마음 포털 커뮤니티/font> 한마음 포털 커뮤니티 font style="COLOR:white;FILTER:shadow(color=#0066cc);h...  
XE Login