IT/컴퓨터

HTML

야생화정보마당 2021. 12. 13. 08:28
반응형

● HTML의 정의

World Wide Web에서 하이퍼텍스트 문서를 만들기 위해 사용되는 기본언어로서 HTML은 Tag라는 명령어로 이루어 졌으며, 별도의 컴파일이 필요없이 웹 브라우져에서 해석이 되어 진다는 큰 특징이 있다.


● HTML의 구조


<html>
 <head>
  <title> 제목 </title>
 </head>
 <body>
  내용
 </body>
</html>

  • <html>..</html> : HTML 문서의 시작과 끝을 나타낸다.
  • <head>..</head> : HTML 문서의 헤더부분의 시작과 끝을 나타낸다. 이부분은 생략 가능하다.
  • <title>..</title> : HTML 문서의 제목을 나타낸다. 제목은 브라우져 창의 상단에 표시된다.
  • <body 속성>..</body> : HTML 문서의 실제 내용들이 채워진다. 이 부분은 수많은 tag로 구성된다. 아래는 속성이다.
     -. background="이미지 파일" : 본문의 배경화면에 사용될 이미지를 지정합니다.
     -. bgcolor="색상명 or RGB color" : 본문의 배경색을 지정합니다.
     -. text="색상명 or RGB color" : 본문의 글자색을 지정합니다.
     -. link="색상명 or RGB color" : 본문의 link의 색상을 지정합니다.
     -. vlink="색상명 or RGB color" : 본문의 이미 방문된 link의 색상을 지정합니다.
     -. alink="색상명 or RGB color" : 본문의 마우스로 link를 클릭하고 떼지 않은 상태의 색상을 지정합니다.

    * 색상명은 red, green과 같이 이미 지정된 색상을 말하며, RGB color는 #nnnnnn 이렇게 16진수 표기된 것을 말한다. *

  • example 1

─────────────────── 예제 화면 ────────────────────

───────────────────  소    스 ─────────────────────

<html>
 <head>
  <title>정보마당 - HTML의 구조 (example 1)</title>
 </head>
 <body bgcolor=white text=black link=blue vlink=gray alink=red>
 <li>HTML의 구조 (example 1)입니다.<br><br>
 
 <li>배경(bgcolor)색은 white입니다.<br>
 <li>글자(text)색은 black입니다.<br>
 <li>링크(link)색은 blue입니다.<br>
 <li>방문링크(vlink)색은 gray입니다.<br>
 <li>클릭링크(alink)색은 red입니다.<br>
 <br>
 <li><a href=ex1.html>이 부분은 link입니다(마우스로 클릭이전·현재·이후를 비교해 보세요) .</a><br>
 </body>
</html>
─────────────────────────────────────────────

● Tag의 정의

HTML 문서에서 사용되어지는 명령어로 '<'로 시작하여 '>'로 끝나는 것을 말한다.


● HTML 문서 작성시 유의사항

  • 크기(size, width)를 지정할 때 %(퍼센트)로 지정하는 방법과 숫자(픽셀)로 지정하는 방법이 있다. 퍼센트로 지정하면 창이 늘어나거나 줄거나 할때 함께 늘거나 줄거나 한다. 따라서 도표등을 작성할 경우 퍼센트로 지정하면 깨질 우려가 있다. 픽셀로 지정하면 창이 늘던 줄던 항상 그 절대적인 크기이며 만일 창 크기보다 크게 지정된다면 해당 부분은 짤려서 표시될 것이고, 창보다 크기가 적다면, 짤리는 문제가 없다.
  • 색상(color, bgcolor)을 지정할 때 색상명(red)을 지정하는 방식과 색상코드(#FF0000)으로 지정하는 두가지 방식이 있다. 색상명을 136가지로 표시가 되어지며, 색상코드는 276가지로 표현이 된다.
    색상명이나 코드가 궁금한 사람은 색상표(    표준, 축소)를 참고바란다.
  • 본 문서 중간 중간에 내용중 복사할 내용이 있을 경우는 메뉴가 활성화 안되므로 블럭 지정한 다음에 Ctrl + C를 사용하여 복사하길 바란다.


    ● 문자모양 관련 Tag

  • <hn>..</hn> : 강조 표시를 위해 많이 쓰이며, n은 1부터 6까지의 숫자로 표기된다. 1이 가장 큰 것을 나타낸다.
  • <font 속성>..</font> : 해당 부분의 글자에 대하여 크기 또는 색상을 지정할 때 사용한다. 아래는 속성이다.
     -. color="색상명 or RGB color" : font Tag로 지정된 부분의 글자의 색상을 나타낸다.
     -. size=n : font Tag로 지정된 부분의 글자의 크기를 나타낸다. n은 숫자로 1부터 7까지이며, 1이 가장 작은 것을 나타낸다.
  • <hr 속성>..</hr> : 수평선을 삽입하는 태그로 문단과 문단을 구분지을 때 많이 사용한다. 아래는 속성이다.
     -. align="right or center or left" : hr Tag의 위치를 지정한다.
     -. width=백분율 or nnn: hr Tag의 가로 크기를 나타내며, nnn은 숫자로서 픽셀(점한개)단위로 지정한다.
     -. size=nnn: hr Tag의 세로 높이를 지정하며 nnn은 숫자로서 픽셀(점한개)단위로 지정한다.
  • <b>..</b> : 굵은 글씨체를 나타낸다.
  • <i>..</i> : 이텔릭체를 나타낸다.
  • <tt>..</tt> : 타자체를 나타낸다.
  • <u>..</u> : 밑줄친 글자체를 나타낸다.
  • <big>..</big> : 큰 글자체를 나타낸다.
  • <small>..</small> : 작은 글자체를 나타낸다.
  • <sub>..</sub> : 아래 첨자체를 나타낸다.
  • <sup>..</sup> : 윗 첨자체를 나타낸다.
  • 특수문자 : 키보드에 없는 특수 문자를 표시한다. 종류에는 <(<), &(&), ©(©), >(>),  ( ), "(")

  • example 2

─────────────────── 예제 화면 ─────────────────────

문자모양 관련 Tag (example 2)입니다.

강조표시

(<hn>..</hn>)

<h1>내용</h1>

<h2>내용</h2>

<h3>내용</h3>

<h4>내용</h4>

<h5>내용</h5>
<h6>내용</h6>
글자속성지정

(<font 속성>..</font>)		 <font color=blue>내용</font> <font size=1>내용</font>
<font size=3>내용</font>
<font color=#666699 size=3>내용</font>
수평선삽입

(<hr 속성>..</hr>)
<hr></hr>

<hr width=50%></hr>

<hr size=5></hr>
글자체지정

(우측칸 참조)		 <b>볼드체</b> <i>이텔릭체</i>
<tt>타자체</tt>
<u>밑줄글자체</u>
<big>큰글자체</big>
<small>작은글자체</small>
<sub>아래첨자체</sub>
<sup>윗첨자체</sup>
특수문자삽입

(우측칸 참조)		 < : &lt (왼쪽꺽쇠) > : &gt (오른쪽꺽쇠)
& : &amp (앰퍼샌드)
© : &copy (저작권표시)
  : &nbsp (공백)
" : &quot (큰따옴표)

 

───────────────────  소    스 ──────────────────────

<html>
 <head>
  <title>정보마당 - 문자모양 관련 Tag (example 2)</title>
 </head>
 <body bgcolor=white text=black link=blue vlink=gray alink=red>
 <li>문자모양 관련 Tag (example 2)입니다.<br><br>
 
 <table border=1 width=512 cellspacing=0 cellpadding=3>
 <tr>
 <th size=200 bgcolor=#534093><font color=white>강조표시</font><br><br>
              (&lthn&gt..&lt/hn&gt)</th>
 <td size=312><h1>&lth1&gt내용&lt/h1&gt</h1>
     <h2>&lth2&gt내용&lt/h2&gt</h2>
     <h3>&lth3&gt내용&lt/h3&gt</h3>
     <h4>&lth4&gt내용&lt/h4&gt</h4>
     <h5>&lth5&gt내용&lt/h5&gt</h5>
     <h6>&lth6&gt내용&lt/h6&gt</h6>
 </td>
 </tr>
 
 <tr>
 <th size=200 bgcolor=#534093><font color=white>글자속성지정</font><br><br>
              (&ltfont 속성&gt..&lt/font&gt)</th>
 <td size=312><font color=blue>&ltfont color=blue&gt내용&lt/font&gt</font><p>
     <font size=1>&ltfont size=1&gt내용&lt/font&gt</font><p>
     <font size=3>&ltfont size=3&gt내용&lt/font&gt</font><p>
     <font color=#666699 size=3>&ltfont color=#666699 size=3&gt내용&lt/font&gt</font>
 </td>
 </tr>
 
 <tr>
 <th size=200 bgcolor=#534093><font color=white>수평선삽입</font><br><br>
              (&lthr 속성&gt..&lt/hr&gt)</th>
 <td size=312><hr>&lthr&gt&lt/hr&gt</hr><p>
     <hr width=50%>&lthr width=50%&gt&lt/hr&gt</hr><p>
     <hr size=5>&lthr size=5&gt&lt/hr&gt</hr>
 </td>
 </tr>

 <tr>
 <th size=200 bgcolor=#534093><font color=white>글자체지정</font><br><br>
              (우측칸 참조)</th>
 <td size=312><b>&ltb&gt볼드체&lt/b&gt</b><p>
     <i>&lti&gt이텔릭체&lt/i&gt</i><p>
     <tt>&lttt&gt타자체&lt/tt&gt</tt><p>
     <u>&ltu&gt밑줄글자체&lt/u&gt</u><p>
     <big>&ltbig&gt큰글자체&lt/big&gt</big><p>
     <small>&ltsmall&gt작은글자체&lt/small&gt</small><p>
     <sub>&ltsub&gt아래첨자체&lt/sub&gt</sub><p>
     <sup>&ltsup&gt윗첨자체&lt/sup&gt</sup>
 </td>
 </tr>

 <tr>
 <th size=200 bgcolor=#534093><font color=white>특수문자삽입</font><br><br>
              (우측칸 참조)</th>
 <td size=312><b>&lt</b> : &amplt (왼쪽꺽쇠)<p>
     <b>&gt</b> : &ampgt (오른쪽꺽쇠)<p>
     <b>&</b> : &ampamp (앰퍼샌드)<p>
     <b>&copy</b> : &ampcopy (저작권표시)<p>
     <b>&nbsp</b> : &ampnbsp (공백)<p>
     <b>&quot</b> : &ampquot (큰따옴표)
 </td>
 </tr>
 </table>
 <br>
 </body>
</html>

───────────────────────────────────────────── 


● 문자정렬 관련 Tag

  • <br> : 줄을 바꾸는 기능으로 Enter 키를 입력한 것과 같다. 여러개의 빈줄은 이 태그로 쓰면 된다.
  • <p 속성> : 단락을 구분하는 기능으로 2번 br Tag를 쓴것과 같다. 단 연속해서 여러번 입력해도 한번 밖에 인식이 안된다. 아래는 속성이다.
     -. align="right or center or left" : 문장의 정렬을 한다.
  • <pre>..</pre> : 메모장과 같이 공백은 공백, 엔터는 엔터등과 같이 인식하는 기능을 한다.
  • <xmp>..</xmp> : pre Tag와 같으면서 추가로 Tag까지 그대로 출력된다는 점이 특이하다.
  • <center>..</center> : 가운데 정렬을 하는 기능이다.
  • <blockquote>..</blockquote> : 인용구등을 표현할 때 사용하며, 적당히 왼쪽 여백을 주어 들여쓰기가 된 효과를 준다.

  • example 3

─────────────────── 예제 화면 ─────────────────────

  • 문자정렬 관련 Tag (example 3)입니다.
    줄바꿈(엔터)

    (<br>)    		 내용<br>
    내용<br><br>

    내용
    단락구분

    (<p 속성>)    		 내용<p>

    <p align=center>내용</p>
    <p align=right>내용</p>
    메모장형식(태그숨김)

    (<pre>..</pre>)    		 <pre> 안녕하세요? pre 태그 테스트 입니다. 포함되는 태그들은 화면에 표시되지 않고 기능은 수행 되네요.. ^^ 여긴 마지막에 <br> 태그를 썻는데... 태그는 안보이져? </pre>
    메모장형식(태그보임)

    (<xmp>..</xmp>)    		  
    중간정렬

    (<center>..</center>)    		 일반 내용
    <center>가운데 정렬</center>
    들여쓰기효과

    (<blockquote>
    ..
    </blockquote>)    		 일반 내용
    <blockquote>들여쓰기 효과네요. 푸하하하! 이런거구나...
    </blockquote>
    ───────────────────  소    스 ──────────────────────

<html>
 <head>
  <title>정보마당 - 문자정렬 관련 Tag (example 3)</title>
 </head>
 <body bgcolor=white text=black link=blue vlink=gray alink=red>
 <li>문자정렬 관련 Tag (example 3)입니다.<br><br>
 
 <table border=1 width=512 cellspacing=0 cellpadding=3>
 <tr>
 <th size=200 bgcolor=#534093><font color=white>줄바꿈(엔터)</font><br><br>
              (&ltbr&gt)</th>
 <td size=312>내용&ltbr&gt<br>
              내용&ltbr&gt&ltbr&gt<br><br>
              내용
 </td>
 </tr>
 
 <tr>
 <th size=200 bgcolor=#534093><font color=white>단락구분</font><br><br>
              (&ltp 속성&gt)</th>
 <td size=312>내용&ltp&gt<p>
              <p align=center>&ltp align=center&gt내용&lt/p&gt</p>
              <p align=right>&ltp align=right&gt내용&lt/p&gt</p>
 </td>
 </tr>
 
 <tr>
 <th size=200 bgcolor=#534093><font color=white>메모장형식(태그숨김)</font><br><br>
              (&ltpre&gt..&lt/pre&gt)</th>
 <td size=312>
<pre>&ltpre&gt
 안녕하세요?
 
   pre 태그 테스트 입니다.
   포함되는 태그들은 화면에 표시되지 않고
   기능은 수행 되네요.. ^^
 
 여긴 마지막에 &ltbr&gt 태그를 썻는데...<br>
 태그는 안보이져?
&lt/pre&gt</pre>
 </td>
 </tr>

 <tr>
 <th size=200 bgcolor=#534093><font color=white>메모장형식(태그보임)</font><br><br>
              (&ltxmp&gt..&lt/xmp&gt)</th>
 <td size=312>
<xmp>&ltxmp&gt
 안녕하세요?
 
   xmp 태그 테스트 입니다.

   포함되는 태그들은 화면에 표시될 뿐 해당
   기능은 수행이 안된답니다. ^^
 
 여긴 마지막에 &ltbr&gt 태그를 썻는데...<br>
 태그가 보이네요?
&lt/xmp&gt</xmp>
 </td>
 </tr>

 <tr>
 <th size=200 bgcolor=#534093><font color=white>중간정렬</font><br><br>
              (&ltcenter&gt..&lt/center&gt)</th>
 <td size=312>일반 내용<br>
              <center>&ltcenter&gt가운데 정렬&lt/center&gt</center>
 </td>
 </tr>
 
 <tr>
 <th size=200 bgcolor=#534093><font color=white>들여쓰기효과</font><br><br>
              (&ltblockquote&gt<br>..<br>&lt/blockquote&gt)</th>
 <td size=312>일반 내용
              <blockquote>&ltblockquote&gt들여쓰기 효과네요. 푸하하하! 이런거구나...<br>
              &lt/blockquote&gt</blockquote>
 </td>
 </tr>
 </table>
 <br>
 </body>
</html> 

───────────────────────────────────────────── 
 


● 목록 관련 Tag

목록등을 나타낼때 앞에 사용되는 Tag로서 순서가 정해진 것과, 순서가 정해지지 않은 것과, 용어 목록을 표시하는 것이 있다.

  • <ol 속성><li 속성>..</ol> 글자 : 순서가 있는 목록을 나타내는 태그이다. 아래는 속성이다.
     -. start=nn : ol Tag의 속성이다. 목록의 시작번호를 나타내며, 하나씩 증가한다.
     -. value=nn : li Tag의 속성이다. 중간에 순서를 가로챌 수 있다. 즉 지금 순서가 5인데 value를 7을 주면 7로 바뀌면서 증가한다.
     -. type="A or a or I or i or 1" : 공통으로 표시될 속성이다. Aa(알파벳 대소문자), Ii(대소 로마자), 1(숫자)
  • <ul 속성><li 속성>..</ul> 글자 : 순서가 없는 목록을 나타내는 태그이다. 아래는 속성이다.
     -. type="disc or circle or square" : 공통으로 표시될 속성이다. disc(흑점), circle(원), square(네모)
  • <dl><dt> 글자(용어명) <dd> 글자(용어설명) ..</dl> 글자 : 용어를 정의하는 목록을 나타내는 태그이다.

  • example 4 

─────────────────── 예제 화면 ─────────────────────

목록 관련 Tag (example 4)입니다. 소스는 소스창에서 확인바랍니다.

순서있는목록

(<ol 속성>
<li 속성>
..
</ol>)		 - 인간의 종류
  1. 남자
    1. 착한 남자
      1. 진짜 착한 남자
      2. 착한 척하는 남자
    2. 나쁜 남자
  2. 여자
  3. 아줌마
순서없는목록

(<ul 속성>
<li 속성>
..
</ul>)		 - 과일의 종류
  • 사과
  • 배
  • 바나나
- 채소의 종류
  • 당근
  • 무
  • 파
- 양념의 종류
  • 간장
  • 된장
  • 고추장
용어정의

(<dl>
<dt>용어
<dd>설명
..
</dl>)		 - 컴퓨터 용어
마우스
입력장치당.
키보드
이것도 입력장치당.
모니터
요건 출력장치당.

 

───────────────────  소    스 ──────────────────────

<html>
 <head>
  <title>정보마당 - 목록 관련 Tag (example 4)</title>
 </head>
 <body bgcolor=white text=black link=blue vlink=gray alink=red>
 <li>목록 관련 Tag (example 4)입니다. 소스는 소스창에서 확인바랍니다.<br><br>
 
 <table border=1 width=512 cellspacing=0 cellpadding=3>
 <tr>
 <th size=200 bgcolor=#534093><font color=white>순서있는목록</font><br><br>
              (&ltol 속성&gt<br>
              &ltli 속성&gt<br>
              ..<br>
              &lt/ol&gt)</th>
 <td size=312>- 인간의 종류
              <ol>
              <li>남자
               <ol type=A>
               <li>착한 남자
                <ol type=i>
                <li>진짜 착한 남자
                <li>착한 척하는 남자
                </ol>
               <li>나쁜 남자
               </ol>
              <li>여자
              <li>아줌마
              </ol>
 </td>
 </tr>
 
 <tr>
 <th size=200 bgcolor=#534093><font color=white>순서없는목록</font><br><br>
              (&ltul 속성&gt<br>
              &ltli 속성&gt<br>
              ..<br>
              &lt/ul&gt)</th>
 <td size=312>- 과일의 종류
              <ul>
              <li>사과
              <li>배
              <li>바나나
              </ul>
              - 채소의 종류
              <ul>
              <li type=circle>당근
              <li type=circle>무
              <li type=circle>파
              </ul>
              - 양념의 종류
              <ul>
              <li type=square>간장
              <li type=square>된장
              <li type=square>고추장
              </ul>
 </td>
 </tr>
 
 <tr>
 <th size=200 bgcolor=#534093><font color=white>용어정의</font><br><br>
              (&ltdl&gt<br>
              &ltdt&gt용어<br>
              &ltdd&gt설명<br>
              ..<br>
              &lt/dl&gt)</th>
 <td size=312>- 컴퓨터 용어
              <dl>
              <dt>마우스
              <dd>입력장치당.
              <dt>키보드
              <dd>이것도 입력장치당.
              <dt>모니터
              <dd>요건 출력장치당.
              </dl>
 </td>
 </tr>
 </table>
 <br>
 </body>
</html> 

───────────────────────────────────────────── 
 


● table Tag의 구조

테이블은 문서에서 도표와 같으며, 웹 페이지 제작에 있어 아주 활용도가 높다. 또한 테이블의 셀 안에 또 다른 테이블이 삽입이 가능하다.

<table>
 <tr>
  <th> 제목 </th>
 </tr>
 <tr>
  <td> 내용 </td>
 </tr>
</table>

  • <table 속성>..</table> : table Tag의 시작과 끝을 나타낸다. 아래는 테이블의 속성이다.
     -. border=nn : 도표 가장자리의 두께를 나타낸다. 기본값은 0이다. n은 숫자이다.
     -. cellspacing=nn : 셀과 셀사이의 거리를 나타낸다. n은 숫자이다.
     -. cellpadding=nn : 셀 안쪽의 여백 즉 글자와 셀 선과의 간격을 나타낸다. n은 숫자이다.
     -. width="nn or 퍼센트" : 표의 가로 크기를 나타낸다. n은 숫자이다.
     -. height="nn or 퍼센트" : 표의 세로 크기를 나타낸다. n은 숫자이다.
  • <tr 속성>..</tr> : 행을 표시할 때 쓴다. 아래는 속성이다.
     -. align="right or center or left" : 행 전체의 글자 정렬을 한다. 기본값은 left이다.
     -. valign="top or middle or bottom" : 행 전체의 상하 글자 정렬을 한다. 기본값은 middle이다.
     -. bgcolor="색상명 or RGB color" : 행 전체의 배경색을 지정합니다.
  • <th>..</th> : table의 제목을 입력할 때 쓴다. 이부분은 생략 가능하다.
  • <td 속성>..</td> : 열을 표시할 때 쓴다.
     -. align="right or center or left" : 열 전체의 글자 정렬을 한다. 기본값은 left이다.
     -. valign="top or middle or bottom" : 열 전체의 상하 글자 정렬을 한다. 기본값은 middle이다.
     -. bgcolor="색상명 or RGB color" : 열 전체의 배경색을 지정합니다.
     -. colspan=nn : 행을 셀을 합치는 기능이다. n은 숫자이다.
     -. rowspan=nn : 열을 셀을 합치는 기능이다. n은 숫자이다.

  • example 5-1

─────────────────── 예제 화면 ─────────────────────

table Tag의 구조 (example 5-1)입니다. 소스는 소스창에서 확인바랍니다.

테이블 예제 1 단순한 구조입니다.

 

───────────────────  소    스 ──────────────────────

<html>
 <head>
  <title>정보마당 - table Tag의 구조 (example 5-1)</title>
 </head>
 <body bgcolor=white text=black link=blue vlink=gray alink=red>
 <li>table Tag의 구조 (example 5-1)입니다. 소스는 소스창에서 확인바랍니다.<br><br>
 
 <table border=1 width=512 cellspacing=0 cellpadding=3>
 <tr>
 <th size=212 bgcolor=#534093>
 테이블 예제 1
 </th>
 <td size=300>
 단순한 구조입니다.<br>
 </td>
 </tr>
 </table>

 </body>
</html> 

───────────────────────────────────────────── 
 

  • example 5-2

─────────────────── 예제 화면 ─────────────────────

table Tag의 구조 (example 5-2)입니다. 소스는 소스창에서 확인바랍니다.

테이블 예제 2
단순한 구조입니다.

 

───────────────────  소    스 ──────────────────────

<html>
 <head>
  <title>정보마당 - table Tag의 구조 (example 5-2)</title>
 </head>
 <body bgcolor=white text=black link=blue vlink=gray alink=red>
 <li>table Tag의 구조 (example 5-2)입니다. 소스는 소스창에서 확인바랍니다.<br><br>
 
 <table border=1 width=512 cellspacing=0 cellpadding=3>
 <tr>
 <th bgcolor=#534093>
 테이블 예제 2
 </th>
 </tr>
 
 <tr>
 <td>
 단순한 구조입니다.<br>
 </td>
 </tr>
 </table>

 </body>
</html> 

───────────────────────────────────────────── 
 

  • example 5-3

─────────────────── 예제 화면 ─────────────────────

table Tag의 구조 (example 5-3)입니다. 소스는 소스창에서 확인바랍니다.

항목 내용
구조 보통입니다.

 

───────────────────  소    스 ──────────────────────

<html>
 <head>
  <title>정보마당 - table Tag의 구조 (example 5-3)</title>
 </head>
 <body bgcolor=white text=black link=blue vlink=gray alink=red>
 <li>table Tag의 구조 (example 5-3)입니다. 소스는 소스창에서 확인바랍니다.<br><br>
 
 <table border=1 width=512 cellspacing=0 cellpadding=3>
 <tr>
 <th bgcolor=#534093>
 항목
 </th>
 <th bgcolor=#534093>
 내용
 </th>
 </tr>
 
 <tr>
 <td>
 구조<br>
 </td>
 <td>
 보통입니다.<br>
 </td>
 </tr>
 </table>

 </body>
</html> 

───────────────────────────────────────────── 
 

  • example 5-4 :

─────────────────── 예제 화면 ─────────────────────

table Tag의 구조 (example 5-4)입니다. 소스는 소스창에서 확인바랍니다.

항목 점수
국어 영어 수학
전빵점 0 0 0
전백점 100 100 100
평균 50 50 50

 

───────────────────  소    스 ──────────────────────

<html>
 <head>
  <title>정보마당 - table Tag의 구조 (example 5-4)</title>
 </head>
 <body bgcolor=white text=black link=blue vlink=gray alink=red>
 <li>table Tag의 구조 (example 5-4)입니다. 소스는 소스창에서 확인바랍니다.<br><br>
 
 <table border=1 width=512 cellspacing=0 cellpadding=3>
 <tr>
 <th rowspan=2 bgcolor=#534093>
 항목
 </th>
 <th colspan=3 bgcolor=#534093>
 점수
 </th>
 </tr>

 <tr>
 <td align=center bgcolor=#9784D7>
 국어
 </th>
 <td align=center bgcolor=#9784D7>
 영어
 </td>
 <td align=center bgcolor=#9784D7>
 수학
 </td>
 </tr>
 
 <tr>
 <td align=center bgcolor=#9784D7>
 전빵점
 </th>
 <td align=center>
 0
 </td>
 <td align=center>
 0
 </td>
 <td align=center>
 0
 </td>
 </tr>
 
 <tr>
 <td align=center bgcolor=#9784D7>
 전백점
 </th>
 <td align=center>
 100
 </td>
 <td align=center>
 100
 </td>
 <td align=center>
 100
 </td>
 </tr>

 <tr>
 <td align=center bgcolor=#9784D7>
 평균
 </th>
 <td align=center>
 50
 </td>
 <td align=center>
 50
 </td>
 <td align=center>
 50
 </td>
 </tr>
 </table>

 </body>
</html> 

───────────────────────────────────────────── 
 

  • example 5-5

─────────────────── 예제 화면 ─────────────────────

 

  • table Tag의 구조 (example 5-3)입니다. 소스는 소스창에서 확인바랍니다.
     
    1학년
    1반
    항목 점수
    국어 영어 수학
    전빵점 0 0 0
    전백점 100 100 100
    평균 50 50 50
    2반
    항목 점수
    국어 영어 수학
    거시기 50 50 50
    머시기 100 100 100
    평균 75 75 75

 

───────────────────  소    스 ──────────────────────

<html>
 <head>
  <title>정보마당 - table Tag의 구조 (example 5-3)</title>
 </head>
 <body bgcolor=darkgray text=black link=blue vlink=gray alink=red>
 <li>table Tag의 구조 (example 5-3)입니다. 소스는 소스창에서 확인바랍니다.<br><br>
 
 <table border=0 width=512 height=350 cellspacing=0 cellpadding=0>
 <tr bgcolor=black>
 <td width=100 height=50 align=center>

  <table border=0 width=98 height=48 cellspacing=0 cellpadding=0>
  <tr bgcolor=#222222>
  <td>
  &nbsp;
  </td>
  </tr>
  </table>

 </td>
 <td width=412 height=50 align=center>

  <table border=0 width=411 height=48 cellspacing=0 cellpadding=0>
  <tr bgcolor=#555555>
  <td align=center>
  <font color=white>1학년</font>
  </td>
  </tr>
  </table>

 </td>
 </tr>

 <tr bgcolor=black>
 <td width=100 height=150 align=center>

  <table border=0 width=98 height=149 cellspacing=0 cellpadding=0>
  <tr bgcolor=white>
  <td align=center bgcolor=#555555>
  <font color=white>1반</font>
  </td>
  </tr>
  </table>

 </td>
 <td width=412 height=150 align=center>

 <table border=0 width=411 height=149 cellspacing=0 cellpadding=0>
 <tr bgcolor=white>
 <td align=center>

  <table border=1 width=95% cellspacing=0 cellpadding=3>
  <tr>
  <th rowspan=2 bgcolor=#534093>
  항목
  </th>
  <th colspan=3 bgcolor=#534093>
  점수
  </th>
  </tr>
 
  <tr>
  <td align=center bgcolor=#9784D7>
  국어
  </th>
  <td align=center bgcolor=#9784D7>
  영어
  </td>
  <td align=center bgcolor=#9784D7>
  수학
  </td>
  </tr>
 
  <tr>
  <td align=center bgcolor=#9784D7>
  전빵점
  </th>
  <td align=center>
  0
  </td>
  <td align=center>
  0
  </td>
  <td align=center>
  0
  </td>
  </tr>
 
  <tr>
  <td align=center bgcolor=#9784D7>
  전백점
  </th>
  <td align=center>
  100
  </td>
  <td align=center>
  100
  </td>
  <td align=center>
  100
  </td>
  </tr>
 
  <tr>
  <td align=center bgcolor=#9784D7>
  평균
  </th>
  <td align=center>
  50
  </td>
  <td align=center>
  50
  </td>
  <td align=center>
  50
  </td>
  </tr>
  </table> 
 
  </td>
  </tr>
  </table>

 </td>
 </tr>
 
 <tr bgcolor=black>
 <td width=100 height=150 align=center>

  <table border=0 width=98 height=149 cellspacing=0 cellpadding=0>
  <tr bgcolor=white>
  <td align=center bgcolor=#555555>
  <font color=white>2반</font>
  </td>
  </tr>
  </table>

 </td>
 <td width=412 height=150 align=center>

 <table border=0 width=411 height=149 cellspacing=0 cellpadding=0>
 <tr bgcolor=white>
 <td align=center>

  <table border=1 width=95% cellspacing=0 cellpadding=3>
  <tr>
  <th rowspan=2 bgcolor=#534093>
  항목
  </th>
  <th colspan=3 bgcolor=#534093>
  점수
  </th>
  </tr>
 
  <tr>
  <td align=center bgcolor=#9784D7>
  국어
  </th>
  <td align=center bgcolor=#9784D7>
  영어
  </td>
  <td align=center bgcolor=#9784D7>
  수학
  </td>
  </tr>
 
  <tr>
  <td align=center bgcolor=#9784D7>
  거시기
  </th>
  <td align=center>
  50
  </td>
  <td align=center>
  50
  </td>
  <td align=center>
  50
  </td>
  </tr>
 
  <tr>
  <td align=center bgcolor=#9784D7>
  머시기
  </th>
  <td align=center>
  100
  </td>
  <td align=center>
  100
  </td>
  <td align=center>
  100
  </td>
  </tr>
 
  <tr>
  <td align=center bgcolor=#9784D7>
  평균
  </th>
  <td align=center>
  75
  </td>
  <td align=center>
  75
  </td>
  <td align=center>
  75
  </td>
  </tr>
  </table> 
 
  </td>
  </tr>
  </table>

 </td>
 </tr>
 </table>

 </body>
</html> 

───────────────────────────────────────────── 
 


● 문서연결 관련 Tag

웹 페이지의 가장 큰 특성중 하나인 이식성. 그중 다른 곳으로 편리한 이동을 할 수 있는 이 링크에 있을 수가 있다.

  • <a 속성> : 다른 곳에 위치한 문서를 읽는(이동) 기능을 한다. 아래는 속성이다.
     -. href="파일명 or URL" : 링크할 주소나 파일명을 써줍니다. '#name'으로 지정할 경우 name에서 지정된 위치로 이동한다.
     -. name="목적지이름" : 링크될 글자나 그림에 이름을 써줍니다.
     -. target="_self or _top or _blank or _parent or 창이름" : 링크를 어디다 하는지 나타낸다.
      _self(현재 브라우져 창에 나타낸다), _top(분할된 프레임을 모두 무시한 채 현재 브라우져 창에 나타낸다)
      _blank(새 브라우져 창에 나타낸다), 창이름(해당되는 창에 나타낸다)

  • example 6-1 :

─────────────────── 예제 화면 ─────────────────────

  • 문서연결 관련 Tag (example 6-1)입니다. 소스는 소스창에서 확인바랍니다.

    * 하나의 페이지에서 원하는 위치를 클릭하여 이동하는 것으로 이동옆에 링크를 클릭하면 지정된 위치로 이동합니다. *


  • 머리말 (이동:본문, 꼬리말)

    어쩌구 저쩌구!











  • 본문 (이동:머리말, 꼬리말)

    궁시렁 궁시렁!











  • 꼬리말 (이동:머리말, 본문)

    꿍얼 꿍얼!

───────────────────  소    스 ──────────────────────

<html>
 <head>
  <title>정보마당 - 문서연결 관련 Tag (example 6-1)</title>
 </head>
 <body bgcolor=white text=black link=blue vlink=gray alink=red>
 <li>문서연결 관련 Tag (example 6-1)입니다. 소스는 소스창에서 확인바랍니다.<br><br>

 * 하나의 페이지에서 원하는 위치를 클릭하여 이동하는 것으로 이동옆에 링크를 클릭하면 지정된 위치로 이동합니다. *<br><br><br>

 <li type=circle><a name=head></a><b>머리말</b> (이동:<a href=#body>본문</a>, <a href=#tail>꼬리말</a>)<br><br>
 
 어쩌구 저쩌구!<br><br><br><br><br><br><br><br><br><br><br><br>
 
 <li type=circle><a name=body></a><b>본문</b> (이동:<a href=#head>머리말</a>, <a href=#tail>꼬리말</a>)<br><br>
 
 궁시렁 궁시렁!<br><br><br><br><br><br><br><br><br><br><br><br>
 
 <li type=circle><a name=tail></a><b>꼬리말</b> (이동:<a href=#head>머리말</a>, <a href=#body>본문</a>)<br><br>
 
 꿍얼 꿍얼!<br><br><br><br><br><br><br><br><br><br><br><br>
 <br>
 </body>
</html>

───────────────────────────────────────────── 

 

  • example 6-2 : 첨부파일중에 ex6-2-levelup5.zip를 받아서 압축풀어 ex6-2.html 실행
     


    ● 멀티미디어 자료 삽입 관련 Tag

  • <img src="그림파일명" 속성> : 이미지를 삽입하는 기능을 한다. 아래는 속성이다.
     -. border=nn : 이미지의 가장자리 선의 굵기를 지정한다.
     -. align="top or middle or bottom" : 이미지 정렬을 한다.
     -. width="nn or 퍼센트" : 이미지의 가로 크기를 지정한다.
     -. height="nn or 퍼센트" : 이미지의 세로 크기를 지정한다.
     -. vspace=nn : 이미지의 좌우 여백을 지정한다.
     -. hspace=nn : 이미지의 상하 여백을 한다.
     -. alt="표시될 문장" : 그래픽을 지원 안하는 브라우져에 이미지 대신 표시할 글자를 지정한다.
  • <a href="오디오파일명 or 비디오파일명"> : 새로운 화면으로 바뀌면서 해당 파일을 동작할 프로그램이 있으면 동작한다.
  • <embed src="오디오파일명 or 비디오파일명" 속성> : 외부 프로그램을 삽입하는 것으로 브라우져에서 지원하지 않는 파일을 처리하기 위해 외부 프로그램을 실행한다. 아래는 속성이다.
     -. autostart="false of true" : 페이지 로딩시 자동으로 시작을 하는 여부로서 기본값은 false로 눌러야 동작한다.
     -. width=nn : 오디오 또는 비디오 작동 프로그램의 가로 넓이를 지정한다.
     -. height=nn : 오디오 또는 비디오 작동 프로그램의 세로 넓이를 지정한다.

  • example 7-1 : 첨부파일중에 ex7-1-levelup5.zip를 받아서 압축풀어 ex7-1.html 실행

 

  • example 7-2 : 첨부파일중에 ex7-2-levelup5.zip를 받아서 압축풀어 ex7-2.html 실행

 

  • example 7-3 : 첨부파일중에 ex7-3-levelup5.zip를 받아서 압축풀어 ex7-3.html 실행

 


● frame Tag의 구조

프레임은 하나의 브라우져 창을 여러개로 분할하여 각 페이지별로 관리함으로써 관리의 용이성 혹은 동시에 많은 컨텐츠의 처리를 위한 필수적인 테크닉이다.

<frameset 속성>
 <frame 속성>
 </frame>
</frameset>

  • <frameset 속성>..</frameset> : 창을 가로 혹은 세로로 나누어 준다. 아래는 속성이다.
     -. rows="nn or 픽셀수" : 창을 가로로 분할해 준다. 다수를 지정할 수가 있다. nn은 픽셀수를 직접 지정하거나 등배수를 지정할 수 있다. 예로 3등분 하려면 nn,nn,nn 이와 같이 지정한다.
     -. cols="nn or 픽셀수" : 창을 세로로 분할해 준다. 다수를 지정할 수가 있다. nn은 픽셀수를 직접 지정하거나 등배수를 지정할 수 있다. 예로 3등분 하려면 nn,nn,nn 이와 같이 지정한다.
     -. frameborder="0 or 1" : 프레임 간의 경계를 나타내는 지(1) 아님 나타내지 않는지(0)를 지정한다.
     -. border=nn : 프레임과 프레임 간격을 지정한다.
  • <frame 속성>..</frame> : 나누어진 프레임에서 실제 페이지를 지정한다. 아래는 속성이다.
     -. name="창이름" : 링크되는 문서의 이름(target)을 지정할 때 프레임에 이름을 지정한다.
     -. noresize="yes or no" : 프레임 경계를 변경하지 못하게 고정한다.
     -. scrolling="yes or no or auto" : 해당 프레임의 스크롤바를 보여줄 지 아님 범위를 벗어날때만 보여줄 지등을 지정한다.
     -. marginwidth=nn : 프레임에 내용의 좌우 여백을 조절한다.
     -. marginheight=nn : 프레임에 내용의 상하 여백을 조절한다.

    * frameset 안으로는 frame 혹은 또다른 frameset이 들어갈 수 있으며, 가로나 혹은 세로로 나누었을 경우 해당 등분 부분이 frame일 경우는 등분된 전체를 하나의 공간으로 쓰며, 해당 등분 부분이 frameset일 경우는 등분된 전체를 또다른 등분으로 나누게 되어진다. 샘플를 실행하여 소스와 비교하여 잘 익히도록 한다. *

  • example 8-1 : 첨부파일중에 ex8-1-levelup5.zip를 받아서 압축풀어 ex8-1.html 실행
  • example 8-2 : 첨부파일중에 ex8-2-levelup5.zip를 받아서 압축풀어 ex8-2.html 실행
  • example 8-3 : 첨부파일중에 ex8-3-levelup5.zip를 받아서 압축풀어 ex8-3.html 실행
  • example 8-4 : 첨부파일중에 ex8-4-levelup5.zip를 받아서 압축풀어 ex8-4.html 실행
  • example 8-5 : 첨부파일중에 ex8-5-levelup5.zip를 받아서 압축풀어 ex8-5.html 실행


    ● form Tag의 구조

    단순하게 저장되어 있는 것을 가져오는 것이 아닌 동적인 즉 서버에 어떤 요청을 하고, 결과를 돌려받는등의 액션을 할 때 웹 페이지에서 서버에 요청을 하는 부분을 담당하는 기능이다.
    쉽게 보면 게시판에 글을 올린다든지, 아님 카운터등에 활용이 될 수 있다.

    <form 속성>
     <input 속성>
     </input>
     <select 속성>
      <option 속성> 항목명 </option 속성>
     </select>
     <textarea 속성>
     </textarea>
    </form>

  • <form 속성>..</form> : form Tag의 시작과 끝을 나타낸다. 아래는 form의 속성이다.
     -. method="get or post" : 작성된 폼을 서버에 보내는 방식으로 get은 URL에 text 형태로 붙여서 첨부되고, post는 body 부분에 인코딩되서 첨부된다.
     -. action="cgi 파일명" : 서버에서 폼을 처리하는 프로그램(CGI)를 지정한다.
  • <input 속성> : 말 그대로 폼에 어떤 사항이나 글자등을 입력할 때 사용한다. 아래는 속성이다.
     -. type="text or password or checkbox or radio or submit or reset" : 입력할 형태를 나타낸다. text(텍스트), password(텍스트 입력시 * 처리), checkbox(체크박스 표시), radio(라디오버튼 표시), submit(입력내용을 전송하는 버튼), reset(입력 내용을 모두 초기화)
     -. name="변수명" : 입력될 내용을 전달할 변수명을 지정한다.
     -. value="변수값" : 입력될 내용을 전달할 변수의 값으로 지정한다.
     -. size=nn : 입력될 내용의 범위를 지정한다. n은 숫자이다.
  • <select 속성>..</select> : 드롭다운 메뉴를 나타내어 아래 option Tag에서 선택을 할 수 있도록 한다. 아래는 속성이다.
     -. name="변수명" : 선택될 내용을 전달할 변수명을 지정한다.
     -. size=nn : 선택될 내용의 범위를 지정한다.
  • <option 속성>항목명 : select Tag에서 선택될 항목이다. 항목명은 드롭다운시 표시될 글자이다. 아래는 속성이다.
     -. value="변수값" : 선택될 내용을 전달할 변수의 값으로 지정한다.
  • <textarea 속성>..초기내용..</textarea> : 한줄이상의 글을 입력할 때 사용한다. 초기내용은 칸에 기본적으로 나타낼 내용이며, 생략한다. 아래는 속성이다.
     -. name="변수명" : 입력될 내용을 전달할 변수명을 지정한다.
     -. cols=nn : 텍스트 영역의 가로폭을 지정한다.
     -. rows=nn : 텍스트 영역의 세로폭을 지정한다.

  • example 9 : 

─────────────────── 예제 화면 ─────────────────────

</INPUT></INPUT></INPUT></INPUT>

  • form Tag의 구조 (example 9)입니다. 소스는 소스창에서 확인바랍니다.


    <FORM action="test.cgi" method="get">이름 : <INPUT value="이름입력" name="yourname"></INPUT>
    암호 : <INPUT type="password" name="yourpassword"></INPUT>

    남자 : <INPUT type="radio" name="sextype"></INPUT>
    여자 : <INPUT type="radio" name="sextype"></INPUT>

    나이 :

    승인 : <INPUT type="checkbox" name="auth"></INPUT>

    <INPUT type="submit" value="전송"></INPUT> <INPUT type="reset" value="다시입력"></INPUT>

    ───────────────────  소    스 ──────────────────────</FORM>

 <html>
 <head>
  <title>정보마당 - form Tag의 구조 (example 9)</title>
 </head>
 <body bgcolor=white text=black link=blue vlink=gray alink=red>
 <li>form Tag의 구조 (example 9)입니다. 소스는 소스창에서 확인바랍니다.<br><br><br>
 
 <form method=get action=test.cgi>
 
  이름 : <input type=text value=이름입력 name=yourname></input><br>
  암호 : <input type=password name=yourpassword></input><br><br>
  남자 : <input type=radio name=sextype></input><br>
  여자 : <input type=radio name=sextype></input><br><br>

  나이 : <select name=year>
  <option value=10대>10대</option>
  <option value=20대>20대</option>
  <option value=30대>30대</option>
  <option value=40대>40대</option>
  <option value=50대>50대</option>
  <option value=60이상>60이상</option>
  </select><br><br>

  승인 : <input type=checkbox name=auth></input><br><br>
  <input type=submit value=전송></input>
  <input type=reset value=다시입력></input><br>
 
 </form>
 
 </body>
</html>

───────────────────────────────────────────── 
 


● marquee Tag (색상표 표준, 축소)

죽어 있는 문자에 생명을 불어(?) 넣는 테크닉이다. 잘 활용하면 웹 페이지를 좀 더 다이나믹하게 보일 수 있다. 단 남용하면 개판된다.

  • <marquee 속성>..</marquee> : 문자 배너기능 즉 고정된 문자가 아닌 움직임을 부여한 기능이다. 아래는 속성이다.
     -. bgcolor="색상명 or RGB color" : 문자 배너의 배경색을 지정합니다.  -. width=nn : 문자 배너 영역의 가로를 지정한다.
     -. height=nn : 문자 배너 영역의 세로를 지정한다.
     -. vspace=nn : 문자 배너 영역의 좌우 여백을 지정한다.
     -. hspace=nn : 문자 배너 영역의 상하 여백을 한다.
     -. align="top or middle or bottom" : 문자 배너의 위치를 지정한다.
     -. behavior="scroll or slide or alternate" : 문자 배너의 처리방법을 지정한다. scroll(문자가 우에서 좌로 계속 움직임), slide(문자가 우에서 좌로 움직이다 끝을 만나면 멈춤), alternate(문자가 좌우로 계속 방향이 전환되면서 스크롤).
     -. direction="right or left or up or down" : 문자 배너의 시작 방향을 지정한다. 기본값은 right에서 시작한다.
     -. loop=nn : 문자 배너의 반복 회수를 지정한다.
     -. scrollamount=nn : 문자 배너의 움직임을 조절한다. 클수록 빠르며, 끊어지는 느낌이 난다.
     -. scrolldelay=nn : 문자 배너의 지연시간을 지정한다. 단위를 1000분의 1픽셀 즉 1000이면 1초동안 지연된다.

  • example 10 : 

─────────────────── 예제 화면 ─────────────────────

  • marquee Tag (example 10)입니다. 소스는 소스창에서 확인바랍니다.
    배경색(bgcolor) <marquee bgcolor=red width=600>글자</marquee>
    글자
    <marquee bgcolor=green width=600>글자</marquee>
    글자
    <marquee bgcolor=blue width=600>글자</marquee>
    글자
    가로세로범위(width,height) <marquee bgcolor=gray width=600>글자</marquee>
    글자
    <marquee bgcolor=gray height=30>글자</marquee>
    글자
    <marquee bgcolor=gray width=300 height=30>글자</marquee>
    글자
    가로세로여백(hspace,vspace) <marquee bgcolor=gray vspace=10>글자</marquee>
    글자
    <marquee bgcolor=gray hspace=10>글자</marquee>
    글자
    <marquee bgcolor=gray hspace=10 vspace=10>글자</marquee>
    글자
    처리방법(behavior) <marquee bgcolor=gray height=30 behavior=scroll>글자</marquee>
    글자
    <marquee bgcolor=gray height=30 behavior=slide>글자</marquee>
    글자
    <marquee bgcolor=gray behavior=alternate>글자</marquee>
    글자
    처리방향(direction) <marquee bgcolor=gray height=30 direction=right>글자</marquee>
    글자
    <marquee bgcolor=gray height=30 direction=left>글자</marquee>
    글자
    <marquee bgcolor=gray align=center direction=up>글자</marquee>
    글자
    <marquee bgcolor=gray align=center direction=down>글자</marquee>
    글자
    반복횟수(loop) <marquee bgcolor=gray loop=1>글자</marquee>
    글자
    <marquee bgcolor=gray loop=10>글자</marquee>
    글자
    스크롤값(scrollamount) <marquee bgcolor=gray scrollamount=1>글자</marquee>
    글자
    <marquee bgcolor=gray scrollamount=5>글자</marquee>
    글자
    <marquee bgcolor=gray scrollamount=20>글자</marquee>
    글자
    스크롤값(scrolldelay) <marquee bgcolor=gray scrolldelay=1>글자</marquee>
    글자
    <marquee bgcolor=gray scrolldelay=100>글자</marquee>
    글자
    <marquee bgcolor=gray scrolldelay=500>글자</marquee>
    글자

───────────────────  소    스 ──────────────────────

<html>
 <head>
  <title>정보마당 - marquee Tag (example 10)</title>
 </head>
 <body bgcolor=white text=black link=blue vlink=gray alink=red>
 <li>marquee Tag (example 10)입니다. 소스는 소스창에서 확인바랍니다.<br><br>
 
 <table border=1 width=800 cellspacing=0 cellpadding=3>
 <tr><th rowspan=6 size=100 bgcolor=#534093><font color=white>배경색(bgcolor)</font></th>
 <th size=700 bgcolor=#9784D7><font size=2>&ltmarquee bgcolor=red width=600&gt글자&lt/marquee&gt</font></th></tr>
 <tr><td size=700 align=center><marquee bgcolor=red width=600>글자</marquee></td></tr>
 <tr><th size=700 bgcolor=#9784D7><font size=2>&ltmarquee bgcolor=green width=600&gt글자&lt/marquee&gt</font></th></tr>
 <tr><td size=700 align=center><marquee bgcolor=green width=600>글자</marquee></td></tr>
 <tr><th size=700 bgcolor=#9784D7><font size=2>&ltmarquee bgcolor=blue width=600&gt글자&lt/marquee&gt</font></th></tr>
 <tr><td size=700 align=center><marquee bgcolor=blue width=600>글자</marquee></td></tr>

 <tr><th rowspan=6 size=100 bgcolor=#534093><font color=white>가로세로범위(width,height)</font></th>
 <th size=700 bgcolor=#9784D7><font size=2>&ltmarquee bgcolor=gray width=600&gt글자&lt/marquee&gt</font></th></tr>
 <tr><td size=700 align=center><marquee bgcolor=gray width=600>글자</marquee></td></tr>
 <tr><th size=700 bgcolor=#9784D7><font size=2>&ltmarquee bgcolor=gray height=30&gt글자&lt/marquee&gt</font></th></tr>
 <tr><td size=700 align=center><marquee bgcolor=gray height=30>글자</marquee></td></tr>
 <tr><th size=700 bgcolor=#9784D7><font size=2>&ltmarquee bgcolor=gray width=300 height=30&gt글자&lt/marquee&gt</font></th></tr>
 <tr><td size=700 align=center><marquee bgcolor=gray width=300 height=30>글자</marquee></td></tr>

 <tr><th rowspan=6 size=100 bgcolor=#534093><font color=white>가로세로여백(hspace,vspace)</font></th>
 <th size=700 bgcolor=#9784D7><font size=2>&ltmarquee bgcolor=gray vspace=10&gt글자&lt/marquee&gt</font></th></tr>
 <tr><td size=700 align=center><marquee bgcolor=gray vspace=10>글자</marquee></td></tr>
 <tr><th size=700 bgcolor=#9784D7><font size=2>&ltmarquee bgcolor=gray hspace=10&gt글자&lt/marquee&gt</font></th></tr>
 <tr><td size=700 align=center><marquee bgcolor=gray hspace=10>글자</marquee></td></tr>
 <tr><th size=700 bgcolor=#9784D7><font size=2>&ltmarquee bgcolor=gray hspace=10 vspace=10&gt글자&lt/marquee&gt</font></th></tr>
 <tr><td size=700 align=center><marquee bgcolor=gray hspace=10 vspace=10>글자</marquee></td></tr>

 <tr><th rowspan=6 size=100 bgcolor=#534093><font color=white>처리방법(behavior)</font></th>
 <th size=700 bgcolor=#9784D7><font size=2>&ltmarquee bgcolor=gray height=30 behavior=scroll&gt글자&lt/marquee&gt</font></th></tr>
 <tr><td size=700 align=center><marquee bgcolor=gray height=30 behavior=scroll>글자</marquee></td></tr>
 <tr><th size=700 bgcolor=#9784D7><font size=2>&ltmarquee bgcolor=gray height=30 behavior=slide&gt글자&lt/marquee&gt</font></th></tr>
 <tr><td size=700 align=center><marquee bgcolor=gray height=30 behavior=slide>글자</marquee></td></tr>
 <tr><th size=700 bgcolor=#9784D7><font size=2>&ltmarquee bgcolor=gray behavior=alternate&gt글자&lt/marquee&gt</font></th></tr>
 <tr><td size=700 align=center><marquee bgcolor=gray height=30 behavior=alternate>글자</marquee></td></tr>

 <tr><th rowspan=8 size=100 bgcolor=#534093><font color=white>처리방향(direction)</font></th>
 <th size=700 bgcolor=#9784D7><font size=2>&ltmarquee bgcolor=gray height=30 direction=right&gt글자&lt/marquee&gt</font></th></tr>
 <tr><td size=700 align=center><marquee bgcolor=gray height=30 direction=right>글자</marquee></td></tr>
 <tr><th size=700 bgcolor=#9784D7><font size=2>&ltmarquee bgcolor=gray height=30 direction=left&gt글자&lt/marquee&gt</font></th></tr>
 <tr><td size=700 align=center><marquee bgcolor=gray height=30 direction=left>글자</marquee></td></tr>
 <tr><th size=700 bgcolor=#9784D7><font size=2>&ltmarquee bgcolor=gray align=center direction=up&gt글자&lt/marquee&gt</font></th></tr>
 <tr><td size=700 align=center><marquee bgcolor=gray height=30 align=center direction=up>글자</marquee></td></tr>
 <tr><th size=700 bgcolor=#9784D7><font size=2>&ltmarquee bgcolor=gray align=center direction=down&gt글자&lt/marquee&gt</font></th></tr>
 <tr><td size=700 align=center><marquee bgcolor=gray height=30 align=center direction=down>글자</marquee></td></tr>

 <tr><th rowspan=4 size=100 bgcolor=#534093><font color=white>반복횟수(loop)</font></th>
 <th size=700 bgcolor=#9784D7><font size=2>&ltmarquee bgcolor=gray loop=1&gt글자&lt/marquee&gt</font></th></tr>
 <tr><td size=700 align=center><marquee bgcolor=gray loop=1>글자</marquee></td></tr>
 <tr><th size=700 bgcolor=#9784D7><font size=2>&ltmarquee bgcolor=gray loop=10&gt글자&lt/marquee&gt</font></th></tr>
 <tr><td size=700 align=center><marquee bgcolor=gray loop=10>글자</marquee></td></tr>


 <tr><th rowspan=6 size=100 bgcolor=#534093><font color=white>스크롤값(scrollamount)</font></th>
 <th size=700 bgcolor=#9784D7><font size=2>&ltmarquee bgcolor=gray scrollamount=1&gt글자&lt/marquee&gt</font></th></tr>
 <tr><td size=700 align=center><marquee bgcolor=gray scrollamount=1>글자</marquee></td></tr>
 <tr><th size=700 bgcolor=#9784D7><font size=2>&ltmarquee bgcolor=gray scrollamount=5&gt글자&lt/marquee&gt</font></th></tr>
 <tr><td size=700 align=center><marquee bgcolor=gray scrollamount=5>글자</marquee></td></tr>
 <tr><th size=700 bgcolor=#9784D7><font size=2>&ltmarquee bgcolor=gray scrollamount=20&gt글자&lt/marquee&gt</font></th></tr>
 <tr><td size=700 align=center><marquee bgcolor=gray scrollamount=20>글자</marquee></td></tr>

 <tr><th rowspan=6 size=100 bgcolor=#534093><font color=white>스크롤값(scrolldelay)</font></th>
 <th size=700 bgcolor=#9784D7><font size=2>&ltmarquee bgcolor=gray scrolldelay=1&gt글자&lt/marquee&gt</font></th></tr>
 <tr><td size=700 align=center><marquee bgcolor=gray scrolldelay=1>글자</marquee></td></tr>
 <tr><th size=700 bgcolor=#9784D7><font size=2>&ltmarquee bgcolor=gray scrolldelay=100&gt글자&lt/marquee&gt</font></th></tr>
 <tr><td size=700 align=center><marquee bgcolor=gray scrolldelay=100>글자</marquee></td></tr>
 <tr><th size=700 bgcolor=#9784D7><font size=2>&ltmarquee bgcolor=gray scrolldelay=500&gt글자&lt/marquee&gt</font></th></tr>
 <tr><td size=700 align=center><marquee bgcolor=gray scrolldelay=500>글자</marquee></td></tr>
 </table>
 <br>
 </body>
</html> 

───────────────────────────────────────────── 
 

 

 

● 색상표

   색상표는 태그에서 글자등의 색상 지정시에 지정하는 것으로 색상명, 색상코드(16진수) 두가지가 있다.

 

 

  • HTML 색상명
    aliceblue antiquewhite aqua aquamarine
    azure beige bisque black
    blanchedalmond blue blueviolet brown
    burlywood cadetblue chartreuse chocolate
    coral cornflowerblue cornsilk crimson
    cyan darkblue darkcyan darkcoldenrod
    darkgray darkgreen darkkhaki darkmagenta
    darkolivegreen darkorange darkorchid darkred
    darksalmon darkseagreen darkslateblue darkslategray
    darkturquoise darkviolet deeppink deepskyblue
    dimgray dodgerblue firebrick floralwhite
    forestgreen fuchsia gainsboro ghostwhite
    gold goldenrod gray green
    greenyellow honeydew hotpink indianred
    indigo ivory lavender lavenderblush
    lemonchiffon lightblue lightcoral lightcyan
    lightgoldenrodyellow lightgreen lightgrey lightpink
    lightsalmon lightseagreen lightskyblue lightslategray
    lightsteelblue lightyellow lime limegreen
    linen magenta maroon mediumaquamarine
    mediumblue mediumorchid mediumpurple mediumseagreen
    mediumslateblue mediumspringgreen mediumturquoise mediumvioletred
    midnightblue mintcream mistyrose navajowhite
    navy oldlace olive olivedrab
    orange orangered orchid palegoldenrod
    palegreen paleturquoise palevioletred papayawhip
    peachpuff peru pink plum
    powderblue purple red rosybrown
    saddlebrown salmon sandybrown seagreen
    seashell sienna silver skyblue
    slateblue slategray snow springgreen
    steelblue tan teal thistle
    tomato turquoise voilet wheat
    white whitesmoke yellow yellowgreen
  • HTML 색상코드
    #EEEEEE #DDDDDD #CCCCCC #BBBBBB #AAAAAA #999999 #888888 #777777
    #666666 #555555 #444444 #333333 #222222 #111111 #000000 #FF0000
    #EE0000 #DD0000 #CC0000 #BB0000 #AA0000 #990000 #880000 #770000
    #660000 #550000 #440000 #330000 #220000 #110000 #FFFFFF #FFFFCC
    #FFFF99 #FFFF66 #FFFF33 #FFFF00 #CCFFFF #CCFFCC #CCFF99 #CCFF66
    #CCFF33 #CCFF00 #99FFFF #99FFCC #99FF99 #99FF66 #99FF33 #99FF00
    #66FFFF #66FFCC #66FF99 #66FF66 #66FF33 #66FF00 #33FFFF #33FFCC
    #33FF99 #33FF66 #33FF33 #33FF00 #99FF66 #99FF33 #99FF00 #66FFFF
    #66FFCC #66FF99 #FFCCFF #FFCCCC #FFCC99 #FFCC66 #FFCC33 #FFCC00
    #CCCCFF #CCCCCC #CCCC99 #CCCC66 #CCCC33 #CCCC00 #99CCFF #99CCCC
    #99CC99 #99CC66 #99CC33 #99CC00 #66CCFF #66CCCC #66CC99 #66CC66
    #66CC33 #66CC00 #33CCFF #33CCCC #33CC99 #33CC66 #33CC33 #33CC00
    #99CC66 #99CC33 #99CC00 #66CCFF #66CCCC #66CC99 #FF99FF #FF99CC
    #FF9999 #FF9966 #FF9933 #FF9900 #CC99FF #CC99CC #CC9999 #CC9966
    #CC9933 #CC9900 #9999FF #9999CC #999999 #999966 #999933 #999900
    #6699FF #6699CC #669999 #669966 #669933 #669900 #3399FF #3399CC
    #339999 #339966 #339933 #339900 #999966 #999933 #999900 #6699FF
    #6699CC #669999 #FF66FF #FF66CC #FF6699 #FF6666 #FF6633 #FF6600
    #CC66FF #CC66CC #CC6699 #CC6666 #CC6633 #CC6600 #9966FF #9966CC
    #996699 #996666 #996633 #996600 #6666FF #6666CC #666699 #666666
    #666633 #666600 #3366FF #3366CC #336699 #336666 #336633 #336600
    #996666 #996633 #996600 #6666FF #6666CC #666699 #FF33FF #FF33CC
    #FF3399 #FF3366 #FF3333 #FF3300 #CC33FF #CC33CC #CC3399 #CC3366
    #CC3333 #CC3300 #9933FF #9933CC #993399 #993366 #993333 #993300
    #6633FF #6633CC #663399 #663366 #663333 #663300 #3333FF #3333CC
    #333399 #333366 #333333 #333300 #0033FF #0033CC #003399 #003366
    #003333 #003300 #FF00FF #FF00CC #FF0099 #FF0066 #FF0033 #FF0000
    #CC00FF #CC00CC #CC0099 #CC0066 #CC0033 #CC0000 #9900FF #9900CC
    #990099 #990066 #990033 #990000 #6600FF #6600CC #660099 #660066
    #660033 #660000 #3300FF #3300CC #330099 #330066 #330033 #330000
    #0000FF #0000CC #000099 #000066 #000033 #000000 #00FF00 #00EE00
    #00DD00 #00CC00 #00BB00 #00AA00 #009900 #008800 #007700 #006600
    #005500 #004400 #003300 #002200 #001100 #0000FF #0000EE #0000DD
    #0000CC #0000BB #0000AA #000099 #000088 #000077 #000066 #000055
    #000044 #000033 #000022 #000011

 

  


● ETC

  • 주석처리 : 실제 페이지에는 안 나타나지만, 소스 분석에 도움이 되는 내용

    <!-- 내용 -->

  • 현재창으로 몇 초(content)후에 다른 사이트로 이동

    <meta http-equiv="refresh" content="5; url=http://www.jungbomadang.pe.kr">
반응형
저작자표시 비영리 변경금지

'IT > 컴퓨터' 카테고리의 다른 글

NEXT-852DCU3 CLONE 후 하드 인식 문제 해결 (2022-04-27)  (0) 2022.04.27
베이직스 노트북 14인치 노트북 고장 데이터 복구 (2022-03-22)  (2) 2022.03.20
view-source 에 대하여  (0) 2021.12.13
자동 문서(파일) 백업 배치파일  (0) 2021.12.13
자바스크립트 소스 - 일정시간 특정페이지 반복  (0) 2021.12.13

'IT/컴퓨터'의 다른글

  • 현재글HTML

관련글

댓글

티스토리툴바