■ HTML(Hyper Text Mark-up Language)

HTML 이란?

여기서 HTML 은 Mark-up Language 로서 문서에 태그(tag) 를 사용해서 명령을 실행 시키는 언어입니다.

태그는 HTML 문서에서 정해진 약속입니다. 이 약속을 지키지 않으면 올바른 형태의 문서를 볼 수가 없습니다.

HTML 언어는 정해진 태그를 써서 문서를 표현하는 언어이며, 임의로 다른 태그를 만들어서 사용할 수는 없습
니다.

HTML 언어의 태그들은 대부분이 시작되면 닫히게 되는데, 닫혀지지 않거나 오타가 나더라도 오류를 발생시
키지는 않지만, 화면상의 출력이 의도와는 다르게 나타날 수 있습니다.
따라서 오류부분을 발견하기가 쉽지 않습니다.

HTML 의 편집은 텍스트 편집기(메모장, 워드패드 등)나 웹에디터(나모,프론트페이지,드림위버 등)에서 가능
합니다.

HTML 은 대/소문자 구분이 없습니다.
즉, <HTML> 과 <html> 은 서로 동일한 태그입니다.

HTML 파일의 확장자는 .HTM 또는 .HTML 이 가능합니다.
확장자 .HTM은 DOS 환경에서 파일의 이름과 확장자가 각각 8, 3 으로 제한되기 때문에 이를 위해 지원합니다.

◈알아두기◈ HTML 에서 모든 태그는 대부분 이름과 속성, 그리고 그 속성에 해당하는 값을 가지게 됩니다.
예로)
<FONT COLOR="RED"> 내용 </FONT>
에서 FONT 는 태그의 이름, COLOR 는 속성, RED 는 COLOR 속성에 해당하는 속성 값입니다.

즉, 태그에 속성을 추가하면 그에 해당하는 결과를 얻을 수 있습니다.
그리고 마지막에는 태그를 닫아주어야 하는데, </FONT>처럼 태그의 이름 앞에 / 를 붙여서 닫아주면 됩니다.
대부분의 태그는 닫히는 태그가 있는데, 예외는 있습니다.

예로 <br>은 라인을 구분해주는 태그인데, 이 태그는 단지 다음 라인으로 이동하라는 명령이기 때문에 닫히는 태그
가 없습니다.
속성에 속성값을 부여할 때는 "=" 을 사용하는 것을 볼수가 있는데, 여기서 속성값을 부여할 때는 보통
따옴표(")를 묶어 줍니다. 이는 반드시 묶어주어야 하는 것은 아닌데, 단지 속성값에 공백(스페이스바)
이 있을 경우 반드시 묶어 주어야 합니다. 위에서 RED 에는 공백이 없기 때문에 무관합니다.

그리고 따옴표는 큰따옴표(") 와 작은 따옴표(') 의 구분은 없으며, 한벌( " " 또는 ' ' )로 되어 있으면 됩니다.

HTML 언어는 문법이 까다롭지 않기 때문에 정해진 형식을 지키지 않아도 대부분 허용이 됩니다.
예로 <FONT COLOR=RED><I> 붉은색의 이탤릭</FONT></I> 위에서 <FONT COLOR=RED><I> 붉은색의 이탤릭</I></FONT> 이 올바른 문법이지만 문제는 없습니다.

다음은 태그의 종류에 대해 알아 봅니다.

<HTML> : HTML 문서 형식으로 작성되었음을 나타냅니다.
<title> :브라우저의 제목 표시줄에 나타나는 말을 나타냅니다.
<head>: HTML문서의 설명을 나타냅니다.
<body>: 문서의 실제 내용부분을 나타냅니다.





HTML 문서의 기본구조(첫번째 예제)



<HTML>
 <HEAD>
  <TITLE>    브라우저의 타이틀바 내용 </TITLE>
  <META NAME="" CONTENT="" >
  <META HTTP-EQUIV="" CONTENT="" >  
 </HEAD>
 <BODY>
	브라우저 화면에 보이는 부분
 </BODY>
</HTML>

아래는 위의 실행결과입니다.

(1)문서의 헤더크기결정

<h1>부터<h6>의 6가지로 크기를 지정해줍니다.
<Hn> 태그는 블록태그로서 이 태그를 사용하면 새로운 문단(블록) 이 형성 됩니다.


예)
 <H1> H1 SIZE </H1>
 <H2> H2 SIZE </H2>
 <H3> H3 SIZE </H3>
 <H4> H4 SIZE </H4>
 <H5> H5 SIZE </H5>
 <H6> H6 SIZE </H6>

위의 실행 결과

H1 SIZE

H2 SIZE

H3 SIZE

H4 SIZE

H5 SIZE

H6 SIZE

(2)문자 크기와 색결정

<font size="n" color="색이름 또는 RGB값(#FFFFFF)" face="굴림">...</font>
(size 속성의 값 n 은 1 부터 7 까지 가능)

여기서 COLOR 의 속성값을 주는 방법은 크게 3가지가 있습니다.

COLOR에 속성값 부여하는 방법 1. 10 진수로 표기
예)<FONT COLOR=RGB(255,0,0)> RED </FONT>

2. 16 진수로 표기
예)<FONT COLOR=#FF0000> RED </FONT>

3. 영문으로 표기
예)<FONT COLOR=RED> RED </FONT>

위 3 가지 모두 RED 가 빨강색으로 나타나는데,
첫번째의 255는 RED 에 대한 할당값으로 255가 최대값입니다.
다음의 0 은 GREEN, 다음의 0 은 BLUE 로, 0 이면 최소값입니다.
두번째의 FF0000 에서 FF 는 RED, 다음의 00 은 GREEN, 다음의 00 은 BLUE 값에 대한 값으로,
FF 가 최대치, 00은 최소치 입니다.

예) <HTML> <HEAD> <TITLE> FONT 태그 사용</TITLE> </HEAD> <BODY> 태그 쓰지 않은 부분 <BR> <FONT> 태그에 속성을 부여하지 않은 부분</FONT> <BR> <FONT SIZE=3 COLOR=BLACK FACE=굴림> 태그에 속성을 부여한 부분 </FONT> <BR> <FONT SIZE=5 COLOR=OLIVE FACE=궁서> 태그에 속성을 부여한 부분 </FONT> </BODY> </HTML>

위의 실행 결과

(3) 문자 모양의 꾸미기

<strong> 1 문자를 진하게 </strong> <BR>
<b> 2 문자를 진하게 </b> <BR>
<em> 3 이탤릭체로 </em> <BR>
<I> 4 이탤릭체로 </I> <BR>
<cite> 5 자료를 인용할때 쓰이며 이탤릭체로 보여줌 </cite> <BR>
^^ <sup> 6 위첨자 </sup>^^ <BR>
^^ <sub> 7 아래첨자 </sub>^^ <BR>
<tt> 8 타자체로 </tt> <BR>
<code> 9프로그램코드를 보여줄 때 타자체로보여줌 </code> <BR>
<u> 10 밑줄 </U> <BR>
<small> 11 작게 </small> <BR>
<dfn> 12 타자기체로 </dfn> <BR>
<samp> 13 작은 글씨로 </samp> <BR>
<tt>14 태그</tt>까지 <font color=red>그대로</font> 출력 <BR>
<xmp> <tt>15 태그</tt>까지 <font color=red>그대로</font> 출력 </xmp>

위의 실행 결과

♠
<fieldset>....</fieldset> 박스상자를 생성
<legend>....</legend> fieldset 태그에서 박스의 제목 표시; align으로 위치지정(left,right,center)

예)

사용예<fieldset> <legend align="left"> 여긴 타이틀 </legend> 여기는 <br> 필드 <br> 셋 </fieldset>   

위의 실행 결과

(4)줄 바꾸기 및 문단 나누기

<BR> : 줄 바꾸기
<p>......</p> 또는<p>: 문단 나누기

(5)<PRE>태그

<PRE>......</PRE> : 이 태그 안에 있는 문장에서는 여백이나 줄 바꿈 등이 모드 유효하기 때문에 문장이
그대로 브라우저에 출력됩니다.

(6)가로선 긋기

<HR WIDTH=" 폭지정" SIZE="높이지정 " ALIGN="정렬방법 " COLOR="색상 " NOSHADE>

- 문서의 중간에 입체감있는 수평선을 그어 문단을 구분해주며 크기, 정렬 그리고 내부의 그림자들을
조정할 수 있습니다.

- 단순히 <HR> 태그만을 쓰면 기본적인 수평선이 그어집니다.
- WIDTH 에는 % 또는 픽셀단위를 지정할 수 있습니다.
- SIZE 도 마찬가지 %,픽셀단위가 가능합니다.
- ALIGN 에는 LEFT,RIGHT,CENTER 등이 쓰일 수 있습니다.

(7)주석문달기

(8)문서간의 연결

<A HREF="연결대상" target="문서를 열 대상프레임이나 창" title="링크설명">링크할 문자</A>

- target 속성은 문서를 열때 어떤 창에 여는지를 지정하고, title 속성은 링크에 대한 설명을 추가합니다.
(target 이 _blank 이면 새로운 창에, _selt 면 자신의 프레임에, _parent면 상위 프레임에, _top이면 최상위 프레임에,
그리고 직접 프레임의 이름을 지정할 수 도 있습니다.)
- HREF 에는 문서의 파일명, 또는 인터넷상의 URL 주소를 쓸 수 있습니다.

예)<a href="http://www.daum.net" target="_blank" title="다음넷으로 이동"> DAUM</a>

(9)문서내의 연결

<A HREF="#aa">주제 1</A>
....
....

<A NAME="aa">주제 1 의 내용</A>

즉, 주제 1을 클릭하면 주제 1의 내용이 있는 부분으로 이동하는데,
href 속성에는 #과 함께 <a name=""> 부분에서의 name 값(여기서는 aa)과 같은 값을 주면 됩니다.

(10)메일링크삽입

<ADDRESS>......</ADDRESS>
--실제로 별 의미는 없으며 이텔릭체로 표현이 되고, <A HREF="MAILTO:이메일 주소"> 태그와 함께쓰여서 클릭시 아웃룩
익스프레스를 실행시킬수 있습니다.

(11)HTML 문서에 그림넣기

<IMG SRC="파일이름" WIDTH="N" HEIGHT="N" BORDER="이미지테두리(N)" VSPACE="이미지의 위와 아래의 여백(N)" HSPACE="이미지의
왼쪽과 오른쪽의 여백(N)" ALIGN="정렬방식" ALT="마우스가 그림에 있을때의 그림설명">
예)
<img src=image/mouse.gif width=100 height=30 border=1 alt="미키마우스">

(12)그림에 링크 추가

(13)배경색,배경그림,배경음악 넣기

1. 배경그림,배경색

<BODY BACKGROUND="파일이름" BGCOLOR="색상정보" TEXT="색상정보" bgproperties="그림의 고정여부" >

- TEXT로는 문서의 글자색을 지정해줄 수 있습니다.
- BGCOLOR는 문서의 배경색,
- BACKGROUND 는 문서의 배경그림의 경로
- bgproperties는 그림의 고정여부로서 FIXED(고정) 또는 SCROLL(스크롤링) 이 쓰입니다.

2. 배경음악

<BGSOUND SRC="사운드 파일의 주소" LOOP="반복횟수")>

- LOOP 는 1,2 등 숫자를 쓸 수 있으며, infinite 를 쓰면 무한반복합니다.

(14)자동목록만들기

* 순서 없는 목록
<UL>......</UL>
...안에는 <LI>...</LI>가 들어가서 정렬시킬 수 있습니다.
<ul type=circle>또는 <ul type=square>와 같이 UL 태그 내에 타입을 추가하면 앞에 붙는 모양을 지정할 수도 있습니다.
( 기타 : square,disc,circle)

* 순서 있는 목록

<OL>......</OL>
...안에는 위와 마찬가지로 <LI>...</LI>가 들어가서 정렬시킬 수 있습니다
<ol type=I>또는 <ol type=A>와 같이 OL 태그 내에 타입을 추가하면 숫자가 아닌 로마자나 알파벳으로 대체할 수도 있습니다.
( 기타 : A,a,I,i,1)
예)
<UL type="A" start="n"> --> start=11 로 지정하면 11 부터 번호가 시작됩니다.
<Lh>과일종류
<LI>사과
<LI>배
<LI>딸기
</UL>

*정의 목록

DL(Definition List)태그는 정의 목록을 만들때 사용 합니다.
<DL>......</DL>
...내에는 <DT>...</DT>가 들어가서 정렬시킬 수 있습니다.
또한 DT태그안에 다시 DD태그를 넣어서 정렬을 시킵니다.

예)<DL>
<DT>이름</DT>
<DD>이름은 세부항목으로...</DD>< BR></DL>

(15) 테이블 활용

<TABLE BORDER="테두리두께" WIDTH=" " HEIGHT=" " CELLPADDING="글자와의 여백"
CELLSPACING="테이블 내부선의 굵기" BGCOLOR="배경색상" BACKGROUND="배경그림">

....

</TABLE>

- <TABLE>태그와 </TABLE>태그의 사이에는 <TR>태그로서 행을 구분하고<TD>태그와 <TH>태그로서 칸을 구분합니다.
- TH 태그는 제목줄로서 칸을 가운데 정렬 시키고 굵기를 굵게 합니다.

- 또한 <TD COLSPAN="합칠 열의 갯수" > 그리고<TD ROWSPAN="합칠 행의 갯수">로서 셀을 합칠 수 있습니다.


  

 
 
 
  사용예


 

  <table border=1 width=60% height=50% cellpadding=0 cellspacing=0 

         bgcolor="beige" bordercolor="#ff00cc">

  <caption>오늘의 메뉴</caption>

  <tr>
      <th rowspan=3>시간</th>

      <td bgcolor="#cccccc" bordercolorlight="lime" bordercolordark="yellow">
           <font color=red>오전</font>
      </td>
  </tr>

  <tr>
      <td bgcolor="#ff00cc">오후 </td>
  </tr>

  <tr>
      <td bgcolor="#00ffcc">밤 </td>
  </tr>

  </table>

(16) 프레임 사용(<FRAMESET>

- BODY 태그의 위치에 BODY태그는 쓰지않고<FRAMESET COLS=" , " 또는 ROWS=" , ">로서 프레임을 나눕니다.

여기서 COLS는 좌,우로 프레임을 나누고 ROWS 는 아래, 위로 프레임을 나눕니다.

기본적인 형식은 아래와 같습니다.

<FRAMESET rows="10%,80%,*" border=0> -->여기서 border 속성은 프레임간의 경계를 없애기 위해 0으로 주었습니다.
<FRAME SRC="첫번째 프레임에 들어가는 파일의 이름" NAME="프레임의 이름지정" SCROLLING="YES/NO/AUTO" frameborder="n">

-->여기서 SCROLLING 은 말림막대의 생성여부, frameborder=프레임간 경계선의 두께 조절을 위한 속성입니다.
(경계를 없애고 싶으면 <frame src=" " frameborder=0> 과 같이 border 속성을 추가 합니다.)

<FRAME SRC="두번째 프레임에 들어가는 파일의 이름" NAME="프레임의 이름지정" SCROLLING="YES/NO/AUTO">
</FRAMESET>
과 같고 FRAMESET내에 다시 FRAMESET을 넣어서 다시 여러개의 프레임으로 나눌 수 있습니다.
*주의 할 것은 내부의 FRAMESET은 </FRAMESET>과 같이 꼭 닫고 다시</FRAMESET> 을 해야 한다는 것이지요.

사용예
　 <html>
<title>홈페이지</title>
<frameset rows="10%,80%,*" border=4>
<frame src=a.htm name=title scrolling=no>
<frameset cols="15%,*" frameborder=0>
<frame src=b.htm name=list scrolling=no frameborder=0>
<frame src=c.htm name=content>
</frameset>
<frame src=d.htm frameborder=0>
</frameset>
<noframes>
<body>
프레임셋을 보지 못하는 브라우저를 위한 메시지
</body>
</noframes>
</html>

[참고]문서내에 프레임 넣기 (<IFRAME>)

<iframe src="파일이나 URL주소" width="n" height="n" frameborder="n" scrolling="auto/no/yes">
</iframe>

이렇게 하면 작은 프레임을 문서에 넣을 수 있습니다.( n : 픽셀단위 숫자, 또는 %)


(17) 음악,무비,플래시 사용* 사운드 파일의 종류 : WAVE,ASF, MIDI, AU, RealAudio등이 있습니다.

* 미디어 파일의 종류 : MPEG, AVI,ASF, QuickTime등이 있습니다.

- 미디어 활용 

        <EMBED SRC="미디어파일의 파일명 또는 URL" 
                border="테두리두께"(0이면 테두리없음)
                width="폭" 
                height="높이" 
                autostart="자동실행여부"(TRUE 또는 FALSE)
                playcount=반복횟수 
                showcontrols="컨트롤바 표시여부(true 또는 false) 
                enabled="활성여부"(true 또는 false)
                mute="소리없음여부" (true 또는 false) 
                showdisplay="미디어진행상황 표시여부(true 또는 false)
                selectionstart="시작프레임" (프레임수치) 
                selectionend="끝프레임" 
                clicktoplay="마우스클릭으로 조정가능여부"(true 또는 false)
                showtracker="트랙표시여부"(true 또는 false) 
                volume=볼륨(0 이면 최대, 보통 -600)                >
       </EMBED> 

- 플래시(SWF) 활용은 

        <EMBED SRC="플래시파일의 파일명 또는 URL" 
                border="테두리두께"
                width="폭" 
                height="높이" 
                >
        </EMBED> 

(참고) <a href="사운드나 미디어 파일의 경로와 이름">감상</a>
과 같이 하면 미디어와 연결되어 직접 감상을 하게 되구요


사운드 파일을 직접 듣지 않고 다운로드받게 하려면

 <A HREF="압축한 사운드(미디어) 파일의 URL">링크시킬 문자나 그림</A>과 같이 하면 됩니다..

(18) FORM 활용

- 회원가입이나 웹메일전송등에서 클라이언트(웹브라우저)에서 서버로 데이터를 전송하고자 할때 사용..
- HTML 언어로만 동작하는 페이지에서는 활용도가 낮음.

<FORM ACTION="전송 받는 파일이름" METHOD="GET/POST">

- ACTION : 데이터가 전달될 URL을 지정하는 것으로 대부분의 경우 클라이언트의 요구를 처리한 CGI나 ASP프로그램에 대한
URL이 지정됩니다.

- METHOD : 데이터가 지정된 위치로 어떤 방법으로 전달될 것인가를 명시한다. 가능한 값으로 GET과 POST가 있습니다.

GET 방식은 보내는 사항이 url 창에서 확인을 할 수가 있고 보낼수 있는 데이터가 한정(256byte~409Byte) 되지만,
POST 방식은 URL 창에 보이지 않고 보내는 데이터의 양에 제한이 없습니다.

* <INPUT>태그<INPUT TYPE="입력 필드의 형식" NAME="입력필드의 이름" VALUE="기본 값" SIZE="N" >

- 여기서 TYPE은 필드의 형식을 결정하는 것으로 TEXT, PASSWORD, CHECKBOX,RADIO,SUBMIT,RESET이 가능합니다.
- VALUE는 해당 필드에 나타나는 기본 값을 정의합니다.
- SIZE는 텍스트필드의 크기를 정의합니다.

텍스트박스<INPUT TYPE="TEXT 또는 PASSWORD" MAXLENGTH="입력범위" SIZE="필드의 크기" > --> 입력받음
<INPUT TYPE="TEXT 또는 PASSWORD" MAXLENGTH="입력범위" SIZE="필드의 크기" READONLY(입력거부)> --> 입력을 받지 않음

버튼<INPUT TYPE="SUBMIT" VALUE="버튼이름">
<INPUT TYPE="RESET" VALUE="버튼이름">
<INPUT TYPE="BUTTON" VALUE="버튼이름">
<INPUT TYPE="IMAGE" SRC="이미지 url(그림파일의 위치)">

   - SUBMIT은 양식에 입력된 내용을 <FORM action="">의 action에 지정된 곳으로 보내는 역할을 합니다.
   - 반면에 RESET은 양식에 입력된 내용을 모두 지웁니다.
   - button은 자바스트립트와 연동해서 브라우저 기능을 조절할 때 쓰입니다.
   - 공통적으로 value에 대한 값은 버튼위에 나타나는 문자를 조절합니다.
   - image 버튼은 submit버튼의 역할을 하면서 그림으로 대체할 수 있습니다.

라디오버튼<INPUT TYPE="RADIO" NAME=" " VALUE=" ">
<INPUT TYPE="RADIO" NAME=" " VALUE=" " checked>
<INPUT TYPE="RADIO" NAME=" " VALUE=" " disabled>

-->여기서 버튼이 여러개의 선택군일 경우 같은 name을 갖고 VALUE는 선택군의 각 항목마다 고유의 값을 갖습니다.
-->checked 가 코딩되면 문서를 열었을때 체크가 된 상태가 됩니다.
-->disabled 가 코딩되면 체크를 지우거나 체크할 수는 없고 보기만 가능합니다.(회색처리됨).

체크박스<INPUT TYPE="CHECKBOX" NAME=" " VALUE=" ">
<INPUT TYPE="CHECKBOX" NAME=" " VALUE=" " checked>
<INPUT TYPE="CHECKBOX" NAME=" " VALUE=" " disabled>

-->다중 선택이 가능합니다.
-->checked 가 코딩되면 문서를 열었을때 체크가 된 상태가 됩니다.
-->disabled 가 코딩되면 체크를 지우거나 체크할 수는 없고 보기만 가능합니다.(회색처리됨).

긴택스트입력<TEXTAREA NAME=" " ROWS=n COLS=n WRAP="hard/physical">...</TEXTAREA>

ROWS와 COLS는 각각 영역의 높이와 폭을 지정합니다.
그리고 WRAP=hard 로 지정시에는 엔터키를 치지 않고 내용이 다음 라인으로 내려가면 자동으로
엔터키가 쳐진 여러 문장으로 인식 됩니다.
WRAP=physical 은 "기본값"으로 엔터키를 치지않은 문장이 다음 라인으로 내려가도 한 문장으로 인식 됩니다.

선택목록만들기<SELECT NAME=" " SIZE="n">...</SELECT>
<SELECT NAME=" " SIZE="n" MULTIPLE>...</SELECT>
- MULTIPLE 이 코딩되면 여러항목의 다중선택이 가능합니다.(CTRL키를 누른상태에서 선택)

예)
<FORM METHOD="POST또는 GET">
<SELECT NAME="IRUM">
<OPTION>김미선
<OPTION selected>박정신
</SELECT>
</FORM>

- selected 가 코딩이 되어지면 문서를 열었을때 해당항목이 선택되어진 상태가 됩니다.

<button>태그활용

  <button type="">문자나 그림(IMG 태그)</button>


    여기서 type=reset 또는 submit 이 가능.
    즉 폼의 내용을 전송하거나 폼의 내용을 초기화 할때 활용.

! 주의할 것은 reset 버튼과 submit 버튼을 제외하고는 모두 name이 있어야지 입력값을 넘겨 줄 수 있습니다.
(name="아무개" 와 같이 name=value 의 형식으로 전달됩니다.)

여기까지해서 HTML에 관해서 총 정리를 해 보았습니다.

[TOP]
---
[MAIN]