HOME-STUDY

게시판에서의 html 태그 사용 요령 (1)
- 2002.2.16 한기호신부 -

- 인터넷 홈페이지를 꾸미고자 하시는 분들을 위해 작은 도움을 주고자    HTML 사용 요령에 관한 글을 올려드립니다.  도움이 되시길 바랍니다.-

  HTML 태그를 익히기까지
본인이 인터넷 상에 홈페이지를 올려 놓고 사용하기 시작한지 얼마되지 않을 무렵 홈페이지 게시판에서 홈친구들과 사연을 주고 받으면서 몇 분이 html태그를(영상 시) 올려 주었습니다. 그 때 게시판에 올려진 이미지 영상 시가 너무 신기하기만 여겨졌습니다. 화면에 영상 이미지가 뜨고 음악이 흘러나오고 그러면서 시나 노랫말 또는 사연의 내용이 떠오르니 어찌 신기하지 않을 수 있었겠습니까? 그 때 나도 빨리 html태그를 올려 놓는 법을 익혔으면 좋겠다 하는 마음이 간절했었는데 홈페이지 수정 작업등으로 바쁘게 지내던 터여서 미루어 오다가 어느 날 나도 문득 영상 태그를 올려놓은 법을 익히기 위해 아는 분에게 인터넷 메일을 이용~끈질긴 Q & A 과정을 통해 마침내 사용법을 익히게 되었습니다.

그 무렵 또 한가지 궁금한게 있었습니다. 그것은 게시판에서 html 태그를 직접 사용하지 않고 Html 태그 작성을 나모에디터가 대신해주듯이 그렇게 게시판에서 나모에디터를 사용할 수 있는 방법이 없을까? 하는 것이었습니다. 그런데 이런 것들은 막상 알고나니 아무 것도 아니었습니다. 그러나 이런 사용법을 익히고 알게되기까지는 얼마나 궁금하고 또한 어렵게만 느껴졌는지 모릅니다. 자! 이제부터 인터넷 홈페이지 게시판등에서 HTML 태그로 이미지 영상태그를 올리고 싶은 분들을 위해 HTML 태그 사용요령을 여러분의 눈높이에 맞춰 알려드릴테니 열심히 공부하시기 바랍니다. 인내심을 가지고 그 과정을 익히기까지 시간을 바쳐주시기만 하면 됩니다.

 영상 이미지 태그 (html태그) 의 구성
영상태그는 간단히 말해 영상 이미지와 글(본문) 그리고 음악으로 구성되어 있습니다. 이미지화일은 jpg로 만들어진 파일이면 됩니다. 글은 본인이 선택한 시의 내용이라든지 글을 텍스트문자로 입력하든지 또는 본문을 마우스로 드래그하여 블록설정한 후 복사하여 갖다 붙히는 형식을  취하면 됩니다. 그리고 사운드 음악은 인터넷상에 연결된 음악파일을 가져오든지 아니면 자기 홈페이지에 들어있는 음악파일을 가져다 붙혀놓으면 됩니다. (단 URL 경로를 정확히 적어주셔야 합니다. URL경로가 무엇이냐고요? 와~이것까지 설명해주어야하니 좀 힘이드네요. 사실은 본인도 처음엔 URL이 뭔지 몰랐답니다. URL은 http:// ... 이렇게 시작되는 인터넷 홈페이지 주소를 말합니다. ) 그러면 이론적으로 백번 설명하는 것보다는 영상태그 예문을 하나 가져다 놓고 직접 실전으로 들어가는 것이 훨씬 빠르겠기에 실전으로 들어가겠습니다.

먼저 본인 홈페이지 시와 음악메뉴의 "시와 영상" 의 No.4번 뉴먼추기경의 묵상기도를 예로 설명드리겠습니다.  본인 홈페이지 게시판으로 가셔서 이 화면으로 한번 들어 와 보세요. 잔잔한 배경음악이 흘러 나오고 뉴먼 추기경의 기도 내용이 스크롤업되어 위로 올라가고 백두산 천지가 영상이미지로 떠 있고 그래 얼마나 멋집니까? 이건 분명 저의 첫 작품입니다. 작품구성은 대충 이렇습니다. 여러분이 직접 이미지 파일이나 사운드 음악파일을 인터넷 http://...에 한번 입력하여 띄워 이미지 파일을 보시고 사운드 음악파일을 한번 들어보시기 바랍니다.

영상 이미지 태그 (html태그)를 갖다 붙히는 요령
자 ! 어떻습니까? 영상태그는 위에서 기술한데로 이미지 파일과 사운드 음악파일 그리고 본문 내용을 합성시켜 스크롤업 효과를 준 것 뿐입니다. 이제 그러면 위의 4가지 요소가 어디에 들어있는지 시와 음악메뉴의 "시와 영상" 의 No.4번 뉴먼추기경의 묵상기도에서 살펴보겠습니다. 먼저 시와 음악메뉴의 "시와 영상" 게시판에서 No.4번 뉴먼추기경의 묵상기도 제목줄을 클릭합니다. 준비되셨나요?

다음 순서 : 뉴먼추기경의 묵상기도 이미지 그림이 들어있는 박스나 박스 옆 부근에  마우스를 가져갑니다. 마우스 오른쪽을 클릭합니다. 수직으로 메뉴가 나타나면 그 곳에서 소스보기를 클릭합니다. 그러면 HTML로 나타나는 시와 음악메뉴의 "시와 영상" 게시판 No.4번 뉴먼추기경의 묵상기도< 메모장> 이 나타납니다. 처음엔 HTML 태그를 잘 모르니까 이 메모장 전체내용을 블록지정하여 복사한 후(또는 모두 선택을 클릭 복사한 후) 복사한 내용을 나모 에디터 새 글 바탕화면의 하단에 있는 HTML로 들어가서 거기에 들어있는 태그문서를 모두 지운 후 갖다 붙힙니다. 나모에디터가 없는 분들은 다른 메모장에다 갖다 붙히면 됩니다. (미리 말씀드리건데 이건 무식한 방법입니다. 단지 쉽게 알아 볼 수 있도록 우선 일러주는 방법입니다.) 그리고 반드시 문서형식지정을 txt 로 지정하지 말고 html로 지정하여 주십시오.

그리고 나모에디터 하단에 있는 미리보기 창을 클릭하여 들어가 보면 뉴먼추기경의 묵상기도가 그대로 입력이 되어 나타난 걸 볼 수 있습니다. 메모장으로(.html) 만드신 분은 탐색기로 보시면 됩니다. 그런데 어떻습니까? 시와 음악메뉴의 "시와 영상" 게시판에서 No.4번 뉴먼추기경의 묵상기도뿐 아니라 다른 불필요한 박스하며 붉게 표시된 X 마크등이 표시되어 있지요. 그것은 처음에 HTML 태그를 잘 모르니까 게시판의 소스보기 내용 전체를 갖다가 붙혔기 때문입니다.

영상 이미지 태그 설정 후 문제점
한마디로 소스보기에서 불필요한 태그를 다 갖다 붙혔기 대문입니다. 소스보기 전체 내용 가운데 불필요한 태그란 홈 게시판의 Box (도표)~입력 폼~형태, 글 제목. 이름. 이메일. 하단의 색상넣기. 그림넣기. 여러 아이콘. 비밀번호 입력완료를 표시한 창들 및 내용을 입력해 놓은 태그를 말하는 것입니다. 이 모든 태그가 다 들어갔으니 불필요하고 지저분하기 짝이 없는 태그가 다 들어간 것이지요. 아래 영상태그를 보시면 알 수 있습니다. 아래 영상태그는 소스보기를 클릭하여 전체 내용을 복사하여 나모에디터 하단의 html 소스보기 창(F6)으로 들어가 거기에 있는 내용을 모두 지우고 통채로 갖다 붙힌 것을 나모 편집화면으로 보게 한 것입니다.방금 설명한 대로 뉴먼추기경의 묵상 태그를 포함해서 게시판 형식 전체를 표시해주는 html 태그 전체가 들어간 것입니다. 그래서 영상 이미지 박스에 들어있는 불필요한 태그를 모두 없애주어야 합니다.

◎ 이름:슈퍼 ◎ 2001/11/30(금) 22:53 (MSIE6.0,WindowsNT5.1;DigExt) 61.81.186.143 1024x768 뉴먼 추기경의 묵상기도   뉴먼 추기경의 묵상 하느님께서 나를 창조하심은 특별한 봉사를 위함입니다. 다른 이들에게는 맡기지 않은 일을 굳이 내게 맡겨 주십니다. 살아있는 동안 그 사명이 아예 모를 수는 있어도 내세에서 결국 밝혀질 사실입니다. 나는 사슬의 고리 사람들 사이의 유대를 결속하는 고리입니다. 그 분께서 부질없이 나를 창조하실 까닭이 없으니 선업을 쌓는 가운데 그 분의 일도 하렵니다. 오로지 그 분의 계명을 지키기만 한다면 지금 서있는 자리에서 내가 의도하든 의도하지 않았든 나는 평화의 천사 진리의 설교자가 될 것입니다. 그래서 그 분을 신뢰합니다. 어디서 어떤 처지에 있든 나는 절대 버림받지 않습니다. 내가 병 중이라면 내 병이 그 분을 섬길지도 혼란의 와중이라면 내 혼란이 그 분을 섬길지도 슬픔의 와중이라면 내 슬픔이 그 분을 섬길지도 모릅니다. 그분께 헛된 일이란 있을 리 없습니다. 당신 자신이 무슨 일을 하시는지 잘 알고 게시는 까닭입니다. 내 곁에서 친구들을 앗아갈 지도 낯선 이들 가운데로 나를 내던지실지도 모릅니다. 내게 미래를 감추어 두심으로써 나로 하여금 고독을 느끼고 내 영혼은 쇠장해지도록 하실지도 모릅니다. 그래도 그 분은 당신이 하고 계시는 일을 잘 알고 계십니다.

이름     메일       내용

불필요한 태그를 모두 없애기
위에 보면 □ 속에 X  마크가 여러개 들어있고 이름 메일 내용 입력창 크게 답변관련쓰기 수정 삭제등이 표시되어 있습니다. 그리고 화면에 불필요한 태그가 표시되어 나타나 있지 않은 태그들이 있습니다.  조금 전에 말씀드린 게시판의 Box (도표)~입력 폼~형태, 글 제목. 이름. 이메일. 하단의 색상넣기. 그림넣기. 여러 아이콘. 비밀번호 입력완료를 표시한 창들 및 내용을 입력해 놓은 태그들 말입니다.  

그러면 뉴먼추기경의 묵상 이미지 창에 들어있는 내용을 제외한 불 필요한 태그를 어떻게 모두 없앨 수 있는가? 그것은 이렇게 하면 됩니다. 불필요한 태그를 찾아서 지우는 일이 너무 어렵고 힘드니까 소스보기를 클릭하여 메모장에 <read1 메모장> 나타난 html 태그를 갖다 붙힐 때 꼭 필요한 뉴먼추기경의 묵상 태그만을 선택해서 갖다 게시판에다 붙히면 됩니다. 어떻게 필요한 뉴먼 추기경의 묵상 HTML 태그를 가져다 붙히느냐고요? 그것은 전체 html 태그에서 중간 부분 쯤 영상시의 제목이 나오는 곳을 찾으면 됩니다.

바로 <center><table border="5" width="556" height="383" 이렇게 나가는 곳을 찾으면 됩니다. 거의가 시작 부분이  <center><table> 이렇게 나가요. 여기서 자세한 설명은 너무 힘이 드니 여러분이 몇 차례 연습과 시행 착오를 거치는 수밖에 없습니다. 아래 태그는 꼭 필요한 뉴먼 추기경의 영상 태 필요한 부분입니다. 전체 태그가운데 꼭 필요한 태그가 중간 어디서부터 시작되고 끝나는 부분이 어디까지인가 잘 보아 두시기 바랍니다. 끝나는 부분은 <embed width="54" height="25" 이렇게 나가는 부분입니다. 음악사운드로 거의가 끝나기 때문입니다.

나모 에디터(또는 드림위버 프론트페이지 등) 에서 태그 사용 요령

위의 시작부분 <center><table border="5" width="556" height="383" ....     에서부터 제일 마지막 줄<embed width="54" height="25" src=http://user.chollian.net/~paris68/mid1/040.mid>  까지의 태그태그 내용을 나모에디터 툴(드림위버등) 하단의 HTML 소스보기 창으로 들어가 거기에 있는 내용을 모두 지우고 갖다 붙힌 후 미리보기 창으로 들어가서 보면 이전에 작업했던 것과는 달리 아주 깨끗한 영상 화면과 사운드 음악 그리고 뉴먼추기경의 묵상 기도 본문이 스크롤 업 되어 나타나는 것을 볼 수가 있을 것입니다. 어때요? 참 기분 좋지요?  분명히 말씀드리지만 다른 사람이 만들어 놓은 영상 태그를 게시판의 소스보기로 들어가 우선 배껴오는 것부터 할 줄 알아야 멋진 영상태그를 만들 수 있습니다. 그리고 배껴온 HTML 태그에서 이제 사운드 음악 파일이나  이미지 영상 파일을 바꾸어 주고 본문 내용도 여러분 것으로 바꿔주기만 하면 아주 훌륭한 영상태그를 만들 수 있습니다. 남의 작품을 통째로 갖다 빼껴 쓰는 것은 (불법복제) 좀 그렇잖아요. 이미지와 음악 그리고 본문 가운데 한 두 개는 얼마든지 여러분 것으로 바꿔 쓸 수 있지 않겠어요?

자! 이제 나모에디터나 메모장에서 작업한 태그를 게시판으로 가져와서 거기에다 갖다 붙히면 됩니다. 분명히 기억해 둘 일은 게시판에서 문서형식지정을 txt 가 아닌 html 로 지정해야 하는 것입니다.  그리고 게시물에 사용자 임의의 비밀번호를 입력하시기 바라며 비밀번호는 꼭 기억해 두시기 바랍니다. 게시판에서 사용하는 비밀번호는 크게 중요한 건 아니나 한번 올린 게시물을 삭제나 수정시 이 비밀번호가 없으면 삭제나 수정을 할 수가 없기 때문입니다. 자! 이제 또  여러분이 게시판에 올린 영상 이미지와 음악 그리고 본문을  다른 사람들이 보게 될 때 얼마나 기분이 좋고 감동적일까요? 짜자자 짠~이 얼마나 멋있습니까?

게시판에서 HTML 태그 사용 요령
필자가 홈페이지 발간 후 얼마 되지 않아 게시판에서 글을 올리면서 나모에디터로 HTML 문서를 편집하듯이 게시판에서도 마치 표그리기를 하여 여러 셀 안에다 문서를 예쁘게 편집하여 꾸밀 수가 없을까? 하는 생각을 해 본적이 있었습니다. 그런데 등하불명이라는 말이 있잖아요?  나는 그 비결이 아주 가까운데 있었는데 그걸 몰랐던 것입니다. 그 비결이 뭐냐고요? 알려주면 여러분은 으응~그것 하고 그렇게 말할 것입니다. 그렇습니다. 알고나면 아무 것도 아니란 말은 바로 이것을 두고 하는 말입니다. 미처 생각을 못한 것 뿐이지요. 자! 알려 드립니다. 먼저 게시판에다 올릴 문서를 나모에디터로 편집을 합니다.  예를 들어 표도 여러개를 그리고 그 안에 글도 넣고 그림도 넣고 (이미지의 경우는 내 것이든 다른 사람의 것이든 인터넷 사이트에 올라온 것이어야 하며 반드시 이미지를 불러 올 때는 URL 경로를 (http://...) 지정하여 넣어야 합니다. 한번 예쁘게 꾸며 보세요. 마치 필자가 본인 홈에서 홈친구들이 쓴 글을 편집하여 특집으로 꾸몄듯이 말입니다.

그 다음엔 나모에디터 화면 하단 HTML로 들어가서 거기에 기록된 HTML 태그 모두를 드래그하여 복사한 후 를 모두 지우고 조금 전에 꾸민 문서를 다시 불러와 HTML 소스로 들어가 모두 블록설정하여 복사한 후 (또는 편집 메뉴에서 모두 선택하기) 이것을 게시판에다 갖다 붙혀놓고 HTML로 문서형식으로 지정하면 여러분이 꾸민 멋진 문서를 게시판에서도 그대로 볼 수가 있어요. 다시말씀드려 HTML 태그를 몰라도 게시판에서도 문서를 멋있게 꾸밀 수 있다는 말입니다. 그렇지 않으면 고급 사용자들만이사용할 수 있는 HTML 태그언어를 전부 익혀야만 합니다. 다 익히는 일은 말처럼 쉬운 일이 아닙니다. <td><tr> </td></tr>등 이런 것부터 시작해서 말입니다.  필자는 처음에 <td><tr></td></tr>등 이런게 무슨 태그인가? 하며 이런 것도 제대로 몰랐었답니다.  여지껏 알려드린대로 여러분도 한번 흉내를 내어 보십시오. 나모에디터에서 내가 편집한 문서를 그것도 아주 예쁜 문서를 홈 게시판에다 갖다 멋있게 붙혀 놓을 수가 있어요. 그러면 게시판에다 꾸며놓은 것을 다른 사람들이 보고는 아마 좀 놀랠 것입니다. 알고나면 아무 것도 아니에요. 여러분들도 문서를 게시판에 멋있게 이쁘게 알차게 올려놓을 수 있기를 바랍니다.

이미지 파일 가져오기

사운드 음악파일 가져오기

본인이 애써 고생하면서 익힌 노하우를 혼자만 갖고 있기가 아까워 인터넷 홈페이지를 꾸미시는 분들께도 나누어주고자 이렇게 엄청난 시간을 바쳐가며 HTML 사용요령에 관한 글을 올렸습니다. 알고나면 아무 것도 아닌 것을 그러나 알기까지는 또 얼마나 어려운지 모릅니다. 여러분에게 작은 도움이라도 되었으면 좋겠습니다. 여러분! 이 슈퍼 홈에 자주 놀러와 주시고 여러분이 또 멋있게 홈페이지를 꾸미셨다면 이 한신부를 초대해 주세요. 홈페이지를 만드는 친구들 파이팅!!!