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

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

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

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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

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

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

댓글
2008.08.20 11:27:01 (*.96.31.61)
장길산
상세한 설명 해주셔서 고맙습니다.
수고하셨습니다.
번호
글쓴이
공지 HTML HTML 기초 다지기 4
오작교
219462   2008-06-17 2010-08-19 13:08
공지 HTML HTML과 CSS의 종합 정리 1
오작교
274521   2007-10-01 2010-08-19 12:45
공지 일반 스타일시트의 총정리
오작교
236029 14 2006-09-14 2010-08-19 12:45
63 PHP 초보자를 위한 PHP 강좌 5부 - 전역 변수 2
오작교
15154 39 2007-03-14 2007-03-14 22:04
안녕하세요~~ 오늘은 변수의 사용범위(Variable Scope)에 대한 내용 중 전역변수에 대한 얘기를 해드리겠습니다. PHP에서 변수가 사용될 수 있는 범위는 기본적으로 그 변수가 선언된 영역에 한정됩니다. 먼저, 다음의 간단한 예제를 보겠습니다. <? php $firs...  
62 Script 이미지 싸이즈대로 새창띄우면서 풍선도움말 넣고, 창닫기 1 file
오작교
15117 34 2006-04-16 2015-05-12 13:48
 
61 일반 물결 효과의 투명이미지 만드는 동영상(펌)
오작교
15115 19 2006-01-03 2006-01-03 15:30
objectlaunch("");  
60 HTML 테이블 만들기 - 6
멋진그대
15103 12 2007-01-29 2007-01-29 14:48
colspan 과 rowspan 속성을 배우느라....고생 많이 하셨습니다.......머리에서도 열이 많이 나구있겠군요..후후^^ 여기서부터는 아주 아주 쉬운 속성을 배울 것입니다. 아마 넘 쉬워서 눈물이 나올 겁니다...이번에 배울 건 내용 정렬속성입니다. 바로 align=...  
59 HTML 홈페이지를 만들어 보자 (템플릿 -5)
오작교
15017 13 2007-02-03 2007-02-03 20:56
- right.htm 만들기 right.htm 부분은 메인페이지 우측의 첫화면 이죠? ^^ 방문객들에게 가장 많이 보여지는 페이지이므로 요길 어떻게 꾸미느냐에 따라 홈페이지가 그럴듯하게 보이기도 하고 허접하게 보이기도 한답니다. 고로 꾸미는게 참 중요하겠죠? ^^ ...  
58 일반 IFRAME에 들어가는 속성
오작교
14992 19 2006-05-06 2006-05-06 09:14
※ 속성 속 성 기 능 src ="주소" iframe 창에 나타내고자 하는 창의 주소(경로)를 넣는다 name iframe 창도 target 설정을 할 수 있다. name을 지정한다. ( target 에 대해선 링크태그 부분 참조) frameborder="yes/no or 1/0" bordercolor="테두리색상" 테두...  
57 Script 홈에 머무는 시간 표시하기
오작교
14978 10 2006-06-09 2006-06-09 15:52
<script> var t=new Date(); t=t.getTime();h(); function h() { var r=new Date(); document.title="중년! 그 아름다운 삶이 있는 곳에 오신지"+Math.ceil(((r.getTime()-t)/1000))+" 초가 지났네요."; status="중년! 그 아름다운 삶이 있는 곳에 오신지"+Mat...  
56 HTML 테이블(3신)
오작교
14977 11 2007-06-19 2007-06-19 17:06
Table 에관하여 3신 Table 테두리 세번째 시간. 테이블 테두리의 색상에 대하여 오늘은 테이블 테두리에 색상을 넣어 보고 응용법도 함께 해보겠습니다. 일반적으로 가장많이 알려지고 또 사용되고 있는것이 bordercolor입니다. 조금더 신경을 쓰시는분이라면...  
55 일반 투명 반투명 아이프레임 넣기
오작교
14920 8 2006-05-05 2006-05-05 11:04
예제보기 : https://www.tagmania.net/love/iframetrans.htm 주의사항 : 익스 5.5 이상 가능 1. 투명 iframe 창 만들기 두가지를 준비해야 됩니다. 첫번째는 다음과 같은 형식의 iframe 태그를 만들어 줍니다. <iframe src="웹페이지 주소" allowtransparency=...  
54 Script 새창으로 게시물 올리기
오작교
14892 10 2006-10-31 2006-10-31 09:52
웹서핑을 하다보면 사이트 첫페이지나 중간 중간에 작은 창을 이용하여 공지사항을 달아놓은 것을 많이 보았을 것입니다. 이해가 안되시면 여기를 한번 눌러보세요^^ 이러한 것은 자바스크립트를 이용한 브라우져 조절 기능인데.......알고 있으면 아주 유용하...  
53 Script 버튼 안에 이미지 사용하기
오작교
14867 11 2006-09-14 2006-09-14 11:42
 
52 CSS 스크롤바 따라 움직이는 레이어
오작교
14835 36 2006-04-16 2006-04-16 21:24
헤드부분에.... <script language="JavaScript"> <!-- self.onError=null; currentX = currentY = 0; whichIt = null; lastScrollX = 0; lastScrollY = 0; NS = (document.layers) ? 1 : 0; IE = (document.all) ? 1: 0; <!-- STALKER CODE --> function heart...  
51 CSS TD속에 배경을 고정하기
오작교
14828 28 2006-05-06 2006-05-06 20:24
TD속에 배경고정 <table align="center" border="1" width="256" height="230"> <tr> <td height="256" style="background color:white url(images/aaa.jpg) no-repeat fixed left bottom;" width="230"> </td> </tr> </table>  
50 CSS 스타일 시트로 배경에 글래디언트 효과
오작교
14766 12 2006-05-06 2006-05-06 20:03
<head>사이에 <style type="text/css"> .color1 {filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=yellowgreen, EndColorStr=#FFFFFF)';font-size: 9pt; border:0 solid #000000;height:40px;} .color2 {filter='progid:DX...  
49 Script 우측버튼을 금지시키는 소스
오작교
14753 12 2006-09-30 2006-09-30 09:15
<SCRIPT LANGUAGE="JavaScript"> <!-- // function click() { if (event.button==2) { alert('죄송합니다.\n우측버튼은 사용할 수 없도록 했습니다.\n그냥 듣기만 하시면 안될까요?'); } } document.onmousedown=click // --> </SCRIPT>  
48 일반 글씨와 이미지 정렬하기
오작교
14727 5 2006-04-16 2006-04-16 18:32
글과 함게 나란히 싸이즈 작은 아이콘을 넣었을때 아이콘과 글씨가 정렬이 안될때가 있습니다. 이때, 이미지 태그옆에 align="absmiddle"를 넣어 줍니다. <img src="icon.gif" align="absmiddle">  
47 CSS 글자와 효과
오작교
14699 19 2007-06-19 2007-06-19 16:48
안녕하세요 이양호 입니다. 오늘은 글자의 특별한 효과에 대하여 알아보겠습니다 1. 가장 많이 쓰이는 그림자 글자 그림자글자<DIV STYLE="width:520; height:50; font-size: 15pt; color:#FFCC00; filter:Shadow(Color=#666666, Direction=225)"> <CENTER><b...  
46 Script 움직임이 부드러운 슬라이딩 팁버튼
오작교
14629 6 2006-09-14 2006-09-14 10:29
문서가 아주 길 경우, 탑버튼을 넣어주어 한번에 위로 올려주는 버튼 만드는 방법 입니다. 우선 아래 소스를 복사하여 js파일을 만듭니다. function back_top() { x = document.body.scrollLeft; y = document.body.scrollTop; step = 2; while ((x != 0) || (...  
45 일반 이미지와 글자정열 1
오작교
14595 12 2006-05-06 2006-05-06 20:14
기본적으로 이미지를 넣고 그 옆에 글자를 넣게 되면 아래로 정렬이 됩니다 상황에 따라서는 바꿔야 할 필요가 있으므로 여러 가지 정렬방식을 알아두는 것도 필요합니다 아무것도 사용하지 않은 기본 정렬입니다 이미지 아래와 똑같은 위치에 놓이게 됩니다 ...  
44 HTML 테이블(2신) - 펌
오작교
14550 15 2007-06-19 2007-06-19 16:59
Table 에관하여 2신 Table 테두리 두번째 시간. 테이블 테두리 상하좌우 설정에 대하여 테이블 테두리 1신은 모두 익히셨어요? 복사해서 사용하지 마시고 직접 타이핑해서 만드세요. 그래야 실력이 늘어요!! 1신에서 style="border-style:변수; 를 넣으면 테...  
XE Login