<P align=center><IMG src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fwww.anycall.com%3A8084%2Fboard%2Fboard_img%2Flogo%255B1065551300321%255D.gif" alert=""></P>
<P>안녕하세여. 종이컵입니다.<BR>HTML에 관해 깊은 지식이 없을 뿐더러 누구를 가르칠만한 내공도 낮고, 심지어 동호회 성격과 아무런 관계가 없음에도 불구하고 님들께 혹시나 도움이 될까해서 나름대로 이것저것 정리해서 글을 올리게 되었네여. [<STRONG><FONT color=#4169e1>HTML</FONT></STRONG>]이란 "<FONT color=#4169e1><STRONG>H</STRONG>yper <STRONG>T</STRONG>ext <STRONG>M</STRONG>arkup <STRONG>L</STRONG>anguage</FONT>"의 약자라는 등 이런 얘기는 생략하도록 하겠습니다.</P>
<P>그리고 HTML 작성을 도와주는 프로그램... 즉 Namo Web Editor, Microsoft FrontPage, Macromedia Dreamweaver 등 많은 프로그램이 있겠지만, HTML을 처음 배울때 가장 이상적인 방법은 메모장이라고 감히 말씀 드리고 싶습니다. 기본적인 골격을 이해하는데 가장 이상적인 방법이라 생각되며 저 또한 메모장으로 시작했기 때문일 수도 있고 특정 프로그램의 기능 설명보다는 HTML의 실제 소스를 다루기에 바람직할 것으로 사료됩니다.</P>
<P><STRONG>(1) 일단 HTML 문서를 만들어 보자.</STRONG></P>
<P><IMG src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fwww.anycall.com%3A8084%2Fboard%2Fboard_img%2Fhtml_3%255B1064214183469%255D.JPG" alert=""><BR>모두들 메모장을 여는 방법을 아시겠지만 굳이 설명하자면...</P>
<P><IMG src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fwww.anycall.com%3A8084%2Fboard%2Fboard_img%2Fhtml_4%255B1064214196522%255D.JPG" alert=""><BR>메모장을 여는 여러가지 방법이 있습니다만 위의 그림처럼 따라해 보세여. [시작 - 모든 프로그램 - 보조프로그램 - 메모장] 입니다.</P>
<P><IMG src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fwww.anycall.com%3A8084%2Fboard%2Fboard_img%2Fhtml_5%255B1064215032183%255D.JPG" alert=""><BR>이제 [파일 - 다른 이름으로 저장]을 선택하시고 파일형식을 [모든 파일]로 지정한 다음 문서 이름을 확장자가 [*.html]이 되도록 저장합니다.</P>
<P><STRONG>(2) HTML 선언을 해보자.</STRONG></P>
<P>축하합니다. 비록 아무것도 하지 않을뿐더러 HTML 선언도 없지만 이미 여러분은 HTML 파일을 생성하는 것을 배웠습니다. 이제 이 문서가 HTML임을 선언해 보겠습니다. 메모장에 이렇게 써보세여.</P>
<P><FONT color=#0000cd><html><BR></html></FONT></P>
<P>이 문서는 위의 태그로 인해 HTML 문서임을 선언했습니다. 모든 소스는 <html>과 </html> 사이에 써 내려가면 되구여. 사실 <html> 선언이 없더라도 이 문서는 HTML 문서로써 아무런 지장이 없습니다. 이번엔 문서의 성격을 결정하는 <head>와 <title>태그를 사용해 보겠습니다. 대소문자를 구분하지 않으므로 대문자 혹은 소문자 중 편한 방법으로 사용하면 되지만 <STRONG><FONT color=#ff0000><HtmL></FONT></STRONG>과 같이 섞어 쓰실경우 브라우저에 따라 정상적인 화면이 나오지 않을 수도 있습니다.</P>
<P><FONT color=#0000cd><HTML></FONT></P>
<P><FONT color=#0000cd> <TITLE><FONT color=#000000>문서 이름을 적는 곳</FONT></TITLE><BR> <HEAD><BR> //<FONT color=#000000>문서의 성격을 결정하는 곳</FONT><BR> </HEAD></FONT></P>
<P><FONT color=#0000cd> <BODY><BR> <FONT color=#000000>문서의 내용을 적는 곳</FONT><BR> </BODY></FONT></P>
<P><FONT color=#0000cd></HTML></FONT></P>
<P>위의 소스를 보면 몇가지 특이한 점을 발견할 수가 있는데 하나씩 설명을 드리도록 하겠습니다.</P>
<P><STRONG>(3) 태그의 배치</STRONG></P>
<P>우선 가장 중요할 수도 있는 내용입니다. 태그 사용시 매우 주의해야 할 것이 있다면 태그의 순서를 정하는 것 입니다. 임의의 <A>태그 사이에 다른 태그가 들어가게 될 경우... </P>
<P><FONT color=#0000cd><A></FONT> <FONT color=#8b0000><B> </B></FONT> <FONT color=#0000cd></A></FONT></P>
<P>위와 같이 A라는 대그룹안에 B라는 소그룹을 사용하게 되면 반드시 </A>태그를 마지막 위치에 놓아야 합니다. 만일 아래와 같이...</P>
<P><FONT color=#0000cd><A></FONT> <FONT color=#8b0000><B></FONT> <FONT color=#0000cd></A></FONT> <FONT color=#8b0000></B></FONT></P>
<P>이렇게 섞어 주게 될 경우 보시는 분에 따라 정상적인 화면이 나오지 않을 수도 있으며 간단한 태그의 경우 요즘 왠만한 브라우져가 적절히 화면 처리를 하지만 조금더 복잡하게 태그가 들어갈 경우 보시는 분에 따라 화면에 정상적으로 나타나지 않으므로 주의를 요합니다. 예를들어...</P>
<P><FONT color=#0000cd><A></FONT> <FONT color=#8b0000><B></B></FONT> <FONT color=#006400><C></C></FONT> <FONT color=#9400d3><D></FONT><FONT color=#ff0000><E></E></FONT><FONT color=#9400d3></D></FONT> <FONT color=#0000cd></A></FONT></P>
<P>좀 어지럽게 되어 있지만 일반적으로 이정도 섞여 있게 되었을 경우, 태그의 잘못된 위치에 따라 유지보수가 어려워지게 되고 보시는 분에 따라 화면에 정상적으로 나타나지 않을 수 있습니다. 그래서 전통적으로 오래전부터 프로그래밍 언어를 사용할때 눈에 쉽게 들어오도록 이렇게 표현하기도 합니다.</P>
<P><FONT color=#0000cd><HTML></FONT></P>
<P><FONT color=#0000cd> <TITLE><BR> </TITLE></FONT></P>
<P><FONT color=#0000cd> <HEAD><BR> </HEAD></FONT></P>
<P><FONT color=#0000cd> <BODY></FONT></P>
<P><FONT color=#0000cd> <P><BR> // BODY 사이의 내용이 모든이에게 보여주는 내용이 들어갑니다.<BR> <FONT color=#000000>처음으로 만들어본 HTML 문서.</FONT><BR> </P></FONT></P>
<P><FONT color=#0000cd> </BODY></FONT></P>
<P><FONT color=#0000cd></HTML></FONT></P>
<P>위의 태그를 모두 쓰셨다면 이제 문서를 저장하시고 저장한 HTML 파일을 열어보세여. 그러면 하얀 배경에 [처음으로 만들어본 HTML 문서.]라는 글자만 보일 겁니다. 위의 태그를 보시면 <STRONG><FONT color=#4169e1>//</FONT></STRONG> ←이런 부분이 있는데 이것은 주석을 다는 부분입니다. 유지보수를 위해 설명을 달아 놓았지만 브라우져가 화면에 출력하지 않기 때문에 //(주석) 뒤의 글이 나타나지 않습니다.</P>
<P><FONT color=#0000cd>// 한줄만 주석으로 사용</FONT></P>
<P><FONT color=#0000cd>/*<BR>여러줄을 주석으로 사용<BR>*/</FONT></P>
<P><FONT color=#0000cd><!--<BR>소스를 막는 HTML 주석<BR>--></FONT></P>
<P><FONT color=#0000cd><%<BR>JSP 언어 등에서 사용하는 주석<BR>%></FONT></P>
<P>주석의 종류도 여러가지 입니다만 주석은 쓰시는 분에 따라 여러가지 용도로 사용할 수 있으므로 한번씩 사용해 보시구여. 여기까지 이해를 하셨다면 HTML 기초는 되었고 이제 태그의 종류와 태그 사용법등을 익히면 원하는 문서를 만들 수 있겠네여.</P>
<P><STRONG>(4) <br></STRONG></P>
<P>문서의 내용을 써 내려가다 보면 한줄 띄기를 해야 할 때가 있습니다. 이때 <br> 태그를 사용하시면 되구여. 다음과 같이 사용하면 됩니다.</P>
<P><FONT color=#0000cd>동해물과 백두산이 마르고 닳도록<br><BR>하느님이 보우하사 우리 나라만세<br><BR>...</FONT></P>
<P><STRONG>(5) <p></STRONG></P>
<P>이번엔 <p> 태그를 사용하는 경우 입니다. 기본적으로 <p> 태그는 한줄 건너뛰게 되고 몇가지 인자를 사용할 수 있습니다.</P>
<P><FONT color=#0000cd><P><FONT color=#000000>동해물과 백두산이 마르고 닳도록</FONT> </FONT>
<P align=left><FONT color=#0000cd><P align="left"><FONT color=#000000>하느님이 보우하사 우리나라 만세</FONT></p></FONT></P>
<P align=center><FONT color=#0000cd><P align="center"><FONT color=#000000>무궁화 삼천리 화려강산</FONT></p></FONT></P>
<P align=right><FONT color=#0000cd><P align="right"><FONT color=#000000>대한사람 대한으로 길이 보전하세</FONT></p></FONT></P>
<P>가장 대표적인 사용법으로 그냥 <p>만 사용하게 되면 한줄 건너뛰게 되고 align=left 를 사용할 때와 같은 효과가 있습니다. align=center 을 사용하게 되면 자신이 위치한 곳의 중앙에 나타나며, align=right 를 사용하게 되면 자신이 위치한 곳의 오른쪽에서 부터 나타나게 됩니다.</P>
<P>여담이지만 <p>의 사용법을 쥔장님께 설명하려다 보니 도움이 될까해서 HTML 기본 골격을 설명하게 되었네여. 감삽니다. ^-^</P>
<P> </P>
<!-- -->
첫댓글아이고, 제겐 좀 어렵네요-_-;;;...좀 컴 지식이 있는분 들에게는 상당히 도움 될것 같네요, 아뭏든 컴 전문가 로서의 종이컵 님의 재능을 알순 있습니다, 저도 오늘 아주 귀중한 이미지 넣기나 <p> 태그만 배워도 엄청난 수확 입니다, 정말 친절하군요, 저도 압니다, 많이 공유하고 싶다는걸, 아뭏든 고맙네요^-^
앗~! 생각지도 못했는데 관심있게 읽으시는 분들이 계시네여. 홈페이지 만드는데 사용하는거 맞습니다. 막상 글을 쓰다보니 생각보다 글 올리기가 버겁더군여. 예전에 배웠던 것들을 하나하나 기억으로 더듬어 가다보니... 잘못된 정보를 올리면 안될 것 같아서 확인사살까지 했지만 연재물로 올리기에는 쑥스럽군여.
일단 위의 내용만 이해해도 HTML에 관해 70%(?)는 배웠다고 해도 과언이 아닐 것 같네여. HTML에서 가장 중요한 골격을 이해한 것이므로... 그리고 태그의 종류가 굉장히 많습니다만 모두 사용하는 것은 아니구여. 몇몇 중요한 태그만 익히고 table 사용법, frame 나누는 법만 익히면 90%(?)정도는 배웠다고 할 수 있습니다
어디까지나 개인적인 견해구여. 나머지 10%(?)는 위에서 언급한 좋은 프로그램을 사용해서 좀더 효과적으로 작업을 하면 된다는 것 쯤이겠져... 태그까지 이해 하시게 되면 그때는 JAVA에 관해 관심을 가지게 됩니다. 그때는 이미 HTML에 관해 많은 부분을 이해하고 있다는 증거가 아닐지...
첫댓글 아이고, 제겐 좀 어렵네요-_-;;;...좀 컴 지식이 있는분 들에게는 상당히 도움 될것 같네요, 아뭏든 컴 전문가 로서의 종이컵 님의 재능을 알순 있습니다, 저도 오늘 아주 귀중한 이미지 넣기나 <p> 태그만 배워도 엄청난 수확 입니다, 정말 친절하군요, 저도 압니다, 많이 공유하고 싶다는걸, 아뭏든 고맙네요^-^
켁~~ 전문가는 아닙니다 아니구여~~ 그저 쬐끔 알고 있을뿐... 아시는 분은 이미 다 아는 내용이라 이 글을 읽고 웃을지도 모른다는... 최대한 쉽게 설명하려고 했지만 생각처럼 그리 쉽게 설명이 안되네여. 죄송...
^^감사합니다...제가 99년도에 배웠었는데...다 까먹었거든요...다른것들도 올려주세요...^^;;
내가 해봤더니 된다 신기하당 ^^근데 이거 잘배우면 내 홈피도 만들수 있다는거죠?
앗~! 생각지도 못했는데 관심있게 읽으시는 분들이 계시네여. 홈페이지 만드는데 사용하는거 맞습니다. 막상 글을 쓰다보니 생각보다 글 올리기가 버겁더군여. 예전에 배웠던 것들을 하나하나 기억으로 더듬어 가다보니... 잘못된 정보를 올리면 안될 것 같아서 확인사살까지 했지만 연재물로 올리기에는 쑥스럽군여.
일단 위의 내용만 이해해도 HTML에 관해 70%(?)는 배웠다고 해도 과언이 아닐 것 같네여. HTML에서 가장 중요한 골격을 이해한 것이므로... 그리고 태그의 종류가 굉장히 많습니다만 모두 사용하는 것은 아니구여. 몇몇 중요한 태그만 익히고 table 사용법, frame 나누는 법만 익히면 90%(?)정도는 배웠다고 할 수 있습니다
어디까지나 개인적인 견해구여. 나머지 10%(?)는 위에서 언급한 좋은 프로그램을 사용해서 좀더 효과적으로 작업을 하면 된다는 것 쯤이겠져... 태그까지 이해 하시게 되면 그때는 JAVA에 관해 관심을 가지게 됩니다. 그때는 이미 HTML에 관해 많은 부분을 이해하고 있다는 증거가 아닐지...