본문 바로가기

AREA 1/HTML&CSS

HTML 태그 명령어 모음

HTML 태그 명령어 모음

 
 
 
문서의 기본 구조를 나타내 주는 태그
<HTML>
<HTML>...
HTML 언어로 작성되어 있다는 것을 알려줍니다.
<HEAD>
<HEAD>...
Heading의 준말로 글의 머리말에 해당합니다.
<BODY>
<BODY>...
본문에 해당하는 부분을 알려줍니다.
<TITLE>
<TITLE>...
타이틀바에 새겨질 글자를 정의합니다.
<Hn>
<Hn>...
표제 부분에 들어갈 말을 정의합니다. 1~6까지의 숫자를 사용하고 숫자가 커질수록 표제는 작아집니다. 기본값은 H4입니다.
<!-...->
<!-주석내용->
주석을 달거나 잠시동안 이미지를 보이지 않게 할 때 사용합니다.
문단 혹은 줄을 바꾸는 태그
<P>
<P>
문단을 바꾸는 태그입니다. 줄바꿈과 동시에 줄을 띤 것같은 효과가 나타납니다.
<BR>
<BR>
문단을 바꾸는 태그입니다. 줄바꿈의 역할만을 수행합니다.
<PRE>
<PRE>...
여백이나 줄간격 등을 고정시켜 주는 역할을 합니다.
글자의 크기를 마음대로 조절하는 태그
<FONT>
<FONT SIZE=n>
...
글자의 크기를 마음대로 조절해 줍니다. 뒤의 숫자는 1~7이며 7이 가장 큰 크기입니다. 기본값은 3입니다.
선그리기 태그
<HR>
<HR ALIGN=
WIDTH= SIZE=>
입체적인 선을 그려줍니다. ALIGN은 선의 정렬을, WIDTH는 선의 폭을, SIZE는 선의 높이를 정해줍니다.
이미지 맵을 처리하는 태그
<ISMAP>
<IMG SRC=
"..." ISMAP>
이미지맵을 정의합니다.
<MAP>
<MAP NAME=...>
...
넷스케이프2.0에서 이미지맵을 정의합니다.
목록을 정리해 주는 태그
<LI>
<UL>...
순서가 없는 목록으로 일반적인 나열을 말합니다.
<OL>...
순서가 있는 목록으로 위에서부터 번호를 매깁니다.
<MENU>...
메뉴 목록으로 그리길지 않은 문장의 열거에 사용합니다.
<DIR>...
디렉토리 목록으로 메뉴 목록보다 짧은 문장을 나열합니다,
<DL>...
정의 목록 태그입니다.
  • 가 아닌
    를 사용합니다.
  • 문서를 가운데로 정렬시켜 주는 태그
    <CENTER>
    <CENTER>...
    </CENTER>
    전체 문장을 가운데로 정렬시켜 줍니다.
    인용하기 태그
    <BLOCKQUOTE>
    <BLOCKQUOTE>...
    </BLOCKQUOTE>
    문장 내에서 인용을 할 경우 들여쓰기를 한 후 인용구로 처리합니다.

     
     
     
    글자의 모양을 정의해 주는 태그
    <STRONG>
    <STRONG>...
    굵은 글씨를 나타내 주는 태그입니다.
    <B>
    <B>...
    <EM>
    <EM>...
    이탤릭체의 글씨를 나타내 주는 태그입니다.
    <I>
    <I>...
    <KBD>
    <KBD>...
    타자기체의 글씨를 나타내 주는 태그입니다.
    <CODE>
    <CODE>...
    <TT>
    <TT>...
    배경 이미지 작업하기
    <BODY>
    <BODY
    BACKGROUND="...">
    배경 이미지를 띄워줍니다.
    <BODY
    BGCOLOR="#nnnnnn">
    배경 색깔을 지정해 줍니다.
    그밖의 태그들
    <DFN>
    <DFN>...
    정의되어지는 단어에 대한 것을 말합니다.
    <CITE>
    <CITE>...
    책이나 사진 등의 제목을 말할 때 쓰입니다.
    <SAMP>
    <SAMP>...
    컴퓨터상에 메시지를 나탈낼 때 쓰입니다.
    <VAR>
    <VAR>...
    이탤릭체로 표현됩니다.
    <SUB>
    <SUB>...
    첨자에 관한 태그입니다.
    <SUP>
    <SUP>...
    윗첨자를 나타냅니다.
    <BASEPOINT>
    <BASEPOINT>...
    <BASEPOINT>
    기본적으로 미리 약속된 크기를 다시 정할 때 사용합니다.
    부분을 강조해 주는 태그
    <BLINK>
    <BLINK>...
    글자를 깜박이게 해줍니다.
    <U>
    <U>...
    글자에 밑줄을 그어줍니다.
    연결하기 태그
    <A>
    <A HREF="...">
    ...
    다른 홈페이지와 연결시켜 줍니다.
    <A NAME="...">
    ...
    자신의 홈페이지 내에서 연결해 줍니다.
    주소  편지 서비스
    <ADDRESS>
    <ADDRESS>...
    </ADDRESS>
    주소에 대한 정의를 내려줍니다.
    <MAILTO>
    <A HREF="MAILTO...">
    편지쓰기 창을 띄워 줍니다.
    색상 지정하기
    <BODY>
    <BODY TEXT=
    "#nnnnnn">...
    글자색을 지정합니다.
    <BODY LINK=
    "#nnnnnn">...
    하이퍼링크의 색을 지정합니다.
    <BODY VLINK=
    "#nnnnnn">...
    한 번 누른적이 있는 하이퍼링크의 색을 지정합니다.
    <BODY ALINK=
    "#nnnnnn">...
    누르고 있는 동안의 색을 지정합니다.
     만들기 태그
    <TABLE>
    <TABLE BORDER>...
    </TABLE>
    표의 전체 형식을 나타냅니다.
    <TR>
    표 내부에 들어갈 형식을 정의합니다.
    <TD COLSPAN=n>
    가로칸을 n만큼 합쳐줍니다.
    <TD ROWSPAN=n>
    세로칸을 n만큼 합쳐줍니다.
    <TD ALIGN=...>
    표안의 좌우 정렬 방식을 정의합니다.
    <TD VALIGN=...>
    표안의 상하 정렬 방식을 정의합니다.


     
     
     
    문서를 임의고 고정시키는 태그
    <NOBR>
    <NOBR>...
    화면 크기에 따라 문단이 바뀌는 것을 방지합니다.
    <WBR>
    <WBR>...
    위의 태그 안에서 문단을 바꿀 때 사용합니다.
    CGI 양식 첨가하기
    <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="...">
    이미지가 전송되지 않았을 경우에 글자로 대처해 줍니다.
     
    &nbsp; : 띄어쓰기 , 띄어쓰기를 문장사이에 10번을 쳐도 1번만 된다. 이와같이 스페이스로 하는 띄어쓰기는 연속 한번만 가능하기 때문에 써준다.
     
    ※ ㅡ 음악태그 쉽게 이해하기
    음악 태그는 아래와 같습니다 

    <embed src= 음악 주소> 

    embed 는 음악을 삽입하라 라는 명령어 이지요 
    src 는 그 경로를 말하고요 


    여기에 몇가지가 추가될 수도 있습니다 

    첫번째, 음악을 자동으로 들을 것인가 수동으로 들을 것인가 

    a. 자동으로 들을려면.... autostart=true 
    b. 수동으로 들을려면.... autostart=false 

    두번째, 노래바를 감출 것인가 노출 시킬 것인가 

    a. 감출 경우..........hidden=true 
    b. 노출 시킬 경우.....width=100 height=20 
    (노래바의 크기임) 

    세번째, 한번만 들을 것인가,날 새도록 들을 것인가 

    a. 제한적으로 들을 때......loop=듣고 싶은 수 
    b. 날 새도록 듣고 싶을 때..loop=true 

    네번째, 통상적으로 볼륨은 0 으로 하세요 

    a. 볼륨.....volume=0 

    그러면 음악 태그를 다시 만들어 볼까요 

    *자동으로 듣고 노래바는 감추고 밤새도록 듣고 싶을 때 


    <embed src=음악주소 autostart=false hidden=true loop=true volume=0>
     

     
     

     

    ▶marquee: 왼쪽으로 움직이게 하는 명령어 
    ▶direction: 움직임의 방향을 결정 
    ▶scrollamount: 움직임의 속도결정(스크롤의 보폭) 
    ▶loop: 얼마만큼 반복해 줄것인가를 결정케함 
    ▶@: 글씨를 눕혀보이고자 할때 
    ▶behavior=alternate: 움직이다 멈춤을 결정케함 
    ▶width: 가로폭결정 
    ▶height: 세로폭결정 
    ▶font: 글꼴지정 
    ▶font size: 글씨 크기결정 
    ▶font color: 글씨 색 결정 
    ▶font face: 글씨체 결정 
    ▶background: 배경 그림 결정 
    ▶bgcolor: 바탕색 결정 
    ▶src: 경로/주소 
    ▶img: 그림삽입 
    ▶embed: 동영상,사운드 삽입 
    ▶align=top: 정렬 위로 
    ▶align=center: 정렬 중앙 
    ▶align=bottom: 정렬 아래 
    ▶br: 엔터 한번 효과 
    ▶p: 엔터 두번 효과 
    ▶(hr)..(/hr): 수평선 그리기 
    ▶(u)..(/u): 밑줄 긋기 
    ▶(b)..(/b): 굵은 글씨체 만들기 
    ▶(ol)..(/ol): 목록 태그 
    ▶(sub)..(/sub): 아래 첨자 
    ▶(sup)..(/sup): 윗 첨자 
    ▶(pre)..(/pre): 실제 그대로 브라우저 화면에 반응케함 
    ▶alt: 그림설명 
    ▶(table)..(/table): 표를 만들기 위한 태그 
    ▶border: 테두리 두께 결정 
    ▶(td)..(/td): 셀의 내용지정 
    ▶(tr)..(/tr): td를 사용할때 시작과 끝남 결정 
    ▶bordercolor: 테두리 색결정 
    ▶cellspacing: 셀과 테두리와의 간격 결정 
    ▶cellpadding: 셀과 셀에 입력된 데이터의 사이간결 결정 
    ▶rowspan: 세로줄을 합치게 함 
    ▶colspan: 가로줄을 합치게 함 
    ▶html: html문서의 시작 
    ▶head: html문서의 머리 
    ▶(title)..(/title): html문서의 제목과 끝 
    ▶(body)..(/body): html문서의 본문과 끝 
    ▶/html: html문서의 끝 
    ▶(a)..(/a): 하이퍼 텍스트 연결(링크) 
    ▶glow: 필터속성중의 하나 
    ▶shadow: 필터속성중의 하나 
    ▶alpha: 필터속성중의 하나 
    ▶glow: 필터속성중의 하나 
    ▶blur: 필터속성중의 하나 
    ▶wave: 필터속성중의 하나 
    ▶xray: 필터속성중의 하나 
    ▶invert: 필터속성중의 하나 
    ▶gray: 필터속성중의 하나 
    ▶(style=filter:fliph()).. (/span): 그림의 좌우바꾸기 
    ▶(span style=filter:fliph ();height:1px;)...(/span): 글씨의 좌우바꾸기 
    ▶(span style=filter:flipv();height:1px;): 글이나 그림 상하바꾸기 
    ▶bordercolorlight: 테두리의 위쪽모서리색 지정 
    ▶bordercolordark: 테두리의 아래쪽모서리색 지정 
    ▶(frameset)..(frameset): 프레임을 어떻게 나눌지 결정 
    ▶frameset cols: 창을 좌우로 나눔 결정 
    ▶frameset rows: 창을 상하로 나눔 결정 
    ▶(applet)..(/applet): 자바 애플릿 삽입 
    ▶(script)..(/script): 자바 스크립트 삽입