표 만들기 - TABLE html/Java Script



TABLE - 표 만들기. 홈페이지의 레이아웃을 완성

표는 줄(row)과 칸(column), 셀(cell)로 이루어진다.


1.표를 만드는 <TABLE> 태그 입력
<TABLE>

</TABLE>

2.줄을 먼저 만든다. 2줄일 경우 <TR>태그와 </TR>태그 두 쌍을 넣는다.

<TABLE>
    <TR>
    </TR>
    <TR>
    </TR>
</TABLE>

3.칸이 3개면 각 줄마다 칸을 3개씩 넣는다. <TR>안에 <TD>와 </TD>를 세 쌍씩 삽입

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


4.테두리 선이 보이게 하려면 <TABLE BORDER="1">로 해준다.



<TABLE> 태그 안에 사용하는 태그들

CAPTION : 표에 제목이나 설명 적음
TR : 표의 한 줄 지정
TD : 표의 한 칸 지정
TH : 제목이 들어갈 칸 만들 때 사용
COL : 여러줄에 걸친 칸 하나 지정
COLGROUP : 여러 COL요소를 하나의 그룹으로 묶음. SPAN속성을 사용해서 며책의 칸을 하나로 묶을지 지정
THEAD : 여러줄을 하나의 그룹으로 묶어 표의 머리글로 지정
TBODY : 여러줄을 그룹으로 묶어 표의 본문으로 지정
TFOOT : 여러줄을 그룹으로 묶어 표의 꼬리말로 지정. <TFOOT>은 <TBODY>보다 먼저 와야 한다.


예)
<TABLE BOLDER="1">
<THEAD>
<TR>
    <TD>&nbsp;</TD>
    <TD>년자료</TD>
</TR>
</THEAD>
<TFOOT>
<TR>
    <TD COLSPAN="2">출처:STAT-KOREA</TD>
</TR>
</TFOOT>
<TR>
    <TD>&nbsp; &nbsp;1995 &nbsp; &nbsp;</TD>
    <TD>1,641,293</TD>
</TR>
<TR>
    <TD>&nbsp; &nbsp;1996 &nbsp; &nbsp;</TD>
    <TD>3,180,989 </TD>
</TR>
</TABLE>




<COL>태그와 <COLGROUP> 태그는 <TR>과 <TD> 전, 즉 <TABLE> 바로 밑에 사용.
한 칸의 셀들에 대해서 사용할 때는 <COL>태그 사용, 인접한 여러 칸 묶을 때는 <COLGROUP> 사용.


예)칸이 다섯개인 표에서...
<TABLE>
<COL WIDTH="100" ALIGN="left"> //이 칸은 모두 너비를 100px로, 왼쪽정렬
<COLGROUP SPAN="2" ALIGN="center"> //두개 칸 모두 똑같이 정렬을 가운데로
<COL>//따로 속성지정x인 칸들도 <COL>태그를 이용해서 칸의개수를 맞춰야 한다.
<COL>
<TR>
    <TD> ...</TD> <TD>...</TD> <TD> ...</TD> <TD>...</TD><TD> ...</TD>
</TR>
<TR>
    <TD> ...</TD> <TD>...</TD> <TD> ...</TD> <TD>...</TD><TD> ...</TD>
</TR>
</TABLE>

배경음악,플래시,동영상 삽입-EMBED html/Java Script



EMBED - 배경음악,플래시,동영상 삽입

형식
<EMBED SRC="음악/플래시/동영상 파일" 속성="속성값">

    (속성 | 설명 | 속성값)
    SRC | 삽입할 배경음악 파일 | 파일경로,URL
    AUTOSTART | 자동재생 할것인지 지정 | true, false
    WIDTH/HEIGHT | 플레이어 크기지정 | 픽셀값
    LOOP | 반복횟수 지정 | true,false,숫자
    HIDDEN | 플레이어 감출것인지 지정 | true, false



이미지 삽입 - <IMG>, 링크 걸기 - <A> html/Java Script



<IMG> - 이미지 삽입

형식

<IMG SRC="파일경로" 속성="속성값">

    (속성 | 설명 | 속성값)
    SRC | 이미지 파일경로 지정 | 파일의경로(상대경로,절대경로),URL
    ALT | 풍선도움말 | 텍스트
    ALIGN | 이미지 정렬 | left,right, top, middle, bottom
    BORDER | 이미지 테두리선 | 숫자(0이면 테두리 없음)
    HEIGHT | 이미지 높이 조절 | 픽셀값
    WIDTH | 이미지 너비 조절 | 픽셀값
    HSPACE | 이미지 좌우여백 지정 | 픽셀값
    VSPACE | 이미지 상하여백 지정 | 픽셀값


ALIGN속성의 속성값들
left, right, top, middle, bottom

ALIGN 속성 사용하지 않았을 경우 : 이미지 바로옆에 텍스트 한줄만 표시되고 나머지 텍스트는 아래에 표시
ALIGN="left" : 이미지가 왼쪽으로 배치되고 오른쪽 공간에 텍스트 표시
ALIGN="right" : 이미지가 오른쪽으로 배치되고 왼쪽공간에 텍스트 표시
ALIGN="top" : 텍스트 맨 윗부분과 이미지 맨 윗부분을 맞추어 정렬
ALIGN="middle" : 텍스트 중간부분과 이미지 중간부분 맞추어 정렬
ALIGN="bottom" : 텍스트 맨 아래와 이미지 맨 윗부분을 맞추어 정렬




tip! 이미지 위에 마우스 커서 올릴때 나타나는 이미지 도구모음을 없애고 싶으면
다음의 태그를 <HEAD> 와 </HEAD> 사이에 삽입하면 된다.

<META HTTP-EQUIV="imagetoolbar" CONTENT="no">



<A> - 텍스트나 이미지에 링크 걸기

형식

<A HREF="연결 경로" 속성="속성값"> 텍스트 또는 이미지 </A>


    (속성 | 설명 | 속성값)
    HREF | 연결할 문서의 경로나 URL 지정 | 문서경로,URL 
    NAME | 문서내부에서 점프할 앵커 지정 | 영문 앵커 이름
    TARGET | 링크된 내용이 열릴 대상 지정 | _blank, _parent, _self, _top



<BODY>태그의 링크색상 관련 속성

LINK : 링크의 색상
VLINK : 방문했던 링크의 색상
ALINK : 링크를 클릭하는 순간의 색상


TARGET 속성 - 링크 내용을 어디에 표시할지 정함
속성값에 따라 다음과 같다.
_blank : 새로운 브라우저 창에 링크내용 표시
_self : 현재 브라우저 창에 표시.(default)
_parent : 현재 프레임 구성을 없애고 브라우저 창 전체에 링크내용 표시
_top : 현재 프레임 구성을 없애고 브라우저 창 전체에 링크내용 표시(_parent와 같음)
프레임이름 : 특정 프레임에 링크 표시


NAME 속성 - 문서 안의 지정한 위치로 이동(anchor)    
    
    형식

    <A HREF="#앵커이름"> 텍스트 또는 이미지 </A>
    ...
    <A NAME="앵커이름"></A>



ex)<A NAME="info"></A>영화정보</A>
    ...
    <A HREF="#info">영화정보</A>









목록을 표현하는 태그 - OL, UL, DL html/Java Script


웹문서 작성 시 목록을 표시하고 싶을 때 OL,UL,DL 태그를 사용한다.
목록에는 순서가 있는 목록과 순어가 없는 목록, 그리고 사전식 목록이 있다.


<OL> - Ordered List
각 항목을 순서대로 나열. 각 항목 앞과 뒤에 <LI> 와 </LI>를 붙여준다.

형식

<OL>
    <LI> 항목1 </LI>
    <LI> 항목2 </LI>
    ...
</OL>


[속성 | 설명 | 속성값]
TYPE | 각 항목 앞의 숫자를 영문자,로마자 또는 아라비아숫자로 표시 | A,a,I,i
START | 각 항목 앞에 붙는 숫자의 시작번호 지정 | 숫자


TYPE속성은 번호모양을 지정한다.
항목을 순서대로 나열할 때 숫자나 알파벳, 로마 숫자 등 여러가지 형식이 가능하다.
TYPE속성값이 지정되지 않으면 숫자로 표시되고(1,2,3...)
속성값이 "A"인 경우 알파벳 대문자로, "a"인 경우에는 알파벳 소문자로 표시된다.
"I"인 경우는 로마자 대문자로 표시되고(I,II,III...), "i"인 경우 로마자 소문자로 표시된다.(i,ii,iii...)





<UL> - Unordered List
순서가 없는 목록이다. 항목 앞에 번호가 붙는 대신 원이나 사각형 등의 기호(불릿)를 붙여 표시한다.
각 항목 앞과 뒤에 <LI> 와 </LI>를 붙여준다.

형식

<UL>
    <LI> 항목1 </LI>
    <LI> 항목2 </LI>
    ...
</UL>


UL태그의 속성으로는 TYPE(각 항목 앞에 붙는 불릿의 모양을 바꿈)이 있으며
속성값에는 disc, circle, square가 들어간다.

속성값이 지정되지 않았을 경우 또는 "disc"인 경우에는 색칠된 원(●)이,
"circle"인 경우 속이 빈 원(○)이, "square"인 경우엔 색칠된 사각형(■)이 들어간다. 





<DL> - Dictionary List
사전식 목록. 목록항목이 '제목'과 '설명' 부분으로 나뉘어져 있다.

형식

<DL>
    <DT> 제목 </DT>
    <DD> 설명 </DD>
</DL>






BODY,FONT,MARQUEE 태그 html/Java Script



HTML?

Hyper Text Markup Language의 약자로 하이퍼 기능이 있는 markup 언어이자 표준 웹문서이다.
HTML로 만든 문서의 마크업은 태그(Tag)라고 부르며 html은 태그들의 모임으로 봐도 무방하다.


태그의 기본 형식

<태그 속성1="속성값" 속성2="속성값" 속성n="속성값">

ex)<FONT COLOR="blue" SIZE="3" FACE="굴림체">
*속성과 속성값은 생략되기도 한다.



태그와 속성 모음


<BODY> - 배경색과 여백 등 문서의 기본 환경 조절
    (속성 | 설명 | 속성값)
    BACKGROUND | 배경이미지 | 파일이름이나 URL
    BGCOLOR | 배경색 | 색상이름 or 색상코드
    TEXT | 글자색 | 색상이름 or 색상코드
    LEFTMARGIN | 왼쪽여백 | 숫자(px)
    TOPMARGIN | 상단 여백 | 숫자(px)

ex) <BODY BGCOLOR="blue" TEXT="yellow"> - 문서의 배경은 파란색, 글자색은 노란색으로 설정.


<FONT> - 글자의 크기, 색상, 글꼴 등 텍스트의 속성을 조절
    (속성 | 설명 | 속성값)
    FACE | 글꼴선택 | 글꼴이름 - 윈도우 기본글꼴(굴림체,궁서체,돋움체,바탕체)
    COLOR | 텍스트 색상 | 색상이름 or 색상코드
    SIZE | 텍스트 크기 | 1~7의 숫자


<MARQUEE> - 글자나 이미지가 움직이도록 하는 태그
    (속성 | 설명 | 속성값)
    BEHAVIOR | 스크롤형태 | scroll,slide,alternate
    DIRECTION | 스크롤방향 | left,right,up,down
    SCROLLDELAY | 스크롤지연속도 | 숫자(1/1000초 단위)
    SCROLLAMOUNT | 한번에 스크롤되는 픽셀 수 | 숫자(px)
    BGCOLOR | 스크롤영역 배경색 | 색상이름 or 색상코드
    HEIGHT | 스크롤영역 높이 | 숫자(px)
    WIDTH | 스크롤영역 너비 | 숫자(px)
    LOOP | 스크롤 반복횟수 | 숫자 or infinite(무한반복)


기타 깨알같은 태그들 모음

<BR> - 줄바꿈
<P> - 문단 나눔. 속성으로는 단락의 정렬을 조절하는 ALIGN이 있다. 속성값에는 left, right, center중 선택
<HR> - 수평선 삽입.
        (속성 | 설명 | 속성값)
        ALIGN | 수평선의 정렬 | left, right, center
        COLOR | 수평선 색상 | 색상이름 or 색상코드
        SIZE | 수평선 굵기 | 숫자(px)
        WIDTH | 수평선 너비 | 픽셀 or %값
        NOSHADE | 그림자없는 수평선 | 없음

<Hn> - 제목을 나타냄. H1~H6까지 있다. 제목 텍스트를 진하게, 크기별로 표시할 수 있다.
<B> - bold. 텍스트를 진하게
<I> - 텍스트를 이탤릭체로 표시
<U> - Underline
<S> - Strike. 텍스트 가운데를 지나는 가로선 표시
<!-- 주석 내용 -->  - 주석표시
<ADDRESS> - 홈페이지 제작자의 주소나 연락처 등을 이탤릭체로 표시
<PRE> - 사용자가 입력하는만큼 여백이나 엔터를 그대로 인식
<BLOCKQUOTE> - 문단 들여쓰기. 주로 인용문에 사용
<BIG>/<SMALL> - 텍스트 크기를 한단계 크게 또는 작게 표시

1