고향이야기   해병144기전우회   뿌리찾아서   검색정보   포토앨범   시집글마당   연락통신메모

일삼동지회   자료마당  음악(Old Pops)   건강-암투병기   인라인스케이트  강변자전거대행진

태그의 정리표 [ALL]  색상표

형 식

구 성

내 용

문서의 기본 구조를 나타내 주는 태그

<HTML>

<HTML>...</HTML>

HTML 언어로 작성되어 있다는 것을 알려줍니다.

<HEAD>

<HEAD>...</HEAD>

Heading의 준말로 글의 머리말에 해당합니다.

<BODY>

<BODY>...</BODY>

본문에 해당하는 부분을 알려줍니다.

<TITLE>

<TITLE>...</TITLE>

타이틀바에 새겨질 글자를 정의합니다.

<Hn>

<Hn>...</Hn>

표제 부분에 들어갈 말을 정의합니다. 1~6까지의 숫자를 사용하고 숫자가 커질수록 표제는 작아집니다. 기본값은 H4입니다.

<!-...->

<!-주석내용->

주석을 달거나 잠시동안 이미지를 보이지 않게 할 때 사용합니다.

문단 혹은 줄을 바꾸는 태그

<P>

<P>

문단을 바꾸는 태그입니다. 줄바꿈과 동시에 줄을 띤 것같은 효과가 나타납니다.

<BR>

<BR>

문단을 바꾸는 태그입니다. 줄바꿈의 역할만을 수행합니다.

<PRE>

<PRE>...</PRE>

여백이나 줄간격 등을 고정시켜 주는 역할을 합니다.

글자의 크기를 마음대로 조절하는 태그

<FONT>

<FONT SIZE=n> ...</FONT>

글자의 크기를 마음대로 조절해 줍니다. 뒤의 숫자는 1~7이며 7이 가장 큰 크기입니다. 기본값은 3입니다.

선그리기 태그

<HR>

<HR ALIGN= WIDTH= SIZE=>

입체적인 선을 그려줍니다. ALIGN은 선의 정렬을, WIDTH는 선의 폭을, SIZE는 선의 높이를 정해줍니다.

이미지 맵을 처리하는 태그

<ISMAP>

<IMG SRC= "..." ISMAP>

이미지맵을 정의합니다.

<MAP>

<MAP NAME=...> ...</MAP>

넷스케이프2.0에서 이미지맵을 정의합니다.

목록을 정리해 주는 태그

<LI>

<UL>...</UL>

순서가 없는 목록으로 일반적인 나열을 말합니다.

<OL>...</OL>

순서가 있는 목록으로 위에서부터 번호를 매깁니다.

<MENU>...</MENU>

메뉴 목록으로 그리길지 않은 문장의 열거에 사용합니다.

<DIR>...</DIR>

디렉토리 목록으로 메뉴 목록보다 짧은 문장을 나열합니다,

<DL>...</DL>

정의 목록 태그입니다. <LI>가 아닌 <DT>와 <DD>를 사용합니다.

문서를 가운데로 정렬시켜 주는 태그

<CENTER>

<CENTER>... </CENTER>

전체 문장을 가운데로 정렬시켜 줍니다.

인용하기 태그

<BLOCKQUOTE>

<BLOCKQUOTE>... </BLOCKQUOTE>

문장 내에서 인용을 할 경우 들여쓰기를 한 후 인용구로 처리합니다.

글자의 모양을 정의해 주는 태그

<STRONG>          

<STRONG>...</STRONG>

굵은 글씨를 나타내 주는 태그입니다.

<B>

<B>...</B>

<EM>

<EM>...</EM>

이탤릭체의 글씨를 나타내 주는 태그입니다.

<I>

<I>...</I>

<KBD>

<KBD>...</KBD>

타자기체의 글씨를 나타내 주는 태그입니다.

<CODE>

<CODE>...</CODE>

<TT>

<TT>...</TT>

배경 이미지 작업하기

<BODY>

<BODY BACKGROUND="...">

배경 이미지를 띄워줍니다.

<BODY BGCOLOR="#nnnnnn">

배경 색깔을 지정해 줍니다.

그밖의 태그들

<DFN>

<DFN>...</DFN>

정의되어지는 단어에 대한 것을 말합니다.

<CITE>

<CITE>...</CITE>

책이나 사진 등의 제목을 말할 때 쓰입니다.

<SAMP>

<SAMP>...</SAMP>

컴퓨터상에 메시지를 나탈낼 때 쓰입니다.

<VAR>

<VAR>...</VAR>

이탤릭체로 표현됩니다.

<SUB>

<SUB>...</SUB>

첨자에 관한 태그입니다.

<SUP>

<SUP>...</SUP>

윗첨자를 나타냅니다.

<BASEPOINT>

<BASEPOINT>... <BASEPOINT>

기본적으로 미리 약속된 크기를 다시 정할 때 사용합니다.

부분을 강조해 주는 태그

<BLINK>

<BLINK>...</BLINK>

글자를 깜박이게 해줍니다.

<U>

<U>...</U>

글자에 밑줄을 그어줍니다.

연결하기 태그

<A>

<A HREF="...">...</A>

다른 홈페이지와 연결시켜 줍니다.

<A NAME="...">...</A>

자신의 홈페이지 내에서 연결해 줍니다.

주소 및 편지 서비스

<ADDRESS>

<ADDRESS>... </ADDRESS>

주소에 대한 정의를 내려줍니다.

<MAILTO>

<A HREF="MAILTO...">

편지쓰기 창을 띄워 줍니다.

색상 지정하기

<BODY>

<BODY TEXT= "#nnnnnn">...</BODY>

글자색을 지정합니다.

<BODY LINK= "#nnnnnn">...</BODY>

하이퍼링크의 색을 지정합니다.

<BODY VLINK= "#nnnnnn">...</BODY>

한 번 누른적이 있는 하이퍼링크의 색을 지정합니다.

<BODY ALINK= "#nnnnnn">...</BODY>

누르고 있는 동안의 색을 지정합니다.

표 만들기 태그

<TABLE>

<TABLE BORDER>... </TABLE>

표의 전체 형식을 나타냅니다.

<TR><TD></TD></TR>

표 내부에 들어갈 형식을 정의합니다.

<TD COLSPAN=n>

가로칸을 n만큼 합쳐줍니다.

<TD ROWSPAN=n>

세로칸을 n만큼 합쳐줍니다.

<TD ALIGN=...>

표안의 좌우 정렬 방식을 정의합니다.

<TD VALIGN=...>

표안의 상하 정렬 방식을 정의합니다.

문서를 임의로 고정시키는 태그

<NOBR>

<NOBR>...</NOBR>

화면 크기에 따라 문단이 바뀌는 것을 방지합니다.

<WBR>

<WBR>...</WBR>

위의 태그 안에서 문단을 바꿀 때 사용합니다.

CGI 양식 첨가하기

<FORM>

<FORM>...</FORM>

양식을 정의합니다.

<FORM METHOD="..." ACTION="...">

양식의 방법을 정의합니다.

<TEXTAREA>

<TEXTAREA NAME="..." ROWS="...">

글틀 상자를 정의합니다.

<INPUT>

<INPUT TYPE="...">

어떤 형태로 입력할 것인지를 정의합니다.

<INPUT TYPE="RADIO">

라디오 단추를 만들어줍니다.

<INPUT TYPE= "CHECKBOX">

체크 상자를 만들어 줍니다.

<INPUT TYPE= "SUBMIT">

제출 버튼을 만들어 줍니다.

<INPUT TYPE="RESET">

취소 버튼을 만들어 줍니다.

<SELECT>

<SELECT NAME="...">

선택 사항 상자를 만들어 줍니다.

창만들기 태그

<FRAME>

<FRAMESET>... </FRAMESET>

창의 기본 틀을 지정합니다.

<FRAMESET ROW= "숫자 혹은 %">

위 아래로 나눠줍니다.

<FRAMESET COLS= "숫자 혹은 %">

좌우로 나눠줍니다.

<FRAME SRC="..." MARGINWIDTH="...">

창에 들어갈 좌우 여백을 정의합니다.

<FRAME SRC="..." MARGINHEIGHT="...">

창에 들어갈 상하 여백을 정의합니다.

<FRAME SCROLLING= "...>

스크롤바를 설정해 줍니다.

<NOFRAMES>... </NOFRAMES>

프레임이 안보이게 해줍니다.

이미지 다루기에 필요한 태그

<IMG>

<IMG SRC="...">

이미지를 정의해 줍니다.

<IMG SRC="..." ALIGN=...>

이미지의 정렬 상태를 나타내 줍니다.

<IMG SRC="..." WIDTH="..." HEIGHT="...">

이미지의 크기를 조절해 줍니다.

<IMG SRC="..." LOWSRC="...">

이미지를 JPEG파일로 나타내 줍니다.

<IMG SRC="..." VSPACE= HSPACE=>

이미지의 여백을 조절해 줍니다.

<IMG SRC="..." BORDER="...">

이미지의 태두리선을 조절합니다.

<IMG SRC="..." ALT="...">

이미지가 전송되지 않았을 경우에 글자로 대처해 줍니다.

문자태그

  • 문자를 이뿌게~ 만드는 태그들입니다.
    시작태그와 끝 태그가 필요합니다.


    <hx>문자</hx>   x : 1~6

    ex) <h4>제목:HTML tag 연습</h4>

    제목:HTML tag 연습

  • 단락의 제목을 쓸때 사용하죠..
    h1 부터 h6까지 있습니다. 숫자가 클수록 글씨는 작습니다.

    <address>문자</address>
    주소를 표시하고 싶을때 쓰는 건데, 사실 많이 쓰이진 않는 것 같습니다.
    ex) <address>767-1 sanggeadong nowongu seoul korea</address>
    ex) <address>서울시 노원구 상계동 767-1</address>

    <b>문자</b> : Bold ,. 글씨체를 굵게 합니다.
        <b>문자 모양 연습중</b> -> 문자 모양 연습중

    <i>문자</i> : italic ,. 글씨를 이텔릭체로 보여줍니다.
        <i>문자 모양 연습중</i> -> 문자 모양 연습중

    <u>문자</u> : UnderLine ,. 글씨에 밑줄을 그어줍니다.
        <u>문자 모양 연습중</u> -> 문자 모양 연습중

    <strike>문자</strike> : strike-through ,. 글씨에 가운데줄을 그어줍니다.
        <strike>문자 모양 연습중</strike> -> 문자 모양 연습중

    <big>문자</big> : large-font ,. 글씨 크기를 크게 해줍니다.
        <big>문자 모양 연습중</big> ->
    문자 모양 연습중

    <tt>문자</tt> : large-font ,. 타자체로 보여줍니다. courier체.
        <tt>문자 모양 연습중</tt> -> 문자 모양 연습중

    <small>문자</small> : small-font ,. 글씨 크기를 작게 해줍니다.
        <small>문자 모양 연습중</small> ->
    문자 모양 연습중

    <sub>문자</sub> : subscript style ,. 아래첨자를 쓸때 사용합니다.
        문자 모양<sub>연습중</sub> -> 문자 모양연습중

    <sup>문자</sup> : superscript style ,. 위 첨자를 쓸때 사용합니다.
        문자 모양<sup>연습중</sup> -> 문자 모양연습중

    <em>문자</em> : empasized text ,. 문자를 강조, 이텔릭체로 보여집니다.
        <em>문자 모양 연습중</em> -> 문자 모양 연습중

    <strong>문자</strong> : strong ,. 문자를 강조, 굵은 글씨로 보여집니다.
        <strong>문자 모양 연습중</strong> -> 문자 모양 연습중

    <dfn>문자</dfn> : defining instance ,. 정의되어지는 단어.
        <dfn>문자 모양 연습중</dfn> -> 문자 모양 연습중

    <code>문자</code> : program code ,. 프로그램 코드 보여줌. Courier체.
        <code>문자 모양 연습중 Courier</code> -> 문자 모양 연습중 Courier

    <samp>문자</samp> : sample output ,. 프로그램,스크립트의 출력 셈플.
        <samp>문자 모양 연습중 Courier</samp> -> 문자 모양 연습중 Courier

    <kbd>문자</kbd> : keyboard ,. 사용자입력 문자. Courier체.
        <kbd>문자 모양 연습중 Courier</kbd> -> 문자 모양 연습중 Courier

    <var>문자</var> : variables ,. 명렁주기위한 변수나 인수표현. 이텔릭체.
        <var>문자 모양 연습중 </var> -> 문자 모양 연습중

    <cite>문자</cite> : cite ,. 인용문등의 제목을 쓸때. 이텔릭체.
        <cite>문자 모양 연습중 </cite> -> 문자 모양 연습중
  • <font>문자</font> 태그에 대해 알아 보겠습니다.

    여러 태그들이 있지만 결국 같은 효과를 보이는 것이 많죠.
  • 태그

    설명

    <i>문자</i>
    <em>문자</em>
    <dfn>문자</dfn>
    <var>문자</var>
    <cite>문자</cite>

    결국은 이텍릭체네~!

    /* 왜 여러가지 태그가 있을까..
    보여지는 것은 같아도 소스를 분석할때
    나름대로 편리성이 있기 때문으로 보인다.*/

    <b>문자</b>
    <strong>문자</strong>

    글씨체가 굵게 표현.

    <tt>문자</tt>
    <code>문자</code>
    <samp>문자</samp>
    <kbd>문자</kbd>

    타자체. courier체로 표현.

    <u>문자</u>
    <big>문자</big>
    <small>문자</small>
    <sub>문자</sub>
    <sup>문자</sup>

    기타 나름대로의(?)태그들.


  • <font>문자</font>
    글씨 크기와 색, 글꼴을 바꿀 수 있습니다.

    속성(attribute)들이 있습니다. - (size, color, face)
    태그 안에 들어가는 거죠.
    예를 보면 금방 알수 있죠.

    <font size=2 color=blue face=굴림체>문자</font> ->  
    문자
    <font size=4 color=red face=궁서체>문자</font> ->  
    문자

    size 는 1부터 6까지 있으며 6이 가장 큰 글씨크기를 보여줍니다.

    color 는 영문으로 쓰는 것과, 숫자(16진수)로 쓰는 것이 있습니다.
    영어로 쓰는경우는 컬러명&16진컬러메뉴를 참고하시면 되겠구요
    16진수로 사용할 경우 원리는 다음과 같습니다.
  • 6자리 수를 사용합니다.
    #xxxxxx 앞쪽에 수(Number)를 뜻하는 #기호를 넣습니다.
    생략도 가능합니다.
    RGB컬러의 개념입니다.
    6자리수를 2자리씩 나눠서 앞자리부터 Red Green Blue의 값을 줍니다.
    각 2자리 수는 16진수 이며, 00 ~ FF의 값을 갖게 되죠.
    예를 들어 #000000이면 세가지 색이 모두 없으므로 검정색입니다.
    또 #0000FF 이면 파란색만 값이 최대이므로 파란색이 됩니다.
    또 #FF00FF 이면 파란색과 빨간색의 값이 최대이므로 보라색이 됩니다.

    누가 이렇게 16진수로 계산해 가며 그 수많은 조합을 이용하겠습니까?
    어렵구요,.. 쉽게 사용할수 있는 에디터를 이용하는 방법을 쓰죠..
  • face 는 글꼴인데, 보는 사람 컴퓨터에 글꼴이 있어야 보여집니다.
    그러므로 자신이 갖고 있는 이쁜 폰트를 쓴다고 해서 반드시 보는 사람이 볼수 있는 것은 아니라는 얘깁니다.

링크태그

  • HTMLHyperText Markup Language 의 약자이다.
    그렇다면 Hypertext (하이퍼텍스트)는 무었을 말하는가?

    :: 특정 데이터 항목이 다른 문서와 링크 관계를 가지고 있는 문서를 가리킴.
    (하나의 문서에서 특정 항목(부분)을 선택하면 그와 관련된 문서로 연결되어 계속 정보를 볼 수 있다.) - 출처 :
    인터넷 용어사전
  •  

    왼쪽의 예를 보면, A문서에서 항목을 선택하면 B문서로 연결되는 것을 알수 있다.
    B문서에 해당하는 것이 반드시 html 파일이어야 하는 것은 아니다. 그림파일, 워드파일, 텍스트파일 등과 URL 그리고 cgi등의 프로그램 들이 가능하다.
    또, 현재 문서 내부에서 연결도 가능하다.

    A문서

    B문서


  • <a> </a> 태그
    속성 : href="URL" target="윈도우의 예약명"
  • HTML소스

    결과

    <a href="link_test.htm">링크하기</a>

    링크하기

    <a href="tomcat_04.gif">비행기</a>

    비행기

    <a href="tomcat_04.gif">
    <img src="air.gif">
    </a>

    <a href="tomcat_04.gif">
    <img src="air.gif" border=0>
    </a>

    단순히 다른 html파일을 링크하거나, 그림파일을 링크하구요, 링크 자체에 이미지를 쓰기도 합니다. 이미지에 링크를 할경우 border=0를 써주면 테두리가 없어지죠.

     

    <a href="mailto:mjlim20@hanmail.net">
    메일보내기
    </a>

    메일보내기 

    사용자의 컴퓨터에 메일보내기 프로그램이 실행되면서 해당주소로 메일을 보내게 해줍니다.

     

  • target

    윈도우의 예약명

    설명

    _blank

    새로운 창을 만들어서 해당 링크를 불러옵니다.

    _self

    현재 활성화 되어있는 창에 불러옵니다.

    _parent

    상위(부모) 프레임셋에 불러옵니다.

    _top

    현재 창 전체에(프레임있을경우) 불러옵니다.

프레임 태그

  • 예제 1
  • left (left_01.htm) right (right_01.htm)
  • 소스를 살펴 볼면..
  • left_01.htm 소스 right_01.htm 소스
    <html><head></head>
    <body>
    왼쪽프레임에 들어갈 문서입니다.
    </body>
    </html>
    <html><head></head>
    <body>
    오른쪽 프레임에는 ...
    </body>
    </html>
  • 그리고, 프레임 지정 문서의 소스.. frame_01.htm 이라고 하자.
  • frame_01.htm 소스
    <html><head></head>

    <frameset cols="30%,70%">
        <frame src="left_01.htm" name="left">
        <frame src="right_01.htm" name="right">
    </frameset>

    </html>

  • <frameset> 태그의 cols 속성을 사용하고 있죠~! 좌우로 나눔을 뜻하구요.
    "30%,70%" 라고 쓴 것은 두개로 나누고, 각각 30%, 70%의 폭(cols 이니까)을 갖도록 지정해 주는 것이다.
    <frameset> 태그 안에는 두개의 <frame> 태그가 있는데 순서대로 30% 폭에 left_01.htm 문서가 들어가고,
    70% 폭에 right_01.htm 문서가 들어간다.
    그리고 각 프레임 태그의 name속성에 따라 frame은 자신의 이름을 갖게 된다.
    name속성은 링크의 target 속성의 값에 쓰고, 자바스크립트에서도 쓰이게 된다.
  • 예제 2
  • top (top_01.htm)
    down (down_01.htm)  
  • 소스를 보자..
  • top_01.htm 소스 down_01.htm 소스
    <html><head></head>
    <body>
    위쪽 프레임에 들어간다.
    </body>
    </html>
    <html><head></head>
    <body>
    아래쪽에 들어간다.
    </body>
    </html>
  • 프레임 지정 문서의 소스.. frame_02.htm 이라고 하자.
  • frame_02.htm 소스
    <html><head></head>

    <frameset rows="50,*">
        <frame src="top_01.htm" name="top">
        <frame src="down_01.htm" name="down">
    </frameset>

    </html>

  • <frameset> 태그의 rows 속성 - 상하로 나눔이죠.
    "50,*"이라고 썼다. 50은 픽셀 단위이다. %를 쓰지 않았다.
    * 은 나머지란 뜻이다.
    그러니까, top_01.htm은 50픽셀의 높이(rows이니까)를 갖고,
    down_01.htm은 나머지 공간을 모두 갖는 것이다.
  • top (top_01.htm)
    left (left_01.htm) right (right_01.htm)
  • 이전 예제의 소스를 그대로 사용한다..

  • top_01.htm 소스
    <html><head></head>
    <body>
    위쪽 프레임에 들어간다.
    </body>
    </html>
  • left_01.htm 소스 right_01.htm 소스
    <html><head></head>
    <body>
    왼쪽프레임에 들어갈 문서입니다.
    </body>
    </html>
    <html><head></head>
    <body>
    오른쪽 프레임에는 ...
    </body>
    </html>
  • rame_03.htm 으로 프레임 지정을 한다.

  • frame_03.htm 소스
    <html><head></head>
    <frameset rows="*,3*">

        <frame src="top_01.htm" name="top">

        <frameset cols="*,4*">
          <frame src="left_01.htm" name="left">
          <frame src="right_01.htm" name="right">
        </frameset>

    </frameset>
    </html>

  • rows="*,3*" 이건 머쥐?      * 이 1이란 값이면 3* 은 그 세배가 된다.
    총 4개의 일정한 폭이 있다면, *은 1개의 폭을 3*은 3개의 폭을 갖게 된다.
    프레임의 공간을 나누는 세가지를 모두 알아보았다. ( % , 픽셀 , * )

    <frameset> 이 다중으로 쓰였는데, 잘 살펴보기 바란다.
    첫번째 <frameset>을 보면 rows="*,3*" 에서 * 에 해당하는 프레임이 바로 밑에 따라온다. 그리고, 3* 에 해당하는 프레임이 그 밑에 따라오게 되고, 이 프레임은 좌우로 나누기위해서 또 하나의 프레임셋으로 대체하고 있다.

테이블 태그

    테이블..(표) ~! 이보다 더 중요할순 없다... ^^;
    HTML중에 중요도가 높다고 볼수 있는 태그입니다.
    잘 활용해야 좋은 홈을 만들수 가 있답니다. 

    그러나 복잡한 구조의 테이블은 브라우저가 해석할때 약간의 시간을 더 소모하게 됩니다.

    ★  소스 #1

    <table border=1>
      <tr>
        <td>test</td>
      </tr>
    </table>

    ※  결과 #1

    test
    ★  소스 #2

    <table border=1>
      <tr>
        <td>test</td>
        <td>test</td>
      </tr>
    </table>

    ※  결과 #2

    test test
    ★  소스 #3

    <table border=1>
      <tr>
        <td>test</td>
        <td>test</td>
      </tr>
      <tr>
        <td>test</td>
        <td>test</td>
      </tr>
    </table>

    ※  결과 #3

    test test
    test test

    표는 <table>로 시작해서 </table>로 끝납니다.
    <tr> </tr>, <td> </td>태그는 그 안에 있습니다.
    <tr> 는 (Table Row) 테이블의 한 행(줄)을 말합니다.
    그러므로, <tr> </tr> 이 여러개 일수록 이 늘어가는 거죠.
    <td> 는 (Table Data) 테이블의 한 열(칸,셀)을 말합니다.

    테이블의 속성을 알아보겠습니다. 역쉬~ 중요하죠..
    table의 속성 -> (border, width, height, align, cellpadding, cellspacing)

  • ★  소스 #1

    ※  결과 #1

    1: <table border=10 width=100 height=50 align=right>
    2:   <tr>
    3:     <td>test</td>
    4:     <td>test</td>
    5:   </tr>
    6: </table>
    test test

    먼저 border=10 , - 한눈에 알수 있겠죠?
    border=0로 한다면 테두리는 눈씻고 찾아봐도 볼수 없습니다.
    폭과 너비를 지정해 주는 width와 height어려운 건 없구요,
    단지 단위가 픽셀(pixel)이거나 퍼센트(persent)인것을 기억하세요.
    그리고, align 속성은 역시 left, center, right가 있습니다.
    * 1: 2: 3: ... 숫자는 임의로 붙여놓은 것으로 소스와는 상관이없음.

  •   소스 #2

    ※   결과 #2

    1: <table border=1 width=100 align=center>
    2:   <tr>
    3:     <td width=30 height=50>test</td>
    4:     <td width=70>test</td>
    5:   </tr>
    6: </table>
    test test

    3번 4번라인 <td>태그를 보면 width, height 속성이 쓰였다.
    테이블 전체 폭은 100픽셀(1번라인)이고, 두개로 나뉘어진 칸은 각각 30pixel, 70pixel 이 되었다.
    그리고, 해당 칸에서, height속성을 써서 칸이 속해있는 줄(행)의 높이를 정해 주었다. 물론, <tr>태그에서도 가능하다.

    ★   소스 #3

    ※   결과 #3

    1: <table border=1 cellpadding=5>
    2:   <tr>
    3:     <td>test</td>
    4:     <td>test</td>
    5:   </tr>
    6: </table>
    test test
     
    1: <table border=1 cellpadding=0>
    2:   <tr>
    3:     <td>test</td>
    4:     <td>test</td>
    5:   </tr>
    6: </table>
    test test

    각 1번 라인의 cellpadding 값이 차이가 있다.
    cellpadding 속성은 각 셀(칸)의 텍스트(글씨)와 테두리(border)사이의 간격을 픽셀단위로 여백을 주는 것이다.

  • ★   소스 #4

    ※   결과 #4

    1: <table border=1 cellpadding=2 cellspacing=0>
    2:   <tr>
    3:     <td>test</td>
    4:     <td>test</td>
    5:   </tr>
    6: </table>
    test test
     
    1: <table border=1 cellpadding=2 cellspacing=6>
    2:   <tr>
    3:     <td>test</td>
    4:     <td>test</td>
    5:   </tr>
    6: </table>
    test test

    <table border="1" cellpadding="0" cellspacing="0" bgcolor="#dda0dd" bordercolordark="0000cd" bordercolorlight="#9370db" width="79">

    <td style="cursor:hand;" width="75" bgcolor="#999999" onmouseover=this.style.backgroundColor="#da55d3" onmouseout=this.style.backgroundColor="" bordercolordark=white bordercolorlight=gray>

    <p align="center"><a href="index.html"><span style="font-size:10pt;"><font color="white">홈으로</font></span></a></table>

    홈으로

    이번에는 각 1번 라인의 cellspacing 값이다.
    cellspacing 속성은 각 셀(칸) 간의 거리를 픽셀단위로 주어 간격을 넓히고 줄이는 것이다.

    --------------start------------

  • 영상쓰기 샘플
  • 여기에 제목을 쓰세요
    이름
    (right)
    마우스 오른쪽 버튼 누르신 후에 모두선택을 하시면
    
    전체블록으로 지정됩니다.
    
    지정된후  delete키를 누르시면 모두 지워집니다 
    
    글을 넣으실때 글과 글 사이만 엔터를 쳐서 띄워주세요.
    
    글이 올라갈때 자동으로 넓게 떨어집니다
    
    줄과 줄 사이를 띄워주지 않으면 나란히 올라갑니다
    
    결과보기 새창 아래에 태그가 생성됩니다.
    
    태그를 복사하신후 해당게시판이나 메모장에 붙여넣기하시면
    
    영상시가 출력됩니다.

태그의 기본

  •    <bgsound src="음악주소">
       
    이 태그는 주로 홈페이지의 배경음악을 넣을 때 사용하는 태그인데요, 보통 midi파일을 사용합니다.
        mp3나 wav도 되긴 되는데요, 이 태그는 파일을 끝까지 다 다운로드 받은 다음에 재생이 되기 때문에
        홈페이지 열리는 시간이 오래 걸리겠져... 특히 모뎀사용자라면 죽음입니다. ㅡㅡ;
  •    <embed src="음악주소">
        bgsound 태그가 익스플러워 전용으로 만들어 진거라면 embed 태그는 네스케이프에서 음악을 재생시킬
        수 있도록 만들어진 태그입니다. 그런데 요즘은 익스플러워와 네스케이프 양쪽 다 잘 된답니다. embed
        태그는 배경음악보다는 직접 음악을 재생시킬 때 많이 사용됩니다. 주로 채팅방이 되겠죠^^ embed 태그의
        특징은 bgsound 태그와는 달리 파일을 다 다운받은 받은 다음에 재생하는 것이 아니라 다운로드와 동시에
        실시간으로 재생시켜주죠...^^ 또한 여러가지 속성이 따라 붙는데요...속성에 대해 설명 드리겠습니다.

       
        embed 태그 속성
         
    <embed src="음악주소" autostart=true/false hidden=true/false loop=true/false>
         뒤에 붙는 속성에 대해 보기쉽게 표로 설명해 드리겠습니다.
  • autostart=true/false

     true의 경우는 로딩이 되자마자 자동 실행 되구요, false는 반대죠.

    hidden=true/false

     true의 경우 음악조절판이 안보이구요, false일 때는 보이죠.

    loop=true/false

     true의 경우 무한반복, false는 한번만 반복입니다.

    width=수치 height=수치

     음악조절판의 높이밑 길이를 정하는 부분입니다.

  •    아래 표는 controls="제어판 옵션" 부분의 제어판 옵션 종류와 그에 맞는 최적의 width와 height의 수치를
       나타낸 것입니다.
  • 옵     션

    수    치

     all

     width="275" height="125"

     stopbutton

     width="35" height="25"

     playbutton

     width="35" height="25"

     controlpanel

     width="275" height="40"

     controlpanel, statusbar

     width="275" height="60"

     controlpanel, infovolumpanel

     width="275" height="105"

    <a href="리얼 음악주소" target="new">아무 글자</a>
      
    이 태그는 ra, ram 파일을 불러올때 사용되는 태그입니다. <a> 태그는 원래 링크태그인데 여기서는 ra, ram
      파일을 링크시키고 밑줄이 쳐진 글자를 클릭하면 리얼플레이어가 실행되면서 음악이 나오게 됩니다. 주로
      채팅방에서 많이 사용됩니다.
    <object src="음악주소">
      
    object 태그는 거의 사용하는 사람들이 별루 없는데요... 이것은 embed와 기능은 같은데 새로운 자바창이
      뜨면서 거기에 음악상태바나 동영상이 나타나게 됩니다.


marquee 태그

    ★  marquee   마퀴태그는 주로 대화방이나 게시판에서 많이 이용하는데요, 홈페이지에도 적당히 이용하면 효과를  보실수
      있을겁니다.
      ※
    마퀴태그의 기본사용법 : ( <marquee>내용</marquee>)
      한번 예제를 볼까요?^^ 아래를 보시죠^^

    내용 부분에는 아무거나 넣으시면 됩니다~
     
      내용부분에 txt밖에 못넣냐구여? 천만에~ 그림도 넣을 수 있구요, 링크도 가능하답니다.
      ※
    내용부분에 그림 사용법 : <marquee><img src="그림이 있는 주소"></marquee>
      마퀴태그가 이러한 속성만을 가진다면 많은 사람들이 그렇게 흔히 이용하지는 않을겁니다. 마퀴태그가  많이
      이용되는 것은 이외에도 여러 속성이 있기 때문이랍니다.

      ※
    속성1 :  <marquee behavior=scrol>내용</marquee>
        이건 기본속성으로 그냥 한쪽으로 흘러가는 속성입니다.
     
      ※
    속성2 :  <marquee behavior=slide>내용</marquee>
        이건 한번만 실행되고 멈추는 속성입니다. 말로는 설명이 어려우니까 아래 예를 보세요. 앗! 지금은
        왼쪽에 그냥 멈춰있을텐데... 만약 아래 예가 왼쪽에 멈춰있으면 Reload 해서 보세요~
     
    왼쪽으루 오다가 왼쪽 끝에서 멈추져?

      ※
    속성3 : <marquee behavior=alternate>내용</marquee>
        이 속성은 내용부분의 txt나 그림을 좌우로 왕복하게 해줍니다.

      왔다갔다 하져?

      ※
    속성4 :  <marquee
    scrolldelay="수치">내용</marquee>
        이 속성은 스크롤의 딜레이를 정해주는 속성으로 수치에 큰 수치를 넣을수록 스크롤 속도가 느려집니다.

      ※
    속성5 : <marquee scrollamount="수치">내용</marquee>
        이 속성은 scrolldelay와 반대로 수치가 클수록 스크롤이 빨라지는 속성입니다.

      ※ 속성6 : <marquee
    width="가로수치" height="세로수치">내용</marquee>
        이 속성은 스크롤이 이루어지는 영역을 나타내주는 속성입니다. 예는 속성7을 설명한 다음에 속성6과
        속성7을 동시에 적용시켜 보겠습니다.
     
      ※ 속성7 : <marquee bgcolor="색명/RGB색상코드">내용</marquee>
        이 속성은 스크롤이 적용될 바탕의 색깔을 정해주는 속성이네염. 그럼 속성6의 영역과 속성7의 색깔을
        동시에 적용한 아래 예제를 볼까요~
        아래 예제는 <marquee width="300" height="30" bgcolor="#ffff00"> 을 적용했습니다.

      와~ 노란색이다~ ^^;

      ※
    속성8 : <marquee direction="left,right,up,down">내용</marquee>
        이 속성은 스크롤되는 방향을 정해주는 속성입니다. 왼쪽(left),오른쪽(right),위(up),아래(down).
        마퀴태그의 응용은 간단합니다. 이제까지 나온 속성들을 연속해서 써주면 되는겁니다. 예를 들어서
        가로세로영역을 정하고, 위로올라가도록 하고, 배경색깔을 정한다음, 스크롤 속도를 정해줘볼까요?
        <marquee width="300" height="100" direction="up" bgcolor="#ffff00" scrolldelay="120">으루 적용하면
        아래와 같이 됩니다.

      어때요? 이렇게 응용하는겁니다. 간단하죠? ^^
    ▷▶응 용 하 기◀◁ ※ 응용1 : 그렇다면 마퀴태그를 두 번 겹쳐서 사용하면 어떻게 될까요?
       <marquee behavior="alternate" width="300" height="150"><marquee align="center" behavior="alternate"
       direction="up" width="200" height="150">어때요? 잼있죠? ^^</marquee></marquee> 이렇게용~ 아래와 같이 됩니다.

      어때요? 잼있죠? ^^


     ※ 응용2 : 가로세로 크기와 반복, 그리고 scrollamount를 적절히 활용해서 반짝이는 문자를 만들 수 있습니다.
       <marquee behavior=alternate width=720 scrollamount=720> 문자가 깜빡깜빡 거리네염~^^
       </marquee>   이렇게 하면 아래와 같이 됩니다.

    문자가 깜빡깜빡 거리네염~ ^^




     이상 문자를 움직이게 하는 효과인 marquee에 관한 내용이었습니다.

이미지태그

  • 이미지 태그
       
    이미지 태그는 홈페이지를 만들 때나 혹은 채팅방에서 이용할 수 있는 필수적인 태그입니다. 필수 태그인
       만큼 아주 기본적인 태그라고 할 수 있습니다. 이미지를 불러오는 태그와 배경그림넣는 태그를 다룰텐데요,
       이 두가지만 알면 이미지 태그는 다배운거나 마찬가지에염. 그럼 시작해 볼까요? ^^
  •   ※ 그림을 불러오는 태그
        
    기본형은 오른쪽과 같습니다.  
    <img src="그림 주소">
  • 속   성

    기    능

     width="수치"

     이미지의 너비를 조정해주는 속성입니다.

     height="수치"

     이미지의 높이를 조정해주는 속성입니다.

     border="수치"

     이미지의 테두리 두께를 조정하는 속성입니다. 수치가 "0"이면 테두리가 나타나지 않구요, "1"일 때부터 나타납니다.

     hspace="수치"

     이미지의 가로 공간을 주는 속성입니다.

     vspace="수치"

     이미지의 세로 공간을 주는 속성입니다.

  •     보통 우리가 웹페이지에 그림하나를 넣으면 그림 옆에는 텍스트가 한줄밖에 못들어가죠? 그림이 한줄을
        잡아먹기 때문이죠. 그래서 hspace와 vspace속성을 사용하는 것입니다. 어떤 효과가 나타나는지 직접 해볼
        까요? 아래 표의 왼쪽과 오른쪽의 태그들을 한번씩 태그연습장에 붙여서 실행시켜 보세요. 그럼 위에서 말한
        각 속성들의 기능을 아실수 있을겁니다.
  • <img src="http://myhome.netsgo.com/a3okay/이미지/2001s-5.jpg">여기서는 이미지 옆으로 한줄밖에못들어 가는 것을 보실수 있을겁니다. 이렇게 되면 보기도 안좋고 웹페이지의 길이가 상당히 길어질 것입니다. <img src="http://myhome.netsgo.com/a3okay/이미지/2001s-5.jpg"border="1" hspace="5" vspace="3" align="left">그러나 여기를 보면 이미지 옆에 여러줄이 들어가고 왼쪽 경우보다 훨씬보기도 좋죠? 이렇게 부가적인 속성들을 알고있으면 이미지 태그를 보다 효과적으로 사용하실수 있답니다.
  • 배경그림넣기
        
    형태는 다음과 같습니다.
    <body background="이미지 주소">
        이 태그로 홈페이지 같은 곳의 배경에 그림을 넣을 수가 있는겁니다. 그럼 직접 해볼까요?       
     왼쪽에 종이 꾸겨놓은 이미지가 보이시죠? 이 이미지 주소를 "이미지 주소"란에 직접 넣고
     태그 연습장으로 연습해 보세요. 이미지 주소를 어떻게 아냐구요? 음... 그거 간단한데...
     그럼 여기서 이미지 주소 알아내는 법을 알려드릴께요. 인터넷 항해를 하다보면 그림이든
     뭐든 그것의 위치(주소)를 알고싶을 때가 있게됩니다. 그럴 때는요, 그게 그림이라면 그림
     위에 마우스 커서를 놓구요, 오른쪽 버튼을 누릅니다. 그러면 메뉴가 쫘~악 나오죠? 그 메뉴
     중에서 등록정보를 클릭하면 그 그림의 주소, 즉 URL이 나오게 됩니다. 아시겠죠? 그러니
     제가 궂이 왼쪽의 그림 주소를 알려드릴 필요는 없겠죠? 이와같은 방법을 왼쪽의 이미지에
        사용하셔서요, URL이 나오면 그 URL을 마우스로 드래그 해서 복사하시구요, 위의 "이미지 주소"란에 넣으시
        면 되는겁니다. 해보세요!
        어때요? 구겨진 종이가 화면에 가득차죠? 그렇습니다. 왼쪽의 이미지는 제가 미관상 크기를 조금 줄여놓은
        것인데요, 원래 이미지 크기가 한 화면에 가득찰 정도로 큰건 아닙니다. 즉, 이미지의 크기에 상관없이 그 이
        미지가 바탕에 반복적으로 붙여지게 되는 것이죠. 아시겠죠?

        배경에 그림을 넣는 방법은 이것만 있는 것은 아닙니다. <style>태그를 사용할 수도 있답니다. 다음과 같이
        요.    
    <style>body{background:url('이미지주소')}</style>
        
    이 태그도 태그 연습장에 적용시켜 보시면 같은 기능을 한다는걸 쉽게 아실수 있을겁니다.
        
        이번에는 배경그림 넣는 태그의 신기한 속성을 보여드리죠. 이 속성은요, 화면을 스크롤해도 배경화면은 스크
        롤 되지 않는 속성입니다. 형태는 <body background="배경이미지주소" bgproperties="fixed">
        무슨 말인지 모르시겠다구요? 그럼 이 예제를 보세요.
    여기를 클릭하세요~
        어때요? 간단한 속성하나 붙여서 이렇게 신기한 것들도 만들 수 있답니다. ^^
  •    ※ 배경색 넣기
         
    이번에는 배경에 그림대신 색깔을 넣어볼까요?
         <body bgcolor=색명나 RGB코드>
    혹은 <style>body{background:색명;}</style>
        
    이것두 쉽죠? RGB코드가 궁금하세요? 여기를 클릭하세요~

 

문다과 선

    문단과 선.. 중요하죠.. ^^;
    <p>,<br>,<nobr>,<pre>,<blockquote>,<hr>,<center>

HTML소스

결과

문단태그 중요합니다.<p>정말입니다.

문단태그 중요합니다.

정말입니다.

<p align=left>왼쪽
<p align=center>가운데
<p align=right>오른쪽

왼쪽

가운데

오른쪽F

문단태그 중요합니다.<br>정말입니다.

문단태그 중요합니다.
정말입니다.

<nobr> ... <wbr> ... </nobr>

설명: <nobr> </nobr> 사이의 내용은 창의 크기에따라 줄바꿈이 일어나지 않는 효과를 줍니다.
하지만 <wbr>태그를 써서 줄바꿈을 할수 있죠.

텍스트        스페이스

<pre>
텍스트 스페이스를 그대로...
얼마나      머찜미까?</pre>

텍스트 스페이스

텍스트 스페이스를 그대로...
얼마나      머찜미까?

<blockquote>인용구문을 쓸때, 들여쓰기를 해주는 태그입니다.</blockquote>

인용구문을 쓸때, 들여쓰기를 해주는 태그입니다.

<center>문단을 가운데로 이~~뿌게 정렬해주죠. 가운데정렬~!</center>

문단을 가운데로 이~~뿌게 정렬해주죠. 가운데정렬~!

HTML소스

결과

<hr>


<hr size=4>


<hr size=4 noshade>


<hr size=2 noshade width=30%>


<hr size=2 noshade width=50% align=right>


<hr> 태그의 align속성값은 left, center, right 인거 아시죠?
noshade는 입체적인 모양을 없애줍니다.