네트워크 명령 실습

Size: px

Start display at page:

Download "네트워크 명령 실습"

병선 금
5 years ago
Views:

1 HTML 실습

2 Contents 1. WWW, HTTP, HTML 개요 2. HTML 기본구조 3. HTML 기본태그 1. 글자관련 2. 서식관련 3. 표관련 4. 하이퍼링크관련 5. 프레임관련 6. 멀티미디어관련 7. 배경등꾸미기관련 8. 아이템화관련

3 1. HTML 개요 1. HTML(Hyper Text Markup Language) A. 웹문서를표현하는기술 B. ASCII 코드로구성된일반적인텍스트파일 C. 컴퓨터시스템이나운영체제에독립 2. 문서의확장자 A..html /.htm 메뉴 [ 보기 ]-[ 소스 ]

4 1. HTML 동작 1. HTML 문서의작동원리

5 1. WWW(World Wide Web): 웹시스템구조 1. 웹서비스 : TCP 포트 80 번 2. 클라이언트 - 서버모델 A. URL (Uniform Resource Locator) 웹서버의자원명칭으로사용하는프로토콜, 서버의호스트이름, 서버내부의파일경로명으로구성 예 : UNIX/Linux 시스템 로그인이름 kumoh 홈디렉토리 /public_html/index.html

6 1. WWW(World Wide Web): 웹시스템구조 1. 연결설정과해제

7 1. WWW(World Wide Web): 웹시스템구조 1. 연결설정및해제 A. 사용자가웹브라우저에게웹서버 URL 주소입력 B. 웹브라우저가 DNS 서버에게웹서버의호스트이름을 IP 주소로변경요청 C. 웹브라우저가 <IP 주소 + 포트 80번 > 의웹서버와 TCP 접속시도 D. 웹브라우저가웹서버에게최초화면을위한 GET 명령전송 E. 웹서버가웹브라우저에게요청한웹문서를회신 F. 웹브라우저와웹서버사이의연결해제 G. 웹브라우저가사용자화면에웹문서를출력

8 1. WWW: HTTP (Hypertext transfer protocol) 1. HTTP: TCP 포트 80 번 웹문서를전송하는프로토콜 2. 요청과응답 A. 동작원리 : 요청과응답 B. 요청 HTTP 클라이언트가서버에요청을전송 요청메소드, URL, HTTP 버전과기타부가정보포함 C. 응답 HTTP 서버가요청의결과인응답코드가포함된정보를회신

9 1. WWW: HTTP (Hypertext transfer protocol) 1. 요청과응답 A. 비연결 (Connectionless): 클라이언트요청에응답한후에바로연결을끊음 B. 비상태 (Stateless): 서버의상태에상관없이요청수행

10 1. WWW: HTTP (Hypertext transfer protocol) 1. 요청과응답 : 요청메시지 A. 요청문 요청메소드 URL HTTP 버전 B. 헤더 (Header) C. 바디 (Body)

11 1. WWW: HTTP (Hypertext transfer protocol) 1. 요청과응답 : 응답메시지 A. 상태문 HTTP 버전 상태코드 상태이름 B. 헤더 (Header) C. 바디 (Body)

12 1. WWW: HTTP (Hypertext transfer protocol) 1. 요청과응답 : 응답메시지및상태코드 A. 200 OK: 요청이성공적으로수행 B. 202 Accepted: 요청이수신되었으나, 즉각실행되지않고있음 C. 400 Bad Request: 요청메시지의문법오류 D. 401 Unauthorized: 요청의실행에필요한권한이없음 E. 403 Forbidden: 요청이거부됨 F. 404 Not Found: 원하는문서를찾을수없음 G. 500 Internal Server Error: 서버에오류발생 H. 501 Not Implemented: 요청을수행할수없음

13 2. HTML 문서의구성요소 1. 태그 (Tag) A. 태그란 < 와 > 기호로둘러싸인일종의표현명령어. B. 시작태그와종료태그두종류가있다. 2. 요소 (Element) A. 요소는태그의의미를결정하는것으로태그에포함된가장중요한부분이다. B. 시작태그내에들어가는표현명령이며옵션형태의속성이있을수있다. C. 만일 </TITLE> 이라는태그가있다면요소는 TITLE 이된다. 3. 속성 (Attribute) A. 속성은요소의시작태그내에사용해명령을구체화시킨다. B. 예를들어, 텍스트의글꼴을지정하기위해사용하는 FONT 요소는 SIZE, COLOR, FACE 등의속성을가지고있다. 예 )<FONT SIZE = 5> 4. 변수 (Argument) A. 변수는속성과관련된값이다. B. <BR CLEAR = "left"> 인경우속성 CLEAR 의변수다. C. 속성과변수는 = 부호로구분한다.

14 2. HTML 문서의기본구조 <HTML> <HEAD> <TITLE> 웹문서의제목 </TITLE> </HEAD> <BODY> 본문내용 </BODY> </HTML> HTML 문서의시작 HTML 문서의헤더시작 HTML 문서의제목작성 HTML 문서의헤더끝 HTML 문서의본문시작 HTML 문서의본문내용작성 HTML 문서의본문끝 HTML 문서의끝 1. <HTML></HTML> A. 작성된문서가 HTML 로작성되었음을알려준다. 2. <HEAD></HEAD> A. 문서의정보를기술하는곳이다. 문서에관련된저자, 키워드, 언어, 문서제목등을기술한다. B. 문서의제목을작성하는부분에는 <TITLE>...</TITLE> 태그와함께사용한다. 3. <BODY></BODY> A. 화면에출력할내용을모두나열하는곳이다. B. 웹페이지안의모든본문 ( 보여지는부분 ) 을지정한다. html-tp-page6n.html

15 3.1 기본 HTML 태그 글자관련 <FONT> 1. <FONT> 태그에정의된여러속성을이용해텍스트의크 기, 색상, 글꼴등을제어 <FONT>... </FONT> 기능글자를제어한다. 속성 SIZE : 글자크기 (1~7, 기본값은 3) COLOR : 글자색상 ( 값은색상코드나색상명을사용 ) FACE : 글꼴 사용예 <FONT SIZE= 5 COLOR= #FF0000 FACE= 궁서체 > </FONT> html-tp-page7n.html

16 3.1 기본 HTML 태그 글자관련 <B> <I> html-tp-page8n.html 태그 기능 예 <B> 글자 </B> 글자를굵게한다. 굵게 <I> 글자 </I> 이탤릭체를만든다. 기울임 <U> 글자 </U> 선택한부분에밑줄을긋는다. 글자에밑줄긋기 <SUB> 글자 </SUB> 아래첨자 아래첨자 5 2 <SUP> 글자 </SUP> 윗첨자 윗첨자 5 2 <S> 글자 </S> 글자를가로질러취소선을긋는다. 취소글자 <BIG> 글자 </BIG> 글자를조금크게한다. 글자를크게표현 <SMALL> 글자 </SMALL> 글자를조금작게한다. 글자를작게표현

17 3.2 기본 HTML 태그 문서서식관련 1. 대표적인문서서식태그 A. 문단바꾸기, 정렬하기 : <P> 태그 B. 문단정렬하기 : <P> 태그, <CENTER> 태그 C. 소스에설명문달기 :  태그 D. 수평선그리기 : <HR> 태그 E. 구역구분하기 : <DIV> 태그

18 3.2 기본 HTML 태그 문서서식관련 1. 줄과문단바꾸기 : <BR>, <P> 태그 <BR> 기능글자를제어한다. 사용예소스결과 서식관련태그 <BR> 문단태그 서식관련태그문단태그 <P> </P> 기능문단을구분할때사용한다. 종료태그를생략할수있다. 속성 ALIGN : 문단정렬 [ 왼쪽 (LEFT), 가운데 (CENTER), 오른쪽 (RIGHT)] 사용예소스결과 <P> 서식관련태그 </P> <P ALIGH= RIGHT > 문단태그 </P> 서식관련태그 문단태그

19 3.2 기본 HTML 태그 문서서식관련 1. 문단정렬하기 : <P> 태그, <CENTER> 태그 A. <P> 태그 ALGIN 속성을이용해왼쪽, 가운데, 오른쪽정렬가능 B. <CENTER> 태그 <CENTER> 태그를사용하면문서를가장쉽게가운데정렬 <CENTER> 태와 </CENTER> 사이에있는내용이모두가운데정렬되므로문서전체의정렬등넓은범위를가운데정렬하고자할때자주사용

20 3.2 기본 HTML 태그 문서서식관련 1. 수평선그리기 : <HR> 태그 <HR> 기능속성사용예 수평선을만든다 SIZE : 수평선의높이 WIDTH : 수평선의길이를픽셀값 (px) 나비율값 (%) 으로지정한다. COLOR : 수평선의색상 ALIGN : 수평선위치 [ 왼쪽 (LEFT), 가운데 (CENTER), 오른쪽 (RIGHT)] NOSHADE : 수평선의입체감을없앤다. <HR COLOR= #FF0000 WIDTH= 70% SIZE= 10 NOSHADE ALIGN= LEFT > 2. 소스에설명달기 :  태그  기능코드에대한힌트나설명 ( 주석 ) 을넣는다. 사용예 <! 표제목지정 --><H1> 시간표 </H1> html-tp-page n.html

21 3.2 기본 HTML 태그 문서서식관련 1. 구역구분하기 : <DIV>, <SPAN> 태그 <DIV> </DIV> 기능문서내에서특정문단을그룹화한다. <P> 태그와거의비슷한역할을하지만문단을구분하지는않는다. 속성 ALIGN : 문단정렬 [ 왼쪽 (LEFT), 가운데 (CENTER), 오른쪽 (RIGHT)] <SPAN> </SPAN> 기능 <DIV> 태그처럼문서의내용을그룹화하지만줄바꿈처리를하지않는다. 2. 편집한내용그대로브라우저에나타내기 : <PRE> 태그 <PRE> </PRE> 기능공백이나입력한모양그대로출력한다. 사용예소스결과 <PRE> 서식관련태그 ENTER ENTER 공백이나줄바꿈을자유롭게 </PRE> 서식관련태그 공백이나줄바꿈을자유롭게 html-tp-page13n.html

22 3.2 기본 HTML 태그 문서서식관련 html-tp-page14n.html 1. 제목글자조절하기 : <Hn> 태그 <Hn> 기능 제목글자의크기를지정한다. 기능 n : 1~6까지사용할수있고, 1이가장큰크기다. 사용예 소스 결과 <H1> 제목글크기지정 </H1> 제목글크기지정

23 3.3 기본 HTML 태그 표관련 1. 대표적인표관련태그 A. <TABLE> 태그 B. <TR> 태그 C. <TD> 태그

24 3.3 기본 HTML 태그 표관련 1. <TABLE> 태그 : 표의시작과끝을표시 <TABLE>... </TABLE> 기능표의시작과끝을알린다. 속성 사용예 ALIGN : 표정렬 [ 왼쪽 (LEFT), 가운데 (CENTER), 오른쪽 (RIGHT)] WIDTH : 행의가로크기를픽셀값 (px) 이나비율값 (%) 으로지정 HEIGHT : 표의세로크기를픽셀값 (px) 이나비율값 (%) 으로지정 BODER: 표의테두리두께 CELLPADDING: 셀과내용사이의거리를픽셀값 (px) 으로지정 CELLSPACING: 셀 ( 칸 ) 과셀사이의거리를픽셀값 (px) 으로지정 BACKGROUND : 표의배경그림 BGCOLOR: 표의배경색상 <TABLE WIDTH= 610 HEIGHT= 200 BORDER= 0 ALIGN= CENETR CELLPADDING= 2 CELLSPACING= 1 BGCOLOR= #3366CC > <TR> <TD> 표만들기 </TD> </TR> </TABLE> html-tp-page16n.html

25 3.3 기본 HTML 태그 표관련 1. <TR> 태그 A. 표의가로행수는 <TR> 태그를사용해지정한다. <TR>... </TR> 기능표의행을알린다. 속성 ALIGN : 행내용의수평정렬 [ 왼쪽 (LEFT), 가운데 (CENTER), 오른쪽 (RIGHT)] VALIGN : 행내용의수직정렬 [ 위쪽 (TOP), 가운데 (MIDDLE), 아래쪽 (BOTTOM) WIDTH : 행의가로크기를픽셀값 (PX) 이나비율값 (%) 으로설정 HEIGHT : 행의세로크기를픽셀값 (PX) 이나비율값 (%) 으로설정 BACKGROUND : 행의배경이미지 BGCOLOR : 행의배경색상 사용예 <TABLE> <TR BGCOLOR= #FF0000 > <TD> 홈페이지 </TD> </TR> </TABLE> html-tp-page17n.html

26 3.3 기본 HTML 태그 표관련 1. <TD> 태그 A. <TD> 태그는항상 <TR> 태그에종속되어 <TR> 태그가나누어놓은행을세로로자르는역할을한다. <TD>... </TD> 기능표의열을알린다. 속성 사용예 ALIGN : 열내용의수평정렬 [ 왼쪽 (LEFT), 가운데 (CENTER), 오른쪽 (RIGHT)] VALIGN : 열내용의수직정렬 [ 위쪽 (TOP), 가운데 (MIDDLE), 아래쪽 (BOTTOM) WIDTH : 열의가로크기를픽셀값 (PX) 이나비율값 (%) 으로설정 HEIGHT : 열의세로크기를픽셀값 (PX) 이나비율값 (%) 으로설정 BACKGROUND : 열의배경이미지 BGCOLOR : 열의배경색상 COLSPAN : 셀을열 ( 세로방향 ) 로합치기 ROWSPAN : 셀을행 ( 가로방향 ) 로합치기 <TABLE> <TR> <TD WIDTH= 110 ><B> 월 </B></TD> <TD WIDTH= 110 ><B> 화 </B></TD> <TD WIDTH= 110 ><B> 수 </B></TD> </TR> </TABLE> html-tp-page18n.html

27 3.3 기본 HTML 태그 표관련 1. <TH>, <CAPTION> 태그 <TH>... </TH> 기능 사용예 <TD> 의기능과속성은동일하나진하게와가운데정렬이적용되어표에서제목셀을표현하는데이용된다. <TABLE> <TR> <TH WIDTH= 110 > 요일 </TD> </TR> </TABLE> <CAPTION>... </CAPTION> 기능표의제목 ( 캡션 ) 을지정한다. 속성 ALIGN : 표제목의정렬 [ 위쪽 (TOP), 가운데 (MIDDLE), 아래쪽 (BOTTOM) 사용예 <TABLE> <CAPTION ALIGN= TOP > 시간표 </CAPTION> <TR> <TD WIDTH= 110 ><B> 월 </B></TD> <TD WIDTH= 110 ><B> 화 </B></TD> <TD WIDTH= 110 ><B> 수 </B></TD> </TR> </TABLE> html-tp-page19n.html + 확장

2009년 상반기 사업계획

2009년 상반기 사업계획 웹 (WWW) 쉽게배우는데이터통신과컴퓨터네트워크 학습목표 웹서비스를위한클라이언트 - 서버구조를살펴본다. 웹서비스를지원하는 APM(Apache, PHP, MySQL) 의연동방식을이해한다. HTML 이지원하는기본태그명령어와프레임구조를이해한다. HTTP 의요청 / 응답메시지의구조와동작원리를이해한다. CGI 의원리를이해하고 FORM 태그로사용자입력을처리하는방식을알아본다.