학습목표 학습목차 Table 태그를 이용하여 표 만들기를 이해할 수 있습니다.

Presentation on theme: "학습목표 학습목차 Table 태그를 이용하여 표 만들기를 이해할 수 있습니다."— Presentation transcript:

1 학습목표 학습목차 Table 태그를 이용하여 표 만들기를 이해할 수 있습니다.
TR, TH, TD 태그하여 다양한 모양의 표를 만들 수 있습니다. 다양한 Hyperlink의 생성 방법을 이해할 수 있습니다. 학습목차 <table> 태그 <tr>, <td> 태그 행/렬 합치기 Hyperlink 태그와 href 속성 이미지에 링크 설정 Hyperlink 태그와 name 속성

2 표(테이블) 작성 태그 : <table>…</table>
TR(Table Row)태그 : Table 태그내부에 존재하며 1개의 행 생성 TH(Table Head)와 TD(Table Data) 태그 : Tr 태그 내부에 존재하며 실제 표시될 내용(데이터) 표현 <table>…</table> 태그 <table>   <tr>     <th>학교 <th>이름   </tr>     <td>한국대학교 <td>홍길동 <tr>     <td>대한대학교 <td>이몽룡 </table> 선을 나타나게 하려면 TABLE 태그의 속성들을 사용 <th>는 <td>에 비해 글씨의 두께가 굵고 기본 정렬방식이 가운데라는 차이만 있음

3 표(테이블) 작성 태그 : <table>…</table>
<table border=1> <tr> <th>학교 <th>이름 </tr> <td>한국대학교 <td>홍길동 <td>대한대학교 <td>이몽룡 </table> 03_1.html

4 표(테이블) 작성 태그 : 속성 및 속성값 속성 및 속성값 <table align=left|center|right>
브라우저 화면에서 표의 위치 지정 <table width=숫자|%> 브라우저 화면에서 표의 가로 크기 지정(숫자는 픽셀값, %는 표가 브라우저의 길이에 따라 차지하는 비율) <table height=숫자|%> 브라우저 화면에서 표의 세로 크기 지정(숫자는 픽셀값, %는 표가 브라우저의 높이에 따라 차지하는 비율) <table bgcolor=색상값> 표 전체의 색상 지정(색상단어, RGB값) <table bordercolor=색상값> 표 선의 색상지정(색상단어, RGB값) <table border=숫자> 표의 가장자리 선 굵기 지정(픽셀) <table cellspacing=숫자> 셀과 셀사이의 경계선 굵기 지정(픽셀) <table cellpadding=숫자> 셀의 선과 데이터와의 간격 지정(픽셀) <table frame=void|above|below|hsides| vsides|lhs|rhs|box|border> 표의 어느 선을 나타낼 것인지 지정 <table rules=none|groups|rows|cols|all> frame과 비슷하지만 가장자리까지 나타남

5 테이블의 다양한 속성 예 : 표의 가장자리 선 두께/브라우저와 표와의 위치 03_2.html 예 : 표의 길이와 높이
<table border=10 align=center>   <tr>     <th>학교 <th>이름   </tr>     <td>한국대학교 <td>홍길동     <td>대한대학교 <td>이몽룡 </table> 03_2.html 예 : 표의 길이와 높이 <table border=5 width=300 height=200>   <tr>     <th>학교 <th>이름   </tr>     <td>한국대학교 <td>홍길동     <td>대한대학교 <td>이몽룡 </table> 03_3.html 위 예에서와 같이 픽셀 단위로 지정하지 않고 백분율(%)로 지정하면 브라우저의 크기에 따라 표의 길이와 높이가 변경

6 테이블의 다양한 속성 표의 크기를 픽셀 단위로 지정하지 않고 백분율(%)로 지정하면
브라우저의 크기에 따라 표의 너비와 높이가 변경 <table border=5 width=50%> </table> 03_3_1.html <table border=10 bgcolor=yellow bordercolor=red> <tr> <th>학교 <th>이름 </tr> <td>한국대학교 <td>홍길동 <td>대한대학교 <td>이몽룡 </table> 03_4.html

7 테이블 경계선 변경 : frame, rules 속성
void 선이 없는 표. 기본값 lhs 중간 왼쪽변만 선 표시 above 각행의 윗변만 선 표시 rhs 중간 오른쪽변만 선 표시 below 각행의 아랫변만 선 표시 box 네 변 모두 표시 hsides 가로선만 표시(Horizental) border vsides 세로선만 표시(Vertical) rules 속성 및 속성값 none 선이 없는 표. 기본값 all 모든 선 표시 rows 행 사이에 선 표시 cols 열 사이에 선 표시 group thead, tfoot, tbody, colgroup, col 사이에만 선 표시

8 테이블 경계선 변경 : frame 속성 frame 속성을 이용한 선의 일부 표시(lhs)
<table align=center frame=lhs>   <tr>  <th>학교 <th>이름   </tr>   <tr>  <td>한국대학교 <td>홍길동     <td>대한대학교 <td>이몽룡 </table> 03_5.html <table align=center frame=above> <tr> <th>학교 <th>이름 </tr> <tr> <td>한국대학교 <td>홍길동 <td>대한대학교 <td>이몽룡 </table> 03_6.html

9 테이블 경계선 변경 : rules 속성 rules 속성을 이용한 선의 일부 표시(cols)
<table align=center rules=cols>   <tr>     <th>학교 <th>이름   </tr>     <td>한국대학교 <td>홍길동     <td>대한대학교 <td>이몽룡 </table> 03_7.html

10 테이블의 다양한 속성 셀간의 선 굵기 조정(cellspacing) 셀의 선과 데이터와의 여백 조정(cellpadding)
<table border=10 cellspacing=10>   <tr>   <th>학교 <th>이름   </tr>   <tr>   <td>한국대학교 <td>홍길동   <tr>   <td>대한대학교 <td>이몽룡 </table> 03_8.html 셀의 선과 데이터와의 여백 조정(cellpadding) <table border=5 cellpadding=10>   <tr>     <th>학교 <th>이름   </tr>     <td>한국대학교 <td>홍길동     <td>대한대학교 <td>이몽룡 </table> 03_9.html

11 테이블의 다양한 속성 표안에 표 삽입하기 <table border=5> <tr>
<td>국가</td>        <td>주요도시</td></tr>  <tr> <td>한국</td>        <td>서울</td></tr>   <tr> <td>미국</td>       <td>           <table border>              <tr> <td>동부</td>                <td>서부</td></tr> <td>워싱턴</td>                 <td>LA</td></tr>           </table>        </td> </tr> </table> 03_10.html

12 <tr>…</tr> 태그(Table Row)
특히 bgcolor와 같은 속성이 TABLE 태그에서 사용되고 TR 태그에서도 사용되면 TR 태그에서 설정된 것이 우선 예 : 속성 및 속성값 <tr bgcolor=색상값> 각 행의 색상을 지정 <tr bordercolor=색상값> 각 행의 선 색상지정 <tr align=left|center|right> 셀에 있는 데이터의 수평정렬 선택 (center는 th의 기본 값이고 left는 td의 기본값이다) <tr valign=top|middle|bottom> 셀에 있는 데이터의 수직정렬 선택(middle 기본값)

13 <tr> 태그 <table border=5 width=300 height=200>
  <tr align=right valign=top>     <th>학교 <th>이름   </tr>   <tr align=center valign= bottom>     <td>한국대학교 <td>홍길동   <tr bgcolor=yellow bordercolor=red>     <td>대한대학교 <td>이몽룡 </table> 03_11.html

14 <th> <td> 태그 : (Table Header, Table Data)
표의 작성은 TABLE 태그로 표의 시작과 끝을 알리고, TR 태그로 행을 시작한 다음에 각 행에 들어갈 셀을 TH와 TD로 생성 TR 태그의 속성이 각 행에 대해 영항을 미친다면, TH, TD 태그의 속성은 해당 셀에 대해서만 영향 만일 TH와 TD 태그의 속성이 상위 태그인 TR 태그의 속성과 상충되는 속성이 사용될 경우, TH와 TD 태그의 속성이 우선 bgcolor, bordercolor, align, valign 등의 속성이 TABLE이나 TR 태그에서 사용되었다 하더라도 TH이나 TD 태그에서 중복되게 사용될 경우에는 TH와 TD 태그에 사용된 속성이 적용 TD에 굵은체와 가운데 정렬 기능이 포함된 것이 TH 예 : 속성 및 속성값 <td bgcolor=색상값> 해당 셀의 색상 지정 <tr bordercolor=색상값> 각 행의 선 색상지정 <td align=left|center|right> 해당 셀 데이터의 셀 내에서의 수평 정렬 <td valign=top|middle|bottom> 해당 셀 데이터의 셀 내에서의 수직 정렬 <td nowrap> 테이터가 위치할 셀 크기가 작더라도 줄바꿈을 발생시키지 않는다. <td colspan=숫자> 두 개 이상의 셀을 가로방향을 합침(열병합) <td rowspan=숫자> 두 개 이상의 셀을 세로방향을 합침(행병합)

15 <th>, <td> 태그 예제
셀의 크기에 상관없이 데이터의 줄바꿈 금지 <table border=2 width="10%"> <tr> <th>가나다라</th> <th> 마바사</th> </tr> <td bgcolor=yellow bordercolor=red>가나다라</td> <td nowrap> 마바사 마바사</td> 03_12.html 위의 예에서 표를 브라우저의 10%로 고정하였기 때문에 표는 브라우저의 10% 크기만을 차지해야 하나, nowrap 속성에 의해 해당 셀의 데이터는 줄바꿈이 발생하지 않음.

16 행/열 합치기 : rowspan, colspan
다음과 같은 형태의 행/열 합치기 99년 매출액 상반기 하반기 1,000 500 합계 1,500 03_12.html 위의 표는 합쳐지기 전 4행 3열 '99년' 데이터는 1번째 행, 1번째 열이면서 3개의 행이 병합되었고(rowspan) '매출액' 데이터는 1번째 행, 2번째 열이면서 2개의 열이 병합되었고(colspan) '1,500' 데이터는 4번째 행, 2번째 열이면서 2개의 열이 병합되었다(colspan) TD 태그의 속성에 유의

17 행/열 합치기 예제 <table border=2 bgcolor=yellow bordercolor=blue>
<tr> <td valign=top rowspan=3>99년 <td align=center colspan=2>매출액 <tr bgcolor=gray bordercolor=red> <td>상반기 <td>하반기 <td align=right>1,000 <td align=right>500 <td bgcolor=green>합계 <td align=center colspan=2 >1,500 </table> 03_13.html

18 표 제목 태그 : <caption>…</caption>
CAPTION 태그는 표의 제목을 붙이는 것으로 TABLE 태그 바로 아래 한번만 사용 <table border=5 cellpadding=10> <caption>나의 친구</caption>   <tr>   <th>학교 <th>이름   </tr>   <td>한국대학교 <td>홍길동   <td>대한대학교 <td>이몽룡 </table> 03_14.html

19 하이퍼링크 : <a>…</a>
웹 문서의 특징은 대부분 하이퍼링크 구조 링크 생성 태그 : <a> <a>는 Anchor(닻)의 약자로, 끝맺는 </a>가 반드시 필요 링크 생성 요령 : "무엇을 눌렀을 때 어떤 것을 보여줄 것인가?“ 무엇 : 브라우저에 보이는 문자 혹은 이미지(정보기술공학과) 어떤 것 : 무엇을 클릭했을 때 나타날 내용( <a href=" 정보기술공학과</a> 방문객의 눈에 보이는 링크는 “정보기술공학과"이라는 구절이고 이 부분을 눌렀을 때 보여지는 내용은 " 이라는 곳의 홈페이지 눈에 보이는 링크의 앞뒤에 <a>와 </a> 태그를 각각 넣어주고, 눌렀을 때 보여줄 내용은 <a> 태그의 href 속성을 이용하여 써준다. 보여줄 내용은 자신의 홈페이지에 있는 파일일 수도 있고, 다른 사이트일 수도 있음.

20 하이퍼링크 : <a>…</a>
속성 및 속성값 <a href="URL">  링크를 클릭했을 때 어디로 갈 것인지를 결정하는 속성 <a name="문자열">  한 파일 내의 중간, 끝 등 특정부분을 지정하는 데 쓰이며, <a href="#문자열">…</a>의 링크되는 부분이다.  name 속성을 사용한 <a> 태그는 </a>를 사용하지 않는다. <a target= 프레임이름|_blank |_top> - 프레임 안에서 링크할 때 링크된 웹 문서 혹은 사이트가 어느 프레임에 나타나게 할 것인가를 지정한다. 프레임을 나눌 경우, 각 FRAME 태그 내에 NAME 속성에 각 프레임의 이름을 부여하는 데, 이 때 사용한 이름을 이용 - _blank를 사용하면 새 윈도우가 생성되어 링크된 문서를 출력한다. - _top을 사용하면 현재 윈도우를 새롭게 하고 전체 화면에 출력된다. 단독으로 쓰이지 않고 <a href="URL" target=프레임네임|_blalnk|_top>…</a> 형태로 쓰임.

21 하이퍼링크 : href 속성 <a href="URL"> 예 1 : 동일 디렉토리의 다른 HTML 파일 링크
홈페이지 소개가 링크로 나타나며 이것을 클릭했을 때 현재의 HTML 파일과 같은 디렉토리에 있는 intro.html이라는 HTML 파일을 나타나게 함. <BODY> 홍길동의 홈페이지 입니다. </BODY>  <a href="intro.html">홈페이지 소개</a> 03_15.html intro.html

22 하이퍼링크 : href 속성 예2 : 다른 디렉토리의 그림 파일 링크 디렉토리 계층구조의 링크는 상대경로와 절대경로 참조
나의 얼굴이 링크로 나타나며 이것을 클릭했을 때 이 HTML 파일이 위치한 디렉토리에서 image 디렉토리 밑에 있는 naver_logo.gif 라는 파일을 나타나게 함. <BODY> <a href="image/naver_logo.gif">네이버로고</a> </BODY> 03_16.html 디렉토리 계층구조의 링크는 상대경로와 절대경로 참조 다른 사이트로 연결할 때 반드시 http, ftp, mailto와 같은 프로토콜도 반드시 표시.

23 하이퍼링크 : href 속성 예 3 : 다른 웹 사이트 링크 예 4 : 다른 웹 사이트의 특정 파일 링크
중앙일보가 링크로 나타나며 이것을 클릭했을 때 이 사이트의 시작 홈페이지를 나타나게 함.  <a href=" 예 4 : 다른 웹 사이트의 특정 파일 링크 중앙일보 정치면이 링크로 나타나며 이것을 클릭했을 때 이 사이트의 pol.html을 나타나게 함.   <a href=" 정치면</a> 예 5 : 다른 FTP 사이트의 특정 파일 링크 AOL FTP가 링크로 나타나며 이것을 클릭했을 때 이 사이트의 FTP 디렉토리 구조를 나타나게 함.  <a href="ftp://ftp.aol.com">AOL FTP</a>

24 하이퍼링크 : href 속성 예 6 : 전자우편 링크 예 7 : 보여줄 수 없는 파일 링크
메일이 링크로 나타나며 이것을 클릭했을 때 방문자의 기본 전자우편 클라이언트가 동작하며 수신자 난에 자동적으로 입력 mailto://가 아니라 mailto: 라는 점에 주의 <a 주세요! 예 7 : 보여줄 수 없는 파일 링크 에디트 플러스가 링크로 나타나며 이것을 클릭했을 때 다운로드할 수 있는 윈도우가 나타남. <a href="epp320.exe">에디트 플러스</a>를 받아가세요. 03_17.html

25 하이퍼링크 : name 속성 <a name="문자열"> 하나의 HTML 파일 내의 특정 부분 링크
각 링크를 클릭하면 href 속성에 부여된 "#문자열"과 동일한 name 속성의 "문자열"을 찾아 그 처음 부분을 브라우저의 상단에 나타나게 함. 본문 내용의 각 장 마지막 부분에서 목차로 되돌아가기 위한 링크인 "#index"를 사용하여 각 장의 내용을 읽은 후 목차 부분으로 되돌아 감.

26 <HTML> <BODY> <a name=index>목 차</a><br> <a href="#chap1">1장. 서론</a><br> <a href="#chap2">2장. 본론1</a><br> <a href="#chap3">3장. 본론2</a><br> <a href="#chap4">4장. 소결론</a><br> <a href="#chap5">5장. 결론</a><br> <br><br><br><br><br><br><br><br><br><br> <a name="chap1">1장. 서론<br> <a href=#index>목차로 돌아가기<br> <a name="chap2">2장. 본론1<br> <a name="chap3">3장. 본론2<br> <a name="chap4">4장. 소결론<br> <a name="chap5">5장. 결론<br> </BODY> </HTML> 03_18.html