Transcript HTML_태그(2)_테이블,프레임

HTML 태그(2)
테이블, 프레임
미디어스쿨 웹 수업
2002/4/2 (화) 11:00 – 13:00
호기심 천국
• 긍데 이것두 알고 싶어여 ㅡㅡ 뭐냐믄 ㅡㅡ
1.홈피만들때 대부분 만드는것까지는 어케 하
면 되던뎅 ㅡㅡ 그다음 자기 홈피를 야후나
다음쪽에 알리고 내이름만 딱치면 내홈피가
뜨게 할라믄 어케 해야되는지
2.ㅡㅡ 또 ㅡㅡ 다음같이 그러케 주소두 만들면
서 그런 사이트를 만들려면 어떤형식으루 해
야 되는지 알거 싶다 아이가 ㅡㅡ 뭐
지난시간 복습
• 절대경로와 상대경로
클라이언트
서버
HTML문서 요청(URL)
HTML문서 제공
업로드
http://myhome.shinbiro.com/~offret
지난 시간 복습
• 지난시간에 배운 HTML 태그를 이용하여 다음과 같은 HTML
문서를 만들어 봅시다.
그림의 절대경로 :
http://www.nkino.com/movie/2732/p2.gif
테이블 만들기 : <TABLE>
<TABLE BORDER="1">
<TR>
<TD>악기</TD>
<TD>줄 수</TD>
<TD>연주형태</TD>
</TR>
<TR>
<TD>가야금</TD>
<TD>6줄</TD>
<TD>'술대'라는 막대로 퉁김</TD>
</TR>
<TR>
<TD>거문고</TD>
<TD>12줄</TD>
<TD>손으로 퉁김</TD>
</TR>
</TABLE>
테이블 태그 속성
Align=left
Valign=top
Valign=middle
Valign=bottom
Align=center
cellpadding
Align=right
나는야
나는야
나는야
나는야
나는야
나는야
나는야
나는야
나는야
cellspacing
width
border
height
테이블 태그 속성
<B>1600년대 작곡가</B>
<TABLE BORDER="1" CELLPADDING="10">
<TR><TD>작곡가</TD><TD>출생</TD><TD>사망</TD></TR>
<TR><TD>비발디</TD><TD>1678.3.4</TD><TD>1741.7.28
</TD></TR>
<TR><TD>헨델</TD><TD>1685.2.23 </TD><TD>1759.4.14
</TD></TR>
</TABLE>
<B>1700년대 작곡가</B>
<TABLE BORDER="20">
<TR><TD>작곡가</TD><TD>출생</TD><TD>사망</TD></TR>
<TR><TD>모짜르트</TD><TD>1756.1.27 </TD><TD>1791.12.5
</TD></TR>
<TR><TD>베토벤</TD><TD>1770.12.16 </TD><TD>1827.3.26
</TD></TR>
</TABLE>
<B>1800년대 작곡가</B>
<TABLE BORDER="1" CELLSPACING="20">
<TR><TD>작곡가</TD><TD>출생</TD><TD>사망</TD></TR>
<TR><TD>쇼팽</TD><TD>1810. 3. 1 </TD><TD>1849. 10. 17
</TD></TR>
<TR><TD>슈만</TD><TD>1810. 6. 8 </TD><TD>1856. 7. 29
</TD>
</TR>
</TABLE>
테이블 태그 속성
<TABLE BORDER="1" WIDTH="90%" HEIGHT="90%">
<TR>
<TH WIDTH="25%">정렬 방식</TH>
<TH WIDTH="25%">왼쪽으로 정렬</TH>
<TH WIDTH="25%">가운데로 정렬</TH>
<TH WIDTH="25%">오른쪽으로 정렬</TH>
</TR>
<TR>
<TH>위로 정렬</TH>
<TD ALIGN="LEFT" VALIGN="TOP">AAAAA</TD>
<TD ALIGN="CENTER" VALIGN="TOP">AAAAA</TD>
<TD ALIGN="RIGHT" VALIGN="TOP">AAAAA</TD>
</TR>
<TR>
<TH>중간으로 정렬</TH>
<TD ALIGN="LEFT" VALIGN="MIDDLE">AAAAA</TD>
<TD ALIGN="CENTER" VALIGN="MIDDLE">AAAAA</TD>
<TD ALIGN="RIGHT" VALIGN="MIDDLE">AAAAA</TD>
</TR>
<TR>
<TH>아래로 정렬</TH>
<TD ALIGN="LEFT" VALIGN="BOTTOM">AAAAA</TD>
<TD ALIGN="CENTER" VALIGN="BOTTOM">AAAAA</TD>
<TD ALIGN="RIGHT" VALIGN="BOTTOM">AAAAA</TD>
</TR>
</TABLE>
셀 합치기 : ROWSPAN, COLSPAN
<P>Favorite Musicians</P>
<TABLE BORDER="15" WIDTH="80%">
<TR>
<TH WIDTH="50%">분야</TH>
<TH WIDTH="50%">이름</TH>
</TR>
<TR>
<TD WIDTH="50%" ROWSPAN="3">남자 성악가</TD>
<TD WIDTH="50%">루치아노 파바로티</TD>
</TR>
<TR>
<TD WIDTH="50%">플라시도 도밍고</TD>
</TR>
<TR>
<TD WIDTH="50%">호세 카레라스</TD>
</TR>
<TR>
<TD WIDTH="50%" ROWSPAN="2">여자 성악가</TD>
<TD WIDTH="50%">마리아 칼라스</TD>
</TR>
<TR>
<TD WIDTH="50%">조안 서덜랜드</TD>
</TR>
</TABLE>
프레임 태그 : <FRAME>
• 프레임이란?
– 프레임은 하나의 웹 브라우저 화면을 여러
개의 창으로 나누어 주는 역할을 한다.
– HTML 문서를 몇 개의 파일로 나누어 작성
한 후, 이 파일을 프레임으로 구분된 각 창
에서 보여줄 수 있다
프레임 태그 : <FRAME>
frame.html
Menu.html
content.html
프레임태그 : <FRAME>
<frameset cols=150,* border=0>
<frame src=“menu.html“ name=“left”>
<frame src=“content.html“ name=“right”>
</frame>
프레임 태그 : <FRAME>
• 가로로 나누기
<FRAMESET ROWS="각 프레임의 세로 길이들">
• 세로로 나누기
<FRAMESET COLS="각 프레임의 가로 길이들">
• 만들고 싶은 프레임의 개수 만큼 길이를 입력하고, 각각 쉼표로
구분
• 프레임의 길이
–
–
–
–
픽셀의 수 : 예) 두개로 나눌때 "140, *"
백분율 : 예) 세개로 나눌때 "20%, 30%, 50%
비율 : 예) 두개를 3:1로 나눌때 "3*, *"
* : 나머지 부분을 대신해서 사용할 수 있음
• 프레임에 보여질 문서
– <FRAME SRC="문서 이름">
프레임 태그 : <FRAME>
• NAME 속성
– 프레임의 이름을 지정할 수 있다.
– 앵커(<A>) 태그에서 TARGET 속성으로 프
레임의 이름을 지정하면 지정된 프레임에
서 문서를 보여준다.
실습 : 이력서 만들기