이 름: 정홍도 (과장) 팀 명: 개발사업팀 일 자:

이 름: 정홍도 (과장) 팀 명: 개발사업팀 일 자: 2007.6.25
HTML기초과정 이 름: 정홍도 (과장) 팀 명: 개발사업팀 일 자:

목 차 ◈ 1. 웹의 소개 ◈ 2. HTML의 기초 문법 ◈ 3. HTML의 기본 태그 ◈ 4. 테이블 태그의 사용 ◈ 5. 입력 양식

1. 웹의 소개 웹의 등장 간편하고도 통합적인 서비스 제공 다양한 멀티미디어 서비스 지원 오디오, 이미지, 동화상, 텍스트
여러 분야에 적용 폭발적인 성장

1. 웹의 소개 인터넷 웹 서비스

1. 웹의 소개 웹의 구조 클라이언트-서버(Client-Server) 구조

인터넷 클라이언트 서버 클라이언트-서버 구조

웹 서비스의 구조

1. 웹의 소개 웹 브라우저 웹 상의 하이퍼텍스트 문서를 사용자에게 보여주기 위한 어플리케이션 하이퍼링크 및 멀티미디어 지원
다양한 인터넷 서비스의 제공 넷스케이프, 익스플로러, 오페라

제목 표시줄 메뉴 표준 단추 모음 주소 상태 마이크로소프트사의 로고 링크 모음 문서 영역 인터넷 익스플로러의 화면 구성

2. HTML 문서의 구조 2.1 HTML 문서의 기본 구조 2.2 간단한 HTML 문서의 예

2.1 HTML 문서의 기본 구조 HTML 태그 태그 작성에 필요한 기본 사항들
마크업 언어 : 태그를 이용하여 문서의 구조 및 모양을 정의 태그 : 문서의 구조와 형태를 표현하는 명령어 “< >” 로 표현 태그 작성에 필요한 기본 사항들 태그는 시작 태그와 종료 태그로 구성된다 시작 태그 “<>”와 종료 태그 “</>”가 반드시 존재 HTML 문서에서 사용되는 태그 형식

2.1 HTML 문서의 기본 구조 태그의 형식 태그의 예
 <태그> ∼ </태그>  <태그 속성=값> ∼ </태그>  <태그> 태그의 예  <H1> 태그의 기본 속성 </H1>, <font>~</font>,<img>…  <A HREF="test.html"> test 문서로 이동 </A>  <BR>

2.1 HTML 문서의 기본 구조 태그의 이름은 대소문자를 구분하지 않는다 여러 개의 공백문자들은 하나로 인식된다
<H1> <h1>, <TITLE> <title> 여러 개의 공백문자들은 하나로 인식된다 공백문자들은 하나를 제외하고 모두 무시 <예> <P> “HTML 문서에서는 공백을 무시한다.” </P>  결과 "HTML 문서에서는 공백을 무시한다.“

2.1 HTML 문서의 기본 구조 태그를 중첩하여 사용할 수 있다  순서가 올바른 태그 사용
먼저 사용한 태그가 나중에 사용한 태그를 포함하도록 종료 태그를 순서대로 지정  순서가 올바른 태그 사용 <H1> <H2> HTML은 구조적인 언어이다. </H2> </H1>  순서가 올바르지 못한 태그 사용 <P> <FONT SIZE="2">올바르지 못한 태그 </P></FONT>

2.1 HTML 문서의 기본 구조 HTML 문서의 기본 구조 <HTML> <HEAD>
<TITLE> 문서의 제목 </TITLE> </HEAD> <BODY> 문서의 내용 </BODY> </HTML> HTML 문서의 시작 HTML 문서의 머리 부분 HTML 문서의 제목 HTML 문서의 몸통 부분 HTML 문서의 종료

2.2 간단한 HTML 문서의 예 HTML 문서 작성 – test.html <HTML> <HEAD>
<TITLE>간단한 HTML 문서 작성 예제</TITLE> </HEAD> <BODY> HTML 문서는 머리와 몸통의 두 부분으로 구성되어 있으며, 이를 정의하기 위하여 3개의 기본적인 태그가 이용된다. 본 예제는 이러한 기본 태그를 사용하여 작성한 것이다 </BODY> </HTML>

3. HTML의 기본 태그 3.1 개본 태그 (문서구조 태그) 3.2 문자 서식 태그 3.3 단락 서식 태그 3.4 목록 태그
3.5 연결 태크 3.6 이미지 태크

3.1 기본 태그 문서 구조 태그 문서 구조를 정의하기 위한 기본 태그들
<HTML> : HTML 문서의 시작을 의미하며, 동시에 HTML 문서 형식으로 작성되었음을 나타낸다. <TITLE> : HTML 문서의 제목을 브라우저의 제목 표시줄에 나타낸다. <HEAD> : 작성하려는 HTML 문서에 대한 설명을 나타낸다. <BODY> : HTML 문서의 실제 내용을 포함한다.

3.1 기본 태그 <BODY> 태그의 속성 BACKGROUND = “이미지 파일명" : 배경으로 사용될 이미지
파일을 지정한다. BGCOLOR = “색상명” 또는 “RGB 값" : 배경색을 지정한다. TEXT = “색상명” 또는 “RGB 값" : 문자색을 지정한다. LINK = “색상명” 또는 “RGB 값" : 링크로 설정한 글자의 색을 지정한다. ALINK = “색상명” 또는 “RGB 값" : 링크된 문자를 클릭할 때 변화되는 색을 지정한다. VLINK = “색상명” 또는 “RGB 값" : 링크를 사용한 후의 문자 색을 지정한다.

3.1 기본 태그 색상 지정에 사용되는 색상표 웹 문서에서 자주 사용되는 색상 색상명 RGB 값 BLACK(검정색)
#000000 RED(빨간색) #FF0000 YELLOW(노란색) #FFFF00 GREEN(초록색) #008000 BLUE(파란색) #0000FF AQUA(하늘색) #00FFFF VIOLET(보라색) #EE82EE WHITE(하얀색) #FFFFFF

3.1 기본 태그 기본 태그를 이용한 간단한 예제 <HTML>
<HEAD> <TITLE> HTML 문서의 BODY 부분 </TITLE> </HEAD> <BODY BACKGROUND = “BG.GIF" TEXT = “BLACK"> <CENTER> <BR> 안녕하세요 <P>  <A HREF = NEXT.HTML> 여기를 누르면 다음 화면으로 연결됩니다. </A> </CENTER> </BODY> </HTML>

3.1 기본 태그 예제 결과

3.1 기본 태그 주석 태그 HTML 문서에 대한 부수적 설명, 해석 필요 시 사용 주석의 내용은 브라우저에서 출력되지 않는다
형 식 :

3.1 기본 태그 제목 태그 형 식 : <Hn ALIGN = “LEFT" 또는 “RIGHT" 또는 “CENTER">
∼ </Hn> n은 1부터 6가지의 숫자이다. <HTML> <HEAD> <TITLE> HTML 문서의 제목 부분 </TITLE> </HEAD> <BODY> <H1 ALIGN = “LEFT”> H1의 제목 크기 </H1> <H2 ALIGN = “CENTER”> H2의 제목 크기 </H2> <H3 ALIGN = “RIGHT”> H3의 제목 크기 </H3> <H4 ALIGN = “LEFT” > H4의 제목 크기 </H4> <H5 ALIGN = “CENTER”> H5의 제목 크기 </H5> <H6 ALIGN = “RIGHT”> H6의 제목 크기 </H6> </BODY> </HTML>

3.1 기본 태그 제목 태그 결과

3.2 문자 서식 태그 글꼴 태그 문자들의 크기, 모양을 조절 <B> : 굵은 문자(Bold)를 나타낸다.
<I> : 이탤릭체(Italic)를 나타낸다. <TT> <SUP> <SUB> <BIG> <SMALL> <U> <S> : 굵은 문자(Bold)를 나타낸다. : 이탤릭체(Italic)를 나타낸다. : 타자기체(TypewriterText)를 나타낸다. : 윗첨자(SUPerscript)를 나타낸다. : 아래첨자(SUBscript)를 나타낸다. : 글자 크기를 현재 크기보다 크게 나타낸다. : 글자 크기를 현재 크기보다 작게 나타낸다. : 밑줄(Underline)을 나타낸다. : 취소선(Strike Through)을 나타낸다.

3.2 문자 서식 태그 글꼴 태그 예제 <HTML>
<HEAD> <TITLE> HTML 문서의 글꼴 태그 </TITLE> </HEAD> <BODY> <B>굵은체</B> <I>이탤릭체</I> <TT>타자기체</TT> <P> 현재에<SUP>위첨자</SUP> <P> 현재에<SUB>아래첨자</SUB> <P> 현재보다<BIG>좀더 크게 <BIG>더욱 더 크게</BIG> 하기 </BIG> <P> 지금보다<SMALL>좀더 작게 <SMALL>더욱 더 작게</SMALL> 하기</SMALL> <P> <U>밑줄</U> <S>취소선</S> <P> <B> <I>굵은 이탤릭체</I> </B> </BODY> </HTML>

3.2 문자 서식 태그 글꼴 태그 예제 결과

3.2 문자 서식 태그 문자 크기의 지정 <Hn> : 문서의 제목 크기 변경
<Font> : 본문의 글자 크기 조절 1~7까지의 7단계로 구분 1이 가장 작고 7이 가장 크다 상대 크기 지정 형 식 : <FONT SIZE = “n” > ∼ </FONT> 형 식 : <FONT SIZE = “+n” 또는 “-n” > ∼ </FONT>

3.2 문자 서식 태그 <Font> 태그 예제 <HTML>
<HEAD> <TITLE> HTML 문서의 글자 크기 </TITLE> </HEAD> <BODY> <FONT SIZE = "1"> FONT SIZE 1 </FONT> <FONT SIZE = "2"> FONT SIZE 2 </FONT> <FONT SIZE = "3"> FONT SIZE 3 </FONT> <FONT SIZE = "4"> FONT SIZE 4 </FONT> <BR> <FONT SIZE = "5"> FONT SIZE 5 </FONT> <FONT SIZE = "6"> FONT SIZE 6 </FONT> <FONT SIZE = "7"> FONT SIZE 7 </FONT> <BR> <FONT SIZE = "4"> FONT SIZE 4 </FONT> <FONT SIZE = "-2"> FONT SIZE 3에서 2단계 작아짐 </FONT><BR> <FONT SIZE = "+2"> FONT SIZE 3에서 2단계 커짐 </FONT> </BODY> </HTML>

3.2 문자 서식 태그 <Font> 태그 예제 결과

3.2 문자 서식 태그 문자 색의 지정 COLOR 속성을 이용
형 식 : <FONT COLOR= “색상명” 또는 “RGB 값” > ∼ </FONT> 글자 색을 변경하는 예제 <HTML> <HEAD> <TITLE> HTML 문서의 글자 색 </TITLE> </HEAD> <BODY> <FONT COLOR = "BLUE" > BLUE </FONT> 파란색으로 표시 <BR> <FONT COLOR= "RED" > RED </FONT> 빨간색으로 표시 </BODY> </HTML>

3.2 문자 서식 태그 예제 결과

3.2 문자 서식 태그 문자의 흐름 효과 특수 문자의 사용
형 식 : <Marquee > ∼ </ Marquee> 특수 문자의 사용  < : <  > : >  & : &  “ : "  공백 :

3.2 문자 서식 태그 입력한 대로 보여주기 HTML 문서에서 입력한 한 번 이상의 공백과 스페이스를 그대로 표현
형 식 : <PRE> ∼ </PRE>

3.2 문자 서식 태그 특수문자의 사용 예 <html><body><pre>
<head><title>특수문자 표현하기 </title> </head><body> <h1> Escape 문자 예제</h1> <br><p>** Escape 문자 예제 ** <br> 화면에 html 코드를 보여줍니다.^^* </body></html> </pre></body></html>

3.3 단락 서식 태그 줄바꿈 태그 “Line Break”를 의미 형 식 : <BR> <HTML>
<HEAD> <TITLE> HTML 문서의 줄바꿈 </TITLE></HEAD> <BODY> 줄바꿈 태그를 이용하면<BR> 줄이 바뀝니다.<BR> </BODY> </HTML>

3.3 단락 서식 태그 <BR> 태그 예제 결과

3.3 단락 서식 태그 단락 태그 <P> 태그 : 문단을 나누기 위한 태그 <BR> 태그와의 차이
줄바꿈 + 한 줄의 공백 <BR> 태그를 두 번 사용한 결과 복수의 <P> 태그는 한 번 사용한 결과와 동일 형 식 : <P>

3.3 단락 서식 태그 단락 태그 예제 <HTML>
<HEAD> <TITLE> HTML 문서의 단락 태그사용</TITLE></HEAD> <BODY> 단락 태그를 사용합니다.<P> 단락을 만듭니다.<P> <P> <P> 단락 태그를 여러 번 써도 하나를 쓴 것과 같습니다. <BR> <BR>줄바꿈 태그를 두 번 쓰면 <P>단락 태그를 한 번 쓴 것과 같은 효과가 납니다. </BODY> </HTML>

3.3 단락 서식 태그 단락 태그 예제 결과

3.3 단락 서식 태그 괘선 태그 괘선 태그의 속성 형 식 : <HR [속 성]>
SIZE = “픽셀 수” : 수평선의 두께를 지정 한다. WIDTH = “픽셀 수” 또는 “가로 폭에 대한 비율(%)” : 수평선의 길이를 지정한다. ALIGN = “LEFT” 또는 “CENTER” 또는 “RIGHT” : 수평선의 위치를 지정한다. NOSHADE = 입체감과 음영의 효과를 제거 (보통 선으로 표현) 한다.

3.3 단락 서식 태그 괘선 태그 예제 <HTML>
<HEAD> <TITLE> HTML 문서의 괘선 태그 사용 </TITLE> </HEAD> <BODY> 보통 두께 1 <HR> 수평선 두께 5 <HR SIZE= "5" > 길이 150 픽셀 <HR WIDTH= "150" > 길이 80% <HR WIDTH= "80%" > 수평선 위치를 왼쪽으로 <HR ALIGN= "LEFT" WIDTH= "30%" > 입체감을 없앰 <HR NOSHADE> </BODY> </HTML>

3.3 단락 서식 태그 괘선 태그 예제 결과

3.3 단락 서식 태그 정렬 태그 가운데 정렬 형 식 : <CENTER> ∼ </CENTER>
문단의 정렬 형 식 : <DIV ALIGN = “LEFT” 또는 “RIGHT” 또는 “CENTER”> ∼ </DIV>

3.3 단락 서식 태그 문단 정렬 예제 <HTML>
<HEAD> <TITLE> HTML 문서의 정렬 태그 사용</TITLE> </HEAD> <BODY> <DIV ALIGN = "LEFT"> 왼쪽 정렬 </DIV> <P> <DIV ALIGN = "CENTER"> 가운데 정렬 </DIV> <P> <CENTER> 가운데 정렬 </CENTER> <P> <DIV ALIGN = "RIGHT"> 오른쪽 정렬 </DIV> <P> </BODY> </HTML>

3.3 단락 서식 태그 문단 정렬 예제 결과

3.3 단락 서식 태그 인용 태그 인용구를 작성할 경우 형 식 : <BLOCKQUOTE> ∼ </BLOCKQUOTE>

3.3 단락 서식 태그 인용 태그 예제 <HTML>
<HEAD><TITLE>HTML 문서의 BLOCKQUOTE 태그</TITLE></HEAD> <BODY> Tim Berners-Lee의 견해는 다음과 같다. <BLOCKQUOTE> <P>Anyone who slaps a 'this page is best viewed with Browser X' label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network. </BLOCKQUOTE> 이는 WWW의 기본 철학을 잘 설명하고 있다. </BODY> </HTML>

3.4 목록 태그 목록 태그 시각적으로 짜임새 있는 문서 작성
 <UL> : 번호가 없는 리스트 (Unordered List) - <LI> : 리스트 항목  <OL> : 번호가 있는 리스트 (Ordered List)  <MENU> : 메뉴 리스트  <DIR> : 디렉토리 리스트  <DL> : 용어 리스트 (Definition List) - <LH> : 리스트 제목 - <DT> : 용어의 이름 - <DD> : 용어의 설명

3.4 목록 태그 번호 없는 리스트 형 식 : <UL>
<LI TYPE= “DISK” 또는 “CIRCLE” 또는 “SQUARE”> 리스트 항목 </UL>

3.4 목록 태그 번호 없는 리스트 예제 <HTML>
<HEAD> <TITLE> 번호 없는 리스트 </TITLE> </HEAD> <BODY BGCOLOR= "WHITE" > <UL> <LI>대항목 <LI>중항목 <LI>소항목 </UL> </BODY> </HTML>

3.4 목록 태그 번호 없는 리스트 예제 결과

3.4 목록 태그 번호 있는 리스트 형 식 : <OL> <LI> 리스트 항목 </OL>

3.4 목록 태그 기타 리스트 (메뉴 리스트, 디렉토리 리스트, 용어 리스트) 형 식 (메뉴 리스트) :
<MENU> <LI> 리스트 항목 </MENU> 형 식 (디렉토리 리스트) : <DIR> </DIR> 형 식 (용어 리스트) : <DL> <LH>리스트의 제목</LH> <DT>용어의 제목 <DD>용어의 의미 </DL>

3.4 목록 태그 기타 리스트 예제 <HTML> <HEAD> <TITLE> 기타 리스트
</TITLE> </HEAD> <BODY> 메뉴 리스트 <BR> <MENU> <LI>홈페이지 만들기 <LI>홈페이지를 만들기 위한 책 <LI>동국출판사에서 제작 </MENU> <P> 디렉토리 리스트<BR> <DIR> <LI>/usr/local/cgi-bin <LI>/inetpub/homepage <LI>/multimedia/graphic </DIR> <P> <DL> <LH>용어 리스트</LH> <DT>홈페이지 만들기 <DD>홈페이지를 만들기 위한 책 <DD>동국출판사에서 제작 </DL> </BODY> </HTML>

3.4 목록 태그 기타 리스트 예제 결과

3.5 연결 태그 HTML 문서 내에서의 연결 동일 문서내의 특정 위치로 이동 HTML 문서가 매우 길 경우에 사용
형 식 : <A HREF =“#이름“> ∼ </A> 문서 내에서의 연결 링크를 설정한다. <A NAME =“이름“> ∼ </A> 문서내의 이동할 곳의 위치를 지정한다.

3.5 연결 태그 문서 내에서의 연결 예제 <HTML>
<HEAD> <TITLE> HTML 문서 내에서의 연결</TITLE> </HEAD> <BODY> <A HREF = "#이름1"> 1 부분으로 이동</A> <BR><P> <A HREF = "#이름2"> 2 부분으로 이동</A> <BR><P> <P> <HR> <HR> <P> <HR> <P> <HR> <P> <HR> <P> <HR> <A NAME = "이름1"> 이곳은 1 부분이다.</A> <BR> <A NAME = "이름2"> 이곳은 2 부분이다.</A> <BR> </BODY> </HTML>

3.5 연결 태그 문서 내에서의 연결 예제 결과

3.5 연결 태그 같은 시스템내의 파일 연결 경로(Path)를 사용 상대 경로 : 자신이 위치한 디렉터리를 기준
절대 경로 : 최상의 디렉터리로부터 위치 지정 형 식 : <A HREF = "링크할 파일 경로”> 브라우저에 나타나는 텍스트 </A>

3.5 연결 태그 URL을 통한 문서간의 연결 형 식 : <A HREF = “링크할 문서의 URL"> 브라우저에 나타나는 텍스트 </A> <HTML> <HEAD> <TITLE>URL을 통한 링크</TITLE> </HEAD> <BODY> <P> <A HREF = “ 홈페이지로 이동</A> <P> <A HREF = “ 홈으로 이동</A> </BODY> </HTML>

3.5 연결 태그 주소 지정 태그 형 식 : <ADDRESS> ∼ </ADDRESS>
<HTML> <HEAD> <TITLE> 주소 지정 </TITLE> </HEAD> <BODY > <CENTER> <H3> Judd의홈페이지 방문을 환영합니다! </H3> </CENTER> <ADDRESS> 작성자 : 윤태승.<BR> 메일은 <A HREF= </A> 로 보내시면 됩니다. </ADDRESS> </BODY> </HTML>

3.5 연결 태그 주소 지정 태그 예제 결과

3.6 이미지 태그 웹 브라우저를 이용한 이미지 처리 HTML 문서 + 이미지 이미지 삽입 방법

3.6 이미지 태그 <IMG> 태그 이미지 삽입 태그 <HTML>
형 식 : <IMG SRC = “이미지 파일 이름“ ALT = “이미지 파일 설명” > SRC : 이 속성은 필수이고, GIF 또는 JPG형식의 이미지를 사용한다. ALT : 이미지에 마우스를 가져가면 파일에 대한 설명이 나타난다. <HTML> <HEAD> <TITLE> 이미지 삽입하기 </TITLE> </HEAD> <BODY> <CENTER> <H2> 이미지 삽입 </H2> <IMG SRC = "fish.gif" ALT ="물고기입니다."> </CENTER> </BODY> </HTML>

3.6 이미지 태그 <IMG> 태그 예제 결과

3.6 이미지 태그 이미지와 문자의 정렬 ALIGN 속성 이미지의 특정 위치에 문자를 어떻게 위치시킬 것인가를 결정
 ALIGN = “TOP” : 이미지의 위 부분에 문자를 출력한다.  ALIGN = “MIDDLE” : 이미지의 가운데 부분에 문자를 출력한다.  ALIGN = “BOTTOM” : 이미지의 아래 부분에 문자를 출력한다.  ALIGN = “LEFT” : 이미지를 왼쪽에 위치 시킨다.  ALIGN = “RIGHT” : 이미지를 오른쪽에 위치 시킨다.

3.6 이미지 태그 ALIGN 속성 예제 (상하 정렬) <HTML>
<HEAD> <TITLE> 이미지와 문자의 위치 </TITLE> </HEAD> <BODY> <IMG SRC = "fish.gif" ALIGN = "TOP"> 이미지의 위쪽 <P> <IMG SRC = "fish.gif" ALIGN = "MIDDLE"> 이미지의 가운데<P> <IMG SRC = "fish.gif" ALIGN = "BOTTOM"> 이미지의 아래쪽 </BODY> </HTML>

3.6 이미지 태그 ALIGN 속성 예제 결과

3.6 이미지 태그 ALIGN 속성 예제 (좌우 정렬) <HTML>
<HEAD> <TITLE> 이미지와 문자의 위치 </TITLE> </HEAD> <BODY > <IMG SRC = "fish.gif" ALIGN = "LEFT"> 이미지는 왼쪽 <BR> 문자는 오른쪽 <P> <BR> <BR> <IMG SRC = "fish.gif" ALIGN = "RIGHT"> 이미지는 오른쪽 <BR> 문자는 왼쪽 <P> </BODY> </HTML>

3.6 이미지 태그 ALIGN 속성 예제

3.6 이미지 태그 이미지의 크기 조절 이미지의 여백 조절 WIDTH와 HEIGHT 속성을 이용
형 식 : <IMG SRC = “이미지 파일명“ WIDTH = “가로 크기” HEIGHT = “세로 크기” > 이미지의 여백 조절 VSPACE와 HSAPCE 속성을 이용 형 식 : <IMG SRC = “이미지 파일명” VSPACE = "픽셀수“ HSPACE = "픽셀수” > VSPACE : 이미지 상하의 여백을 준다. HSPACE : 이미지 좌우의 여백을 준다.

3.6 이미지 태그 이미지의 상하좌우 여백 조절 예제 <HTML>
<HEAD> <TITLE> 이미지의 여백 주기 </TITLE> </HEAD> <BODY> 이미지의 상하에 <BR> <IMG SRC = "fish.gif" VSPACE = "20" ALIGN = "LEFT"> 여백을 <BR> 20픽셀 주었다. <P> <BR> <BR> <BR> 이미지의 좌우에 <BR> <IMG SRC = "fish.gif" HSPACE = "20" ALIGN = “RIGHT"> 20픽셀 주었다. </BODY> </HTML>

3.6 이미지 태그 상하좌우 여백 조절 예제 결과

3.6 이미지 태그 하이퍼 링크 텍스트를 통한 링크 이미지를 통한 링크
형 식 : <A HREF = “링크할 곳의 파일명” > <IMG SRC = “이미지 파일명” [BORDER= n ]> </A>

3.6 이미지 태그 이미지로 문서 연결 예제 <HTML>
<HEAD> <TITLE> 이미지의 링크 </TITLE> </HEAD> <BODY><CENTER> <A HREF=" <IMG SRC = "039.jpg"><P>멀티미디어 정보처리 03강좌 홈페이지 </A></CENTER> </BODY> </HTML>

4. 테이블 태그의 사용 테이블 정보의 조직적 표현 기본적인 테이블 태그 테이블의 세밀한 제어를 위한 태그

4. 테이블 태그의 사용 테이블을 작성하기 위한 기본적인 태그  <TABLE> : 테이블을 선언하는 태그이다.
 <TR> : Table Raw, 테이블 내의 한 행을 정의한다.  <TD> : Table Data, 각 행의 셀을 만들 때 사용한다. <TH> : Table Header, 행에 있는 셀의 제목을 지정하여, 제목을 강조되게 표시한다.  <CAPTION> : 테이블의 제목을 표시한다.

4. 테이블 태그의 사용 테이블 선언 태그 테이블의 세밀한 제어를 위한 <TD> 속성
형 식 : <TABLE> ∼ </TABLE> 테이블의 세밀한 제어를 위한 <TD> 속성 <TD ALIGN = “LEFT" 또는 “RIGHT" 또는 “CENTER"> : 셀의 데이터에 대한 좌우 정렬 방법이다. <TD VALIGN = “TOP" 또는 “MIDDLE" 또는 “BOTTOM" 또는 “BASELINE"> : 셀의 데이터에 대한 상하 정렬 방법이다. <TD ROWSPAN> : 셀의 행을 합치기 위한 태그이다. <TD COLSPAN> : 셀의 열을 합치기 위한 태그이다. <TD WIDTH> : 셀의 수평 길이(픽셀 단위)를 나타낸다. <TD HEIGHT> : 셀의 수직 길이(픽셀 단위)를 나타낸다.

4. 테이블 태그의 사용 테이블 기본 예제1 <HTML>
<HEAD> <TITLE> 테이블 </TITLE> </HEAD> <BODY> <CENTER> <BR> <TABLE BORDER> <TR> <TD>첫번째 셀</TD> </TR> <TD>두번째 셀</TD> </TABLE> </CENTER> </BODY> </HTML>

4. 테이블 태그의 사용 예제1 결과

4. 테이블 태그의 사용 테이블 기본 예제2 <HTML>
<HEAD> <TITLE> 테이블 </TITLE> </HEAD> <BODY> <CENTER> <BR> <TABLE BORDER> <TR> <TD>첫번째 셀</TD> <TD>두번째 셀</TD> </TR> <TD>세번째 셀</TD> <TD>네번째 셀</TD> </TABLE> </CENTER> </BODY> </HTML>

4. 테이블 태그의 사용 예제2 결과

5. 입력 양식 입력 양식 태그 사용자의 입력 데이터를 웹 서버로 전송 <FORM> 태그 형 식 :
<FORM ACTION = “URL" METHOD = “GET" 또는 “POST"> </FORM>  ACTION : 입력 데이터를 처리할 CGI 프로그램의 URL이다. 생략되면 현재 문서가 사용된다.  METHOD : 사용자가 입력한 데이터를 서버에 전달하는 방법이다. * GET : - 디폴트로 데이터가 환경변수를 통하여 서버에 전달된다. - 데이터의 라인 수가 제한된다. * POST : - 데이터가 표준 입력 방식으로 서버에 전달된다. - 데이터의 라인 수에 제한이 없으므로 주로 사용된다.

5. 입력 양식 입력 양식 태그의 속성 (계속) 형 식 : <INPUT TYPE = [속 성]
NAME = “입력 양식 이름” VALUE = “입력 양식에서 표시될 문자열” SIZE = “문자 수” CHEKED = [속 성] MAXLENGTH = “문자 수” >

5. 입력 양식 입력 양식 태그의 속성 (계속)  TYPE - TEXT : 문자 입력
- PASSWORD : 문자 입력시 데이터를 *로 표시 - CHECKBOX : 체크상자를 생성 - RADIO : 여러 개 중 하나를 선택하는 입력 양식 생성 - HIDDEN : 숨겨진 입력 양식을 생성 - IMAGE : 이미지 입력 양식을 생성 - SUBMIT : CGI 프로그램에 데이터를 전달 - RESET : 입력 내용을 취소

5. 입력 양식 입력 양식 태그의 속성  NAME - 입력한 내용을 지정할 변수의 이름을 지정
- SUBMIT과 RESET을 제외한 모든 TYPE의 필수요소  VALUE - TEXT, PASSWORD : 입력값의 기본값을 지정 - CHECKBOX, RADIO : 해당 버튼이 선택되었을 때 CGI에 보내는 값을 정의 - SUBMIT, RESET : 버튼에 표시될 내용을 지정  CHECKED - CHECKBOX, RADIO의 기본값으로 선택  SIZE = “ 문자수 ” (기본값=20) - TEXT, PASSWORD 입력 부분에 보이는 문자수를 정의  MAXLENGTH = “ 문자수 ” - TEXT, PASSWORD에서 입력 받을 수 있는 최대 문자수를 정의

5. 입력 양식 INPUT TYPE = "TEXT" <HTML>
<HEAD> <TITLE> 텍스트 입력 양식 </TITLE> </HEAD> <BODY> <FORM ACTION= "/cgi-bin/post-query" METHOD= "POST"> Name : <INPUT TYPE = “TEXT” NAME = “name” > <P> Age : <INPUT TYPE = “TEXT” NAME = “age” SIZE = “5”> <P> Address : <INPUT TYPE = “TEXT” NAME = “address” SIZE = “40”><P> URL : <INPUT TYPE = “TEXT” NAME = “url” VALUE= “” </FORM> </BODY> </HTML>

5. 입력 양식 INPUT TYPE = "TEXT" 결과

5. 입력 양식 INPUT TYPE = "PASSWORD" <HTML>
<HEAD> <TITLE> PASSWORD 입력 양식 </TITLE> </HEAD> <BODY> <FORM ACTION = "/cgi-bin/post-query" METHOD= "POST" > Your Name : <INPUT TYPE = “PASSWORD” NAME= “PS” > </FORM> </BODY> </HTML>

5. 입력 양식 INPUT TYPE = "PASSWORD" 결과

5. 입력 양식 INPUT TYPE = "CHECKBOX“ 복수 개의 내용을 선택 <HTML>
<HEAD> <TITLE> CHECKBOX 입력 양식 </TITLE> </HEAD> <BODY> <FORM ACTION = "/cgi-bin/post-query" METHOD = "POST" > <INPUT TYPE = “CHECKBOX” NAME = “F” VALUE = “A” > 사과 <BR> <INPUT TYPE = “CHECKBOX” NAME = “F” VALUE = “O” CHECKED> 귤 <BR> <INPUT TYPE = “CHECKBOX” NAME = “F” VALUE = “P”> 땅콩 </FORM> </BODY> </HTML>

5. 입력 양식 INPUT TYPE = "CHECKBOX" 결과

5. 입력 양식 INPUT TYPE = "RADIO" 하나의 항목 선택 <HTML>
<HEAD> <TITLE> RADIO 입력 양식 </TITLE> </HEAD> <BODY> <FORM ACTION= "/cgi-bin/post-query" METHOD= "POST"> <INPUT TYPE = “RADIO” NAME = “F1” VALUE = “A”> 사과 <INPUT TYPE = “RADIO” NAME = “F1” VALUE = “O” CHECKED> 귤 <INPUT TYPE = “RADIO” NAME = “F1” VALUE = “P”> 땅콩 </FORM> </BODY> </HTML>

5. 입력 양식 INPUT TYPE = "RADIO" 결과

5. 입력 양식 선택 목록 입력 양식 <HTML>
<HEAD> <TITLE> 선택 목록 입력 양식 </TITLE> </HEAD> <BODY> <FORM ACTION = "/cgi-bin/post-query" METHOD = "POST"> <SELECT NAME = “fruit”?SIZE = “3”> <OPTION> 바나나 <OPTION> 딸기 <OPTION> 복숭아 <OPTION> 포도 <OPTION> 사과 </SELECT> </FORM> </BODY> </HTML>

5. 입력 양식 선택 목록 입력 양식 결과

감 사 합 니 다

이 름: 정홍도 (과장) 팀 명: 개발사업팀 일 자:

Similar presentations

Presentation on theme: "이 름: 정홍도 (과장) 팀 명: 개발사업팀 일 자:"— Presentation transcript:

Similar presentations

About project

지원

로그인

Auth with social network:

이 름: 정홍도 (과장) 팀 명: 개발사업팀 일 자:

Similar presentations

Presentation on theme: "이 름: 정홍도 (과장) 팀 명: 개발사업팀 일 자:"— Presentation transcript:

Similar presentations

About project

지원