1 / 47

7 장 HTML 의 구조와 사용

7 장 HTML 의 구조와 사용. 7.1 HTML 이란 ? HyperText Markup Language 의 약자 월드 와이드 웹 (World Wide Web) 을 위한 하이퍼텍스트 (Hypertext) 문서를 작성하는 언어 . 즉 브라우저를 통하여 사용자에게 보여지는 문서의 내부형식을 규정하는 언어 . 일반 텍스트 문서와 마찬가지로 아스키 (ASCII) 파일이며 확장자는 htm 또는 html HTML 은 SGML 표준에 따라 구현한 문서 형식

tibor
Download Presentation

7 장 HTML 의 구조와 사용

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 7장 HTML의 구조와 사용

  2. 7.1 HTML이란? • HyperText Markup Language의 약자 • 월드 와이드 웹(World Wide Web)을 위한 하이퍼텍스트(Hypertext) 문서를 작성하는 언어. 즉 브라우저를 통하여 사용자에게 보여지는 문서의 내부형식을 규정하는 언어. • 일반 텍스트 문서와 마찬가지로 아스키(ASCII) 파일이며 확장자는 htm 또는 html • HTML은 SGML 표준에 따라 구현한 문서 형식 • 문서의 내용과 이를 둘러싼 태그로 그 형식을 정한다. 2

  3. 태그의 형식 • 시작 태그 : <태그 이름> • 끝 태그 : </태그 이름> • 시작 태그와 끝 태그 사이에 문서 내용이 오며, 다른 태그들도 포함 가능. • 시작 태그안에 ' 속성 이름="속성값" '의 쌍들로 속성을 지정. • HTML 기본 태그 • <HTML>: HTML문서임을 명시 • <TITLE>: 브라우저의 바에 나타나는 문서의 제목을 명시 • <HEAD>: 문서에 관해 브라우저에 알릴 정보 • <BODY>: 문서의 실제 내용부분을 기술 3

  4. HTML 문서의 기본 구성 <HTML> <HEAD> <TITLE> 문서의 제목을 쓰세요 </TITLE> </HEAD> <BODY> HTML문서의 내용을 넣으세요. 이 장에서는 텍스트는 물론 이미지를 활용하여 나만의 웹 문서 작성 방법을 배울 수 있습니다. </BODY> </HTML> 4

  5. 7.2 HTML의 기초 7.2.1 텍스트의 작성 (1) 줄 바꾸기와 문단 나누기 • <BR> : 줄 바꾸기 • <P>...</P> : 문단 나누기 • HTML에서는 엔터(Enter)와 탭(Tab)을 무시하고 하나의 공백(space)로 처리하며, 연속된 공백을 하나의 공백으로 처리하므로 줄을 바꾸기 위해서 별도의 태그를 사용해야 함 • <BR> 태그는 줄만 바꿔주는 역할 • <P> 태그는 줄을 바꿔줄 뿐 아니라 다음에 한줄을 공백으로 만듬 5

  6. (2) 문서의 헤더 • <Hn>...</Hn> • 문서에서 제목에 해당하는 문자열을 표시 • <H1> ~ <H6>의 Heading tag가 있으며 숫자가 작을 수록 글씨 크기가 커지며, 한 줄을 차지 (3) 문자의 크기 결정 • <FONT SIZE="n">...</FONT> • 본문의 글자 크기를 조절하는데 사용 • n은 1~7까지이고 1일때 크기가 가장 작음 6

  7. (4) 문자 색깔의 결정 • <FONT COLOR="#16진수 색 코드">...</FONT> • RGB의 방식으로 표현 • R, G, B 모두 0~255 까지의 단계가 가능하며 두자리의 16진수로 표현 7

  8. (5) 문자 모양의 결정 • <EM> ... </EM>, <I> ... </I> : 이탤릭 문자체로 보여줌 • <STRONG> ... </STRONG>, <B> ... </B> : 굵은 문자체로 보여줌 • <CITE> ... </CITE> : 자료를 인용할 때 쓰이며 이탤릭 문자체로 보여줌 • <U> ... </U> : 밑줄을 그어줌 • <TT> ... </TT> : 타자체로 보여줌 • <CODE> ... </CODE> : 프로그램 코드를 보여줄 때 쓰이며 타자체로 보여줌 • <SUP> ... </SUP> : 위 첨자 • <SUB> ... </SUB> : 아래 첨자 8

  9. (6) <PRE> 태그 • <PRE>...</PRE> • 태그 안의 문장에서 여백이나 줄 바꿈 등이 그대로 브라우저에 출력 (7) 가로선 긋기 • <HR WIDTH=" " SIZE=" " ALIGN=" ">...</HR> • 문서의 중간에 입체감 있는 수평선을 그어 문단을 구분한다. • 속성 • WIDTH = " 백분율 또는 픽셀의 수" : 선의 길이 • SIZE = "n" : 선의 굵기 • ALIGN = "CENTER 또는 LEFT 또는 RIGHT" : 선의 위치 정렬 9

  10. (8) 주석문 달기 • <!- 여기에 담긴 주석은 웹 브라우저에서는 볼 수 없음 -> • <! 와 > 사이에 주석문 입력. 이 내용은 브라우저에 출력되지 않음 (9) 특수 문자의 출력 • & , < . > , " 등의 기호는 HTML태그에서 직접 사용되기 때문에 특수문자 코드로 처리 • 자판에 없는 문자들도 특수문자 코드로 처리 10

  11. 7.2.2 링크 만들기 (1) 문서간의 연결 • <A HREF="연결하고자 하는 곳의 URL">...</A> • Anchor의 약자로 다른 문서나 다른 컴퓨터에 연결 • HREF 속성에 연결하고자 하는 URL이나 File 이름등을 지정 • 링크가 있는 곳에는 밑줄이 생기며, 이곳을 클릭하면 연결된 문서가 열림 11

  12. (2) 문서내의 연결 • <A HREF="#문서 내에서 찾아가야 할 단어">...</A> • <A NAME="단어">...</A> • 한 문서에 많은 양의 정보를 나타내고자 할 때 문서 내의 인덱스를 만드는 데 사용 • NAME 속성으로 찾아 가야 할 단어를 정해 놓고, HREF 속성에 연결하고자 하는 단어를 지정함 • 링크된 단어를 클릭하면 NAME속성 에서 지정된 부분으로 이동 • 문서 내 목차나 사전식 분류에 사용 12

  13. 7.2.3 이미지의 삽입 • <IMG SRC="이미지의 URL" WIDTH="n" HEIGHT="n" BORDER="n" VSPACE="n" HSPACE="n" ALIGN="n" ALT="n"> • SRC는 반드시 지정해야 함. (1) 이미지의 크기 조절 • WIDTH와 HEIGHT 값을 픽셀 수나 창에 대한 백분율로 지정. (2) 이미지와 텍스트의 정렬 • 이미지와 텍스트의 정렬 • ALIGN = TOP, MIDDLE, BOTTOM • 문서 내의 이미지의 위치 • ALIGN = LEFT, RIGHT 13

  14. (3) 이미지의 여백과 테두리 • 이미지의 테두리 : BORDER = 픽셀의 수 • 이미지의 여백 • 좌우 여백 : HSPACE = 픽셀의 수 • 상하 여백 : VSPACE = 픽셀의 수 (4) 이미지에 링크 연결하기 • 텍스트에서와 마찬가지로 이미지 태그 바깥쪽에 앵커(Anchor) 태그를 씌운다. • <A HREF="URL"><IMG SRC="이미지 파일" ...></a> 14

  15. (5) 이미지를 배경으로 사용하기 • <BODY BACKGROUND="이미지 파일 이름" BGCOLOR="색번호" TEXT="색번호"> • 이미지를 배경에 사용하려면 <BODY>태그에서 지정해야 한다. • BGCOLOR는 배경색을, TEXT는 글자 색을 결정한다. • 색번호는 위에서 언급한 것과 마찬가지로 16진수로 표현된다. 15

  16. 7.3 구조적 문서의 작성 7.3.1 목록 만들기 (1) 순서 없는 목록 (Unordered List) • 형식 : <UL>...</UL> • 각 항목 앞에 불릿(bullet)이 붙는 목록 • <UL>과 </UL> 태그 안의 <LH>와 </LH> 사이에 목록의 제목을, <LI> 다음에 각 항목의 내용을 기입 • <LI> 태그의 하위에 <UL> 태그를 넣어 계층적 정보를 표현 • 불릿의 모양은 TYPE 속성에 다음 값을 주어 지정 • DISC(검은 원), CIRCLE(하얀 원), SQUARE(검은 사각형) 16

  17. (2) 순서 있는 목록 (Ordered List) • 형식 : <OL>...</OL> • 각 항목 앞에 번호가 붙는 목록 • <OL>과 </OL> 태그 안의 <LH>와 </LH> 사이에 목록의 제목을, <LI> 다음에 각 항목의 내용을 기입 • <LI> 태그의 하위에 <OL> 태그를 넣어 계층적 정보를 표현 • 초기치로 지정된 번호는 아라비아 숫자 (1,2,3,...) • 번호 형식은 TYPE 속성에 다음 값을 주어 지정 • I : 로마자 (I, II, III,...) • A : 알파벳 (A,B,C...) 17

  18. (3) 정의 목록 (Definition List) • 형식 : <DL>...</DL> • 어떤 항목에 대한 정의나 설명을 써줄 때 사용 • <DL>과 </DL> 태그 안의 <LH>와 </LH> 사이에 목록의 제목을, <DT> 뒤에 항목을, <DD> 뒤에 그 항목에 대한 정의나 설명을 기입 • 중첩 사용이 가능하며, 하위 항목으로 들어감에 따라 문단이 조금씩 안쪽으로 들어감 (4) 목록 겹쳐 쓰기 • 서로 다른 형식의 목록을 중첩해 사용할 수 있다. • 문서가 계층적인 구조를 갖게 되어 더욱 효율적으로 정보를 전달하는 페이지를 만들 수 있다. 18

  19. 7.3.2 테이블 만들기 (1) 테이블의 장점 • 단순한 도표뿐만 아니라 복잡한 문단을 정렬할 수 있고, 표제 지정도 가능. 문서를 일목요연하게 정리할 수 있음 (2) 테이블의 삽입 • 형식 : <TABLE BORDER=" " WIDTH=" " HEIGHT=" " CELLPADDING=" " CELLSPACING=" ">...</TABLE> • <Table> 과 </Table> 태그 사이에 줄(row)에 해당하는 <TR>... </TR> 태그를 넣고 그 사이에 각 칸에 들어갈 표의 내용을 나타내는 <TD>...</TD> 태그가 들어간다. • <TD>는 항상 <TR>에 의해 둘러싸여야 한다. 19

  20. (3) 테이블의 속성 • 테이블 크기 : WIDTH = 픽셀의 수 또는 백분율, HEIGHT = 픽셀의 수 또는 백분율 • 테두리 : BORDER = 픽셀의 수 • 테이블 내부의 선 굵기 : CELLSPACING = 픽셀의 수 • 테이블 내용과 선 간의 여백 : CELLPADDING = 픽셀의 수 • 셀 내부 텍스트의 좌우 정렬 : ALIGN="align" • <TD ALIGN="LEFT / CENTER / RIGHT"> • 셀 내부 텍스트의 상하 정렬 : VALIGN="align" • <TD VALIGN="TOP / MIDDLE / BOTTOM"> 20

  21. 테이블에서 <TD> 대신 <TH> 태그를 쓰면 수평, 수직 정렬이 자동으로 가운데가 되며, 볼드(bold)체로 표시되는 제목 셀이 된다. (4) 셀 합치기 • 여러 행에 걸치는 셀 : ROWSPAN = 행의 수 • 여러 열에 걸치는 셀 : COLSPAN = 열의 수 21

  22. 7.4 프레임을 이용한 화면 분할 • 프레임이란? • 프레임은 하나의 웹 브라우저 화면을 여러개의 창으로 나누어 주는 역활을 한다. • HTML 문서를 몇 개의 파일로 나누어 작성한 후, 이 파일을 프레임으로 구분된 각 창에서 보여줄 수 있다 22

  23. 7.4.1 화면 나누기 • 가로로 나누기 • <FRAMESET ROWS="나누는 개수만큼의 각 프레임의 세로 길이들"> • 세로로 나누기 • <FRAMESET COLS="나누는 개수만큼의 각 프레임의 세로 길이들"> • 만들고 싶은 프레임의 개수 만큼 길이를 입력하고, 각각 쉼표로 구분 23

  24. 프레임의 길이 • 픽셀의 수 : 예) 두개로 나눌때 "140, *" • 백분율 : 예) 세개로 나눌때 "20%, 30%, 50% • 비율 : 예) 두개를 3:1로 나눌때 "3*, *" • * : 나머지 부분을 대신해서 사용할 수 있음 • 프레임에 보여질 문서 • <FRAME SRC="문서 이름"> 24

  25. 7.4.2 프레임의 속성 • 스크롤바 표시 속성 : SCROLLING • YES : 항상 표시됨 • AUTO : 문서의 길이가 길어지면 표시됨 • NO : 표시하지 않음 • NAME 속성 • 프레임의 이름을 지정할 수 있다. • 앵커(<A>) 태그에서 TARGET 속성으로 프레임의 이름을 지정하면 지정된 프레임에서 문서를 보여준다. • 프레임 크기 고정 • NORESIZE로 set된 프레임은 브라우저가 resize할 수 없음 25

  26. 7.5 CGI의 활용 • Common Gateway Interface의 약자 • 브라우저와 웹 서버, 응용프로그램간의 인터페이스. • CGI의 동작과정 26

  27. CGI를 이용하면 사용자의 요구에 따라 필요한 정보만을 전달할 수 있음 • 대표적인 예 • 사용자가 원하는 페이지만을 보여주는 웹 문서 • 보안이 필요한 페이지의 경우 사용자로부터 등록 정보를 입력받아 확인 • 사용자가 입력한 문서를 페이지에 연동시켜서 만든 방명록 혹은 게시판 • 사용자가 몇 번째 방문자인지 보여주는 카운터 등 27

  28. 7.5.1 CGI와 FORM태그 (1) FORM의 개요 • 형식 : <FORM ACTION=“ “ METHOD=“ “>...</FORM> • 사용자의 입력을 받음 • ACTION : 데이터가 전달될 URL을 지정하는 것으로 대부분의 경우 클라이언트의 요구를 처리할 CGI프로그램에 대한 URL이 지정된다. • METHOD : 데이터가 지정된 위치로 어떤 방법으로 전달될 것인가를 명시한다. 가능한 값으로는 GET과 POST가 있다. 28

  29. <INPUT TYPE=“ “ NAME=“ “ VALUE=“ “>...</INPUT> • 입력 양식을 결정 • TYPE : 입력 필드의 형식을 결정하는 것으로 TEXT, PASSWORD, SUBMIT, RESET, CHECKBOX, RADIO 등이 있다. • NAME : 입력 필드의 데이터가 CGI 프로그램으로 넘어갈 때 입력필드의 이름를 지칭한다. • VALUE : 해당 입력필드에 나타나는 기본값, SUBMIT이나 RESET의 경우 이값이 버튼에 나타난다. 29

  30. (2) 입력 필드의 형식 • <INPUT TYPE="TEXT" MAXLENGTH="n" SIZE="n"> : 텍스트 입력 양식 • <INPUT TYPE="PASSORD" MAXLENGTH="n" SIZE="n"> : 암호 입력 양식 • 이름이나 ID를 입력받을 때나 암호를 입력 받을 때 사용 • 암호 입력 양식은 입력된 내용을 '*'로 표시한다. • MAXLENGTH : 입력 받을 수 있는 최대 길이의 문자수 30

  31. <INPUT TYPE="SUBMIT" VALUE="버튼 이름"> • <INPUT TYPE="RESET" VALUE="버튼 이름"> • SUBMIT 버튼은 양식안에 입력된 내용을 <FORM>태그 안에서 지정된 곳으로 보냄 • RESET 버튼은 양식안에 입력된 내용을 모두 지움 • VALUE는 버튼위에 보여지는 이름을 지정 • <INPUT TYPE="RADIO" NAME="..." VALUE="..."> • 여러 항목들 중에서 하나만 선택 가능한 버튼 • 같은 선택군의 같은 NAME 값을 갖고 각각의 항목은 고유의 VALUE값을 갖는다. 31

  32. <INPUT TYPE="CHECKBOX" NAME="..." VALUE="..."> • 라디오 버튼은 선택군에서 하나만 선택가능하지만 체크박스는 여러개 선택 가능 • 같은 선택군의 같은 NAME 값을 갖고 각각의 항목은 고유의 VALUE값을 갖는다. 32

  33. (3) 기타 입력 태그 • <TEXTAREA NAME="..." ROWS="n” COLS="n">… </TEXTAREA> • <INPUT TYPE="TEXT"> 를 이용한 텍스트 입력 받기 보다 긴 텍스트를 입력 받을 때 사용 • NAME은 지정된 곳(보통 CGI프로그램)으로 넘어갈 때 필드의 이름 • ROWS : 입력 영역 행의 글자수 • COLS : 입력 영역 열의 글자수 33

  34. <SELECT NAME="...">...</SELECT> • 선택 목록은 풀 다운 메뉴(Full Down Menu)를 말함 • <SELECT> 와 </SELECT>사이에 <OPTION> 태그로 항목을 만든다. • <SELECT> 태그의 속성 • NAME : 지정된 곳(보통 CGI프로그램)으로 넘어갈 때 필드의 이름 • MULTIPLE : 한개이상의 선택이 가능 • SIZE : 드롭다운 항목에 표시되는 옵션의 수 • <OPTION> 태그의 속성 • SELECTED : 그 항목이 초기 선택 값으로 결정 34

  35. HTML문서에 <FORM>태그로 입력 서식을 작성하고 서버쪽에는 CGI 응용프로그램을 작성해 저장한 후 이들을 연동시키는 것은 쉬운 일이 아님. • 근래에는 무료로 카운터나 방명록 등을 제공해 주는 서버가 많이 있어서, CGI 프로그래밍을 전혀 알지 못하더라도 쉽게 이들을 이용할 수 있음. • 카운터의 경우는 아무런 제약이 없이 사용할 수 있고, 방명록이나 게시판은 배너 광고를 함께 보아야 하는 게 보통임. 35

  36. 유명한 서버 사이트들 • Korea Famous CGI Server : http://www.cgiserver.net • 링코 : http://www.linko.com • 넷토픽 : http://anu.andong.ac.kr/~kaen/bbs • 프리보드 : http://www.bbs4u.com 36

  37. 7.5.2 카운터 달기 • 카운터 : 현재까지 홈페이지를 방문한 사용자의 수를 카운트하여 표시 • 사용자로부터 직접 입력을 받는 것은 아니지만, CGI로 동작하는 프로그램 37

  38. 무료 CGI 서버 페이지를 방문 38

  39. '카운터'의 '사용법'을 클릭하면 카운터를 삽입하는 방법이 자세하게 설명된 페이지를 보여줌 39

  40. 자신의 카운터를 관리할 DataBase의 이름을 결정하여 등록 40

  41. 다음과 같은 라인을 HTML 문서에 삽입하면 등록한 카운터가 홈페이지에 삽입된다. • <img SRC="http:// count.free.cgiserver.net/CrazyCounter.cgi?display=counter|ft=3|md=6|dd=b|df=등록한 DB이름"> 41

  42. 7.5.3 방명록 삽입하기 • 방명록 : 홈페이지를 방문한 사람이 남기고 싶은 말을 적을 수 있는 일종의 게시판 • 글을 남기면 과거 글들과 함께 저장이 되고, 언제라도 열람 가능 42

  43. 등록까지의 과정은 카운터와 동일, 다음과 같은 라인을 HTML 문서에 삽입하면 등록한 방명록이 홈페이지에 삽입된다. • <img SRC="http://count.free.cgiserver.net/CrazyGuestbook.cgi?db=등록한 DB이름"> 43

  44. 방명록을 처음 방문하면 초기설정이 없다는 경고가 발생 44

  45. "ADMIN"을 클릭하여 환경설정 페이지로 이동한 후, 자신의 환경에 맞게 설정 45

  46. 환경설정이 끝나면 방명록을 사용할 수 있고, "Write"를 클릭하면 글을 남길 수 있음 46

  47. 등록된 글은 테이블 형태로 열람할 수 있음 47

More Related