|
◈ 태그가뭔데? |
태그를 영어 사전에서 찾아보면 어떤 뜻이 나올까요...태그란건 안 나올 겁니다...하지만 인터넷은 태그가 있기에 가능했습니다...바로 이 태그가 뭘까요...말그대로 홈페이지를 움직이게 하는 걸 태그라고 하는 겁니다...약간 추상적이었나요? 홈페이지 만들때 태그를 사용한다는 것만 알고 계신다면 태그에 대해 한 반은 정복하셨다구 해도 과언은 아닙니다...지금 여러분께서 보고 있는 이 페이지도...태그로 이루어져 있습니다.
[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-bgsound...imgsrc...a href...b...marquee... 저렇게 많이 사용되는 태그도 몇 개 안됩니다...참고로 태그 위에 마우스를 갖다대시면 저기 열거한 태그의설명을 보실수 있습니다. 그외에 엄청나게 많은 태그들이 있는데...그 태그들은 '태그의기본기' -> '기초적인 태그 1,2,3' 에 매우 자세한 설명이 되어 있으니 참고하세요... 태그...꼭 외워야 하는가...그 많은 태그들을 꼭 외울 필요는 없습니다. 단 많이 사용되는 건 외우고 있어야겠져...채팅할때나...게시판에서 튀고싶을 때나...^^;; 그때 필요한게 태그입니다...잘 배워서 잘 사용하시구요...기초만 알면 태그는 아주아주 쉬우니 꼬옥 차근차근 배워서 태그고수 되시길 바랍니다...이홈페이지 쥔장인 저두 2년 전만 해도 태그 잘 하는 사람이 참으로 부러웠습니다...^^ 수많은 노력과 수련(?)을 하다 보니까 여기까지 오게 �네요^^ 여러분도 태그 열심히 배워 좋은 홈페이지도 한번 만들어 보시길 바랍니다... 태그는 메모장으로 직접 만들어서 홈페이지 형식으로 저장하면 브라우저에서 나름대로 분석을 거쳐 우리에게 보여주는 것이지요...메모장으로 만들던지 나모에서 만들던지 태그란거 문법만 맞으면 브라우저에서 지조때로 분석해서 보여줍니다...물론...요즘에 나오는 그런 멋진 홈피는...걍 태그만 써서 될 게 아니라 자바스크립트와 플래시, DHTML를 적당히 사용해야 합니다...또한 CGI를 통해 사람들과 더 많은 정보공유를 해야겠지요...그 기초가 바로 태그입니다...태그가 안된다면 자바스크립트고 플래시고 CGI고 거기에서 거기입니다...기초가 안되니 어떻게 더 위를 바라볼 수 있겠습니까...따라서 태그라는 것은 필수 불가결한 것입니다!! |
◈ 기초태그모음#1
태그이름 | HTML문서의 시작을 말한다. |
<HTML> | HTML문서의 시작과 끝을 나타낸다. |
예) | <HTML>......</HTML> |
태그이름 | HTML문서의 머리부분 |
<HEAD> | HTML문서의 머리부분으로 반드시 <TITLE>태그를 포함하여야 한다. |
예) | <HEAD><TITLE>.....</TITLE></HEAD> |
태그이름 | HTML문서의 제목 |
<TITLE> | HTML문서의 제목을 나타내는 것으로 브라우저의 상단 표시상태줄에 나오게 되는 문서의 제목을 나타낸다. |
예) | <TITLE>안녕하세요</TITLE> |
태그이름 | HTML문서의 몸통부분 |
<BODY> | HTML문서의 몸통부분이다. |
예) | <BODY>.......</BODY> |
태그이름 | 다음줄 넘기기 |
<BR> | 홈페이지를 만들때 가장 곤란을 당하는 경우가 한줄의 글을 쓴다음에 다음줄에 글을 쓰기가 어렵다는 것이다. 일반적인 워드프로세서는 ENTER키를 치면 되지만 HTML문서는 이러한 기능이 <BR>밖에는 없다. |
예) | 홈페이지를 만들어 봅시다.<BR> 홈페이지를<BR> 만들어<BR> 봅시다. |
결과) | 홈페이지를 만들어 봅시다. 홈페이지를 만들어 봅시다. |
태그이름 | 문단, 단락 |
<P> | <BR>은 한줄의 글쓰기를 끝낸다음 다음글을 쓸때 넘기는 것이다. 그러나 <P>의 경우에는 단락을 구분한다. 즉, 한줄을 띄우고 다음줄에 글을 쓰는 기능이다. 예를 보면 이해가 될것이다. |
예) | 한 단락을 띄워 보자.<P> 한 문단을 띄워 보자.<P> 한 줄을 띄워 보자.<P> |
결과) | 한 단락을 띄워 보자.
한 문단을 띄워 보자. 한 줄을 띄워 보자. |
글자체의 태그이름 | |
태그이름 | 글자체의 크기를 조절 |
<H숫자> | 글자체의 크기를 조절하는 기능을 가지고 있으며, 숫자에 따라 큰제목, 작은 제목등을 설정을 해 주면 된다. 1인 경우가 가장 크게 나오며 6까지 지원한다. |
예) | <H1>태그대학</H1> <H2>태그대학</H2> <H3>태그대학</H3> <H4>태그대학</H4> <H5>태그대학</H5> <H6>태그대학</H6> |
결과) | 태그대학태그대학태그대학태그대학태그대학태그대학 |
태그이름 | 굵게 표현하기 |
<B> | 글자를 강조하기 위해 이 태그를 쓴다. 주의해야 할 것은 반드시 </B>를 써주어야 한다. |
예) | 한글 : <B>가나다라마바</B> 영어 : <B>ABCDEF</B> 숫자 : <B>123456</B> |
결과) | 한글 : 가나다라마바 영어 : ABCDEF 숫자 : 123456 |
태그이름 | 굵게 표현하기 |
<STRONG> | 글자를 강조하기 위해 이 태그를 쓴다. 주의해야 할 것은 </STRONG>을 써주어야 한다. |
예) | 한글 : <STRONG>가나다라마바</STRONG> |
결과) | 한글 : 가나다라마바 |
태그이름 | 밑줄 긋기 |
<U> | 원하는 부분을 선택하여 밑줄을 긋는다. |
예) | 최강 태그 사이트 : <U>태그대학</U> |
결과) | 최강 태그 사이트 : 태그대학 |
태그이름 | 이태릭체 |
<I> | 원하는 부분을 선택하여 기울게(이태릭체)로 표현한다. |
예) | 최강 태그 사이트 : <I>태그대학</I> |
결과) | 최강 태그 사이트 : 태그대학 |
태그이름 | 기울여서 강조하기 |
<EM> | 원하는 부분을 선택하여 이태릭체와 굵게 표현하는 것이다. |
예) | 최강 태그 사이트 : <EM>태그대학</EM> |
결과) | 최강 태그 사이트 : 태그대학 |
태그이름 | 리스트화 하기 |
<UL><LI> | 일정한 항목이나 리스트같은 것을 표현할 경우에 씌인다. (번호로 매기지 않을 경우) |
예) | <UL> <LI> 최강 태그 사이트 : 태그대학</LI> <LI> 최강 태그 사이트 : 태그대학</LI> <LI> 최강 태그 사이트 : 태그대학</LI> </UL> |
결과) |
|
태그이름 | 리스트화 하기(번호) |
<OL><LI> | 위와 같은 기능을 하는 대신 점이 아닌 번호로 리스트화 하는 기능을 갖는다. |
예) | <OL> <LI>최강 태그 사이트 : 태그대학</LI> <LI>최강 태그 사이트 : 태그대학</LI> <LI>최강 태그 사이트 : 태그대학</LI> </OL> |
결과) |
|
태그이름 | 한칸 들여쓰기 |
<BLOCKQUOTE> | 한칸 들여쓰기 기능을 갖는다. |
예) | 이 예제는 한칸 들여쓰기를 보여줍니다. <BLOCKQUOTE> 이 예제는 한칸 들여쓰기를 보여줍니다.</BLOCKQUOTE> |
결과) | 이 예제는 한칸 들여쓰기를 보여줍니다.
|
태그이름 | 한칸 앞으로 나오게 하기 |
<BLOCKQUOTE> | 한칸 들여쓰기와 반대로 한칸 앞으로 나오게 한다. |
예) | <BLOCKQUOTE> <BLOCKQUOTE> 이 예제는 한칸 나오게 합니다. </BLOCKQUOTE> 이 예제는 한칸 나오게 합니다. </BLOCKQUOTE> |
결과) |
|
태그이름 | 글 가운데 줄긋기 (Strikethrough) |
<STRIKE> | 표현하고자 하는 글을 지정하고 가운데 줄을 긋는다. |
예) | <STRIKE>최강 태그 사이트 : 태그대학</STRIKE> |
결과) | |
태그이름 | 타자체 (Typewriter) |
<TT> | 타자체를 표현한다. 그러나 거의 표현이 잘 되지 않는다. |
예) | 최강 태그 사이트 : <TT>태그대학</TT> |
결과) | 최강 태그 사이트 : 태그대학 |
태그이름 | Citation |
<CITE> | 이태릭체와 비슷하나 인용문으로 쓰일때 사용된다. |
예) | 최강 태그 사이트 : <CITE>태그대학</CITE> |
결과) | 최강 태그 사이트 : 태그대학 |
태그이름 | SAMPLE |
<SAMP> | 컴퓨터의 상태표현으로 인용문으로 사용된다. |
예) | 최강 태그 사이트 : <SAMP>태그대학</SAMP> |
결과) | 최강 태그 사이트 : 태그대학 |
태그이름 | Definition |
<DFN> | 정의를 표현하고자 할때 씌인다. |
예) | 최강 태그 사이트 : <DFN>태그대학</DFN> |
결과) | 최강 태그 사이트 : 태그대학 |
태그이름 | Variable |
<VAR> | 변수를 표시할 때 씌인다. |
예) | 최강 태그 사이트 : <VAR>태그대학</VAR> |
결과) | 최강 태그 사이트 : 태그대학 |
태그이름 | Keyboard |
<KBD> | 사용자의 키보드에 의해서 입력되는 것을 표현하기 위해 사용된다. |
예) | 최강 태그 사이트 : <KBD>태그대학</KBD> |
결과) | 최강 태그 사이트 : 태그대학 |
태그이름 | Blink |
<BLINK> | 중요한 단어나 강조하고 싶은 단어를 깜박거리게 한다.(단 Nestcape만 지원한다.) |
예) | 최강 태그 사이트 : <BLINK>태그대학</BLINK> |
결과) | 최강 태그 사이트 : |
◈ 기초태그모음#2
태그이름 | 형식이 이미 지정된 문장을 표현하기 |
<PRE> | HTML문서를 작성하면서 가장 힘든것이 바로 지정한대로 표현하지 못한 어려움이 있다. |
예) | 하이테크 <PRE> 웹 사 이트를 창조 하 는 맨 든 사 람 들</PRE> |
결과) | 하이테크 웹 사 이트를 창조 하 는 맨 든 사 람 들 |
태그이름 | Superscript |
<SUP> | 윗첨자 |
예) | 하이테크 웹 <SUP>사이트를 창조하는</SUP> 고야넷 |
결과) | 하이테크 웹 사이트를 창조하는 고야넷 |
태그이름 | Subscript |
<SUB> | 아랫첨자 |
예) | 하이테크 웹<SUB>사이트를 창조하는</SUB> 고야넷 |
결과) | 하이테크 웹 사이트를 창조하는 고야넷 |
태그이름 | 사이띄개 |
HTML문서를 작성하는 것은 어찌보면 워드프로세서와 같다고 볼수 있다. 그러나 사이띄개를 할수 없는 불편함이 다소 많을 것이다. 아무리 스페이스키를 누른다고 막상 브라우저를 통해 볼경우에는 그렇게 보이질 않을 것이다. 이러한 현상은 모든 Space, Tab, Enter키를 1byte로 HTML문서가 인식하기 때문이다. 그래서 공백을 아무리 많이 주어도 브라우저에서는 인식하지 못한다. | |
예) | 하이테크 웹 사이트 를 창조하는 고야넷 |
결과) | 하이테크 웹 사이트 를 창조하는 고야넷 |
태그이름 | 글꼴을 표현한다. |
<FONT> | 글꼴, 모양을 달리 표현하고자 할때 다음과 같이 표현하면 된다. |
예) | <FONT COLOR=WHITE>색을 흰색으로 표현하기</FONT> <FONT SIZE=5>글자를 5로 키우기</FONT> <FONT TYPE=궁서체>글꼴을 궁서체로 표현하기</FONT> |
결과) | 색을 흰색으로 표현하기 글자를 5로 키우기 글꼴을 궁서체로 표현하기 |
위의 사항중에서 주의해야 할 것은 글꼴이다. 앞에서 언급한대로 브라우저가 지원하는 기본적인 글꼴이 없다면 표현하고자 하는 글꼴이 나오지 않을 경우가 있으므로 조심하여야 한다. 또한 색깔을 표현하고자 하는 경우가 있는데 이는 사용자가 가지고 있는 VGA카드와 연관이 있다. 지원하는 색의 Bit수가 높으면 거의 모든 색을 지원한다고 볼수 있다. 색을 표현하는 방식은 색의 이름을 직접 써넣어주어도 되고 아니면 RGB값을 써넣어주어도 된다. 즉, White라고 써 넣어도 되고 FFFFF값을 넣어주어도 된다. RGB값은 나중에 별도로 구분하여 색파레트로 표시하겠다. 맨 마지막 참고 페이지를 보면 나올 것이다. | |
태그이름 | 주소, 서명 입력(Address) |
<ADDRESS> | HTML문서내에 사용자의 주소 및 서명을 넣을때 사용하는데, E-Mail이나 주소를 넣어주면 된다. |
예) | <ADDRESS> Copyrightⓒ1998-1999 Manden. All rights reseverd<BR> Author Information : Pviper@unitel.co.kr<BR> Last Modfied Date : 1998. 9. 6 </ADDRESS> |
결과) |
Copyrightⓒ1998-1999 Manden. All rights reseverd Author Information : Pviper@unitel.co.kr Last Modfied Date : 1998. 9. 6 |
태그이름 | Horizontal Line |
<HR> | 홈페이지를 구경하다보면 간혹 중간에 줄이 그어져 있는 것을 볼것이다. 말그대로 수평선을 긋는 기능이다. |
예) | <hr> <hr size=6> <hr noshade width=50% > <hr width=50% color=Fuchia> <hr width=50 align=right> |
결과) |
|
태그이름 | 정렬하기-1 |
<CENTER> | 가운데 정렬 |
예) | <CENTER>가운데로 글자를 정렬합니다.</CENTER> |
결과) |
가운데로 글자를 정렬합니다. |
태그이름 | 정렬하기-2 |
<RIGHT> | 오른쪽정렬 |
예) | <RIGHT>오른쪽으로 글자를 정렬합니다.</RIGHT> |
결과) |
오른쪽으로 글자를 정렬합니다. |
태그이름 | 정렬하기-3 |
<REFT> | 왼쪽정렬하기 |
예) | <REFT>왼쪽으로 글자를 정렬합니다.</REFT> |
결과) |
왼쪽으로 글자를 정렬합니다. |
위 세가지 명령어는 글자뿐만아니라 HTML문서에 들어가는 모든 요소에 해당이 되는 사항이므로 잘 기억해 두는 것이 좋다. |
◈ 기초태그모음#3
태그이름 | 그림화일 집어 넣기 | |
<IMG> | HTML문서에 그림을 집어 넣을 때 쓰인다. | |
태그이름 | 이미지정보알기, 표현하기 | |
<ALT> | 그림파일에 커서를 가져다 대면 그림의 정보나 부가 설명을 할때 씌인다. | |
예) | <IMG SRC="test.jpg" ALT="ALT표현의 예입니다. 여기에다 여러가지 설명을 넣어주세요. 예) 저는 송윤아입니다. 안녕하세요. 즐거운 인터넷 생활을 즐기세요."> | |
태그이름 | 링크걸기 | |
<A HREF="...."></A> | HTML명령어 중에서 다소 비중을 차지하는 명령어이다. 바로 다른 HTML문서나 다른 페이지로 갈려고 할때 씌인다. 특정 그림이나 단어에 마우스를 가져다 대면 커서가 손가락모양으로 바뀌고 클릭을 하면 특정 페이지가 불러지는 기능을 말한다. 보통 Hyperlink또는 Anchor라고도 한다. | |
예) | <A HREF="http://www.yahoo.co.kr">이곳을 누르세요.</A>한국 야후가 나옵니다. | |
결과) | 이곳을 누르세요. 한국 야후가 나옵니다. | |
하이퍼링크의 기법은 무척이나 중요하다. 특히 정확한 URL을 써야 하며 마지막 태그인 </A>를 써주어야 한다. | ||
태그이름 | Table만들기 | |
<TABLE><TR><TD>...</TD></TR></TABLE> | 테이블 또한 무지 중요하다. 테이블 만들기장에서 자세히 다루기로 하고 여기선 간단한 예제만 살펴보기로 하자. | |
예) | <TABLE><TR><TD>테이블을 만들어봅시다.</TD></TR></TABLE> | |
결과) |
| |
태그이름 | Form만들기 | |
<FORM> | FORM만들기 정말 중요하다. 사용자 대화형 홈페이지를 만들기 위해서는 반드시 써야 한다. | |
예) | <FORM>....</FORM> |