Transcript 슬라이드 제목 없음
6장 HTML의 구조와 사용 이재광 한남대학교 컴퓨터공학과 6장 HTML의 구조와 사용 6.1 HTML 이란? 6.1.1 HTML 문서의 소개 HTML의 개요 • HyperText Markup Language의 약자 • WWW를 위한 하이퍼텍스 트(Hypertext) 문서를 작성 • Markup Language 화면에 표시할 문자열의 앞뒤에 태그(일종의 해석 기호)를 붙여서 그 문자열의 특성을 나타내는 언어 • 하이퍼텍스트(Hypertext) • 하이퍼미디어(Hypermedia) • 아스키(ASCII) 파일, 확장자는 htm 또는 html • SGML 표준에 따라 구현한 문서 형식 2 6장 HTML의 구조와 사용 HTML 4.0 • 최신 HTML 표준 • Internet Explore와 Netscape Navigator의 서로 다른 Dynamic HTML에 대한 해법 • 전체적인 구조는 HTML 3.2와 비슷하나 Style Sheet, Scripting, Frame, Table, Form이 더 추가 또는 강화 • 모든 Element(Tags, Images, Text, ..)를 access 가능 • Style Sheet을 사용한 구조와 표현의 분리 • Object Model의 사용으로 기능 보강 • 절대적 위치 조정 가능 3 6장 HTML의 구조와 사용 HTML과 SGML • SGML • 문서의 논리적 구조를 기술하기 위한 Markup Language의 정의를 위한 언어 • 시스템 및 응용에 독립적인 문서 정보처리의 필 요로 인해 제정됨. • 미 국방성 등의 CALS, 미출판협회, WWW의 HTML 등 문서 관련 표준으로 사용될 뿐 만아니 라 EC, EDI, 전자 도서관, intranet 등까지 사용됨 • HTML • 고정된 문서타입 • 서로 호환되지 않는 확장들로 인한 한계점 4 6장 HTML의 구조와 사용 6.1.2 HTML 문서의 구성 HTML문서 만들기 • 아스키 파일이므로 텍스트 편집기 사용 • 윈도우 메모장 • 워드 프로세서 • HTML 전용 저작도구 이용 • WYSIWYG 환경 • FrontPage, Composer, 나모 웹 에디터Hypertext) 5 6장 HTML의 구조와 사용 HTML 문서의 기본 구성 • 문서의 내용과 이를 둘러싼 태그로 형식을 정한다 • 시작 태그 : <태그 이름> • 끝 태그 : </태그 이름> • 시작 태그와 끝 태그 사이에 문서 내용이 오며, 다 른 태그들도 포함 가능 • 시작 태그 안에 ' 속성 이름="속성값" '의 쌍들로 속성을 지정 • <HTML>: HTML문서임을 나타냄 • <TITLE>: 브라우저의 바에 나타나는 말을 나타냄 • <HEAD>: HTML문서의 설명을 나타냄 • <BODY>: 문서의 실제 내용부분을 나타냄 6 6장 HTML의 구조와 사용 6.2 HTML의 기초 6.1.1 텍스트의 작성 문서의 헤더 <Hn>...</Hn> •문서에서 제목에 해당하는 문자열을 표시 • <H1> ~ <H6>의 Heading tag가 있으며 숫자가 작을 수록 글씨 크기가 크며, 한 줄을 차지 7 6장 HTML의 구조와 사용 글자 크기 <FONT SIZE="크기" COLOR="색 번호>...</FONT> • 본문의 글자 크기를 조절하는데 사용 • 크기는 1~7까지이고 1일때 크기가 가장 작음 • 색 번호는 16진수로 표현됨 색 번호 • RGB의 방식으로 표현 • R, G, B 모두 0~255 까지의 단계가 가능하면 두자리의 16진수로 표현 • 예) 빨간색 : R:FF(255), G:00(0), B:00(0) : “#FF0000" 8 6장 HTML의 구조와 사용 글자의 모양 <STRONG> </STRONG> : 문자를 진하게 보여줌 <B> </B> : 문자를 진하게 보여줌 <EM> </EM> : 이탤릭체로 보여줌 <I> </I> : 이탤릭체로 보여줌 <CITE> </CITE> : 자료를 인용할 때 쓰이며 이탤릭 체로 보여줌 <SUP> </SUP> : 위 첨자 <SUB> </SUB> : 아래 첨자 <TT> </TT> : 타자체로 보여줌 <CODE> </CODE> : 프로그램 코드를 보여줄 때 쓰이며 타자체로 보여줌 <U> </U> : 밑줄을 그어줌 9 6장 HTML의 구조와 사용 줄 바꾸기와 문단 나누기 <BR> : 줄 바꾸기 <P>...</P> : 문단 나누기 • HTML에서는 엔터(Enter)와 탭(Tab)을 무시 • 연속된 공백을 하나의 공백으로 처리 • <BR> 태그는 줄만 바꿔주는 역활 • <P> 태그는 줄을 바꿔줄 뿐 아니라 다음에 한줄을 공백으로 만들어 줌 10 6장 HTML의 구조와 사용 <PRE> 태그 <PRE>...</PRE> • 태그 안의 문장에서 여백이나 줄 바꿈 등이 모두 유지 • <PRE> 태그 안의 내용을 브라우저에서 그대로 볼 수 있음 11 6장 HTML의 구조와 사용 가로선 긋기 <HR>...</HR> • <HR> 태그는 문서의 중간에 입체감 있는 수평선을 그어 문단을 구분 • 속성 • WIDTH = " 백분율 또는 픽셀의 수" : 선의 길이 • ALIGN = "CENTER 또는 LEFT 또는 RIGHT" : 선 위치 정렬 • SIZE = "n" : 선의 굵기 12 6장 HTML의 구조와 사용 주석 <!-여기에 담긴 주석은 웹 브라우저에서는 볼 수 없음 -> • <! 와 > 사이에 주석문 입력 특수 문자의 출력 • & (&), < (<). > (>), " (") 등의 기호는 HTML에서 태그와 혼동될 우려가 있기 때문에 특수 문자로 처리 • "Copyrights All rights reserved" (©) 또는 "Reserved TradeMark" (®) 등의 문구와 함께 쓰이는 특수 문자 13 6장 HTML의 구조와 사용 6.2.2 HTML 문서의 연결 문서 간의 연결 <A HREF="연결하고자 하는 곳의 URL">...</A> • <A> 태그 Anchor의 약자로 다른 문서나 다른 컴퓨터 에 연결 • HREF 속성에 연결하고자 하는 URL이나 File 이름 등 을 지정 14 6장 HTML의 구조와 사용 문서내의 연결 <A HREF="#문서 내에서 찾아가야 할 단어">...</A> <A NAME="단어">...</A> • 문서의 내용이 많을 때 스크롤 바를 이용하지 않고 문 서의 다른 부분으로 찾아 갈 때 유용 • NAME 속성으로 찾아 가야 할 단어를 정해 놓고, HREF 속성에 연결하고자 하는 단어를 지정함 • 링크된 단어를 클릭하면 NAME속성에서 지정된 부분 으로 이동 15 6장 HTML의 구조와 사용 편지 쓰기 서비스 <A HREF="mailto:E-mail 주소>...</A> • 보통 <ADDRESS>...</ADDRESS> 태그로 감싸 이탤 릭 체로 주소를 보여줌 • 주소를 클릭하면 사용자의 컴퓨터에 등록된 메일쓰기 프로그램이 작동되어 편지를 쓸수 있도록 해줌 16 6장 HTML의 구조와 사용 6.2.3 HTML 문서에 이미지 삽입 Inline 이미지와 External 이미지 • Inline 이미지 • 웹 문서를 읽으면 바로 나타나는 이미지 • 모든 브라우저에서 지원하는 GIF 형식을 주로 사용 • External 이미지 • 웹 문서에서 필요하면 다운 받는 이미지 • 이미지를 압축하여 저장 받아 다운 받는 시간을 절 약할 수 있는 JPEG 형식을 많이 사용 17 6장 HTML의 구조와 사용 이미지의 삽입 <IMG SRC="이미지의 URL"> • <IMG>태그에서 SRC를 반드시 지정해야 함 이미지의 형식 • 이미지의 크기 : WIDTH와 HEIGHT 속성값을 픽셀 단위, 또는 브라우저 창에 대한 백분율로 지정 • 테두리 : BORDER = 픽셀의 수 • 여백 • 좌우 여백 : HSPACE = 픽셀의 수 • 상하 여백 : VSPACE = 픽셀의 수 18 6장 HTML의 구조와 사용 이미지의 정렬 • 이미지와 텍스트의 정렬 • ALIGN = TOP, MIDDLE, BOTTOM • 이미지의 위치 • ALIGH = LEFT, RIGHT 이미지 대체하기 • 이미지가 제대로 전송되지 않았거나 브라우저가 이미지를 받아들일 수 없을 때 대체하는 문구를 넣는 속성 • ALT = "이미지 설명" 19 6장 HTML의 구조와 사용 이미지의 연결기능 추가 <A HREF="URL"><IMG SRC="이미지 파일"...></a> • 텍스트에서와 마찬가지로 이미지 태그 바깥쪽에 앵커 (Anchor) 태그를 씌움 이미지를 배경으로 사용하기 <BODY BACKGROUND="이미지 파일 이름" BGCOLOR="색번호" TEXT="색번호"> • 이미지를 배경에 사용하려면 <BODY>태그에서 지정 • BGCOLOR는 배경색을 TEXT는 글자 색을 결정 • 색번호는 위에서 언급한 것과 마찬가지로 16진수로 표현됨 20 6장 HTML의 구조와 사용 6.3 구조적 문서의 작성 6.3.1 목록 만들기 순서 없는 목록 (Unordered List) <UL>...</UL> • 각 항목 앞에 불렛(bullet)이 붙는 목록 • <UL>과 </UL> 태그 안에 <LH>와 </LH> 사이에 목록의 제목을 <LI> 다음에 각 항목의 내용 넣음 • <LI> 태그의 하위에 <UL> 태그를 넣어 계층적 정보를 나타낼 수 있음 • 불렛의 모양은 TYPE 속성에 다음 값을 주어 지정 • DISC(검은 원), CIRCLE (하얀 원), SQUARE(검은 사각형) • DISC, CIRCLE, SQUARE의 순서 21 6장 HTML의 구조와 사용 순서 있는 목록 (Ordered List) <OL>...</OL> • 각 항목 앞에 번호가 붙는 목록 • <OL>과 </OL> 태그 안에 <LH>와 </LH> 사이에 목록의 제목을 <LI> 다음에 각 항목의 내용 넣음 • <LI> 태그의 하위에 <OL> 태그를 넣어 계층적 정보를 나타낼 수 있음 • 초기치로 지정된 번호는 아라비아 숫자 (1,2,3,...) • 번호 형식은 TYPE 속성에 다음 값을 주어 지정 •I : 로마자 (I, II, III,...) •A : 알파벳 (A,B,C...) 22 6장 HTML의 구조와 사용 정의 목록 (Definition List) <DL>...</DL> • 각 어떤 항목에 대한 정의나 설명을 넣을 때 사용 • <DL>과 </DL> 태그 안에 <LH>와 </LH> 사이에 목록의 제목을 <DT> 뒤에 항목을, <DD> 뒤에 그 항목에 대한 정의나 설명을 넣음 • 순서없는 목록이나, 순서 있는 목록과 마찬가지로 중첩 사용 가능 • 하위 항목으로 들어감에 따라 문단이 조금씩 안쪽으로 들어간다. 항목 앞에 번호가 붙는 목록 23 6장 HTML의 구조와 사용 6.3.2 테이블의 활용 테이블의 장점 • 단순한 도표뿐만 아니라 복잡한 문단을 정렬할 수 있고, 표제 지정도 가능 • 일목요연하게 항목들을 비교할 수 있으며, 문서를 깔끔하게 정리할 수 있음 24 6장 HTML의 구조와 사용 테이블의 삽입 <TABLE>...</TABLE> • <Table> 과 </Table> 태그 사이에 줄(row)에 해당하는 <TR> </TR> 태그를 넣고 그 사이에 각 칸에 들어갈 표의 내용을 나타내는 <TD> </TD> 태그가 들어감 • <TD>는 항상 <TR>에 의해 둘러싸여야 함 • <TD> 대신 <TH> 태그를 쓰면 수평, 수직 정렬이 자동으로 가운데가 되며, 볼드(bold)체로 표시된 표제가 됨 25 6장 HTML의 구조와 사용 테이블의 속성 • 테이블 크기 : WIDTH = (픽셀의 수 또는 백분율) HEIGHT = (픽셀의 수 또는 백분율) • 테두리 : BORDER = 픽셀의 수 • 테이블 내부의 선 굵기 : CELLSPACING = 픽셀의 수 • 테이블 내용과 선 간의 여백 : CELLPADDING = 픽셀의 수 셀 합치기 • 여러 행에 걸치는 셀 : ROWSPAN = 행의 수 • 여러 열에 걸치는 셀 : COLSPAN = 열의 수 26 6장 HTML의 구조와 사용 6.4 프레임을 이용한 화면 분할 프레임이란? • 프레임은 하나의 웹 브라우저 화면을 여러 개의 창으로 나누어 주는 역할을 함 • HTML 문서를 몇 개의 파일로 나누어 작성한 후, 이 파일을 프레임으로 구분된 각 창에서 보여 줄 수 있음 27 6장 HTML의 구조와 사용 6.4.1 화면 나누기 가로로 나누기 : <FRAMESET ROWS="나누는 개수만큼의 각 프레임의 세로 길이들"> 세로로 나누기 : <FRAMESET COLS="나누는 개수만큼의 각 프레임의 세로 길이들"> • 만들고 싶은 프레임의 개수 만큼 길이를 입력하고, 각각 쉼표로 구분 • 프레임의 길이 • 픽셀의 수 : 예) 두개로 나눌때 "140, *" • 백분율 : 예) 세개로 나눌때 "20%, 30%, 50% • 비율 : 예) 두개를 3:1로 나눌때 "3*, *" • * : 나머지 부분을 대신해서 사용할 수 있음 28 6장 HTML의 구조와 사용 6.4.2 프레임의 속성 • 스크롤바 표시 속성 : SCROLLING • YES : 항상 표시됨 • AUTO : 문서의 길이가 길어지면 표시됨 • NO : 표시하지 않음 • NAME 속성 • 프레임의 이름을 지정할 수 있음 • 앵커(<A>) 태그에서 TARGET 속성으로 프레임의 이 름을 지정하면 지정된 프레임에서 문서를 보여줌 29 6장 HTML의 구조와 사용 6.5 HTML 문서에서 멀티미디어의 활용 6.5.1 사운드 파일의 종류 WAVE • 윈도우에서 기본으로 제공되는 매체 재생기로 들을 수 있음 • 확장자 : wav MIDI • WAVE 파일에 비해 용량이 작으므로 전송에는 유리 하나 전송이 완료될 때까지 들을 수 없다는 단점이 있 음 • 확장자 : mid 30 6장 HTML의 구조와 사용 AU • 주로 Unix 운영체제에서 사용하던 것으로 인터넷에 많이 사용 • Netscape에서 자동으로 열리는 Naplayer로 들을 수 있음 • 확장자 : au RealAudio • 플러그인(Plug-in)으로 최근 인기 높은 사운드 파일 • 압축률이 뛰어나고 실시간 전송이 가능 • 확장자 : ra 31 6장 HTML의 구조와 사용 사운드의 삽입 • <EMBED> 태그 사용 <EMBED SRC="사운드 파일의 URL"> • 문서 상에서 사운드 재생, 정지, 일시 정지 등의 조작을 할 수 있는 오디오 세트(Audio Set)를 제대 로 나타내기 WIDTH, HEIGHT 속성 설정 필요 • 링크(Link)로 연결 • 앵커(Anchor) 태그의 HREF를 사운드 파일의 URL로 지정 사운드의 속성 • 볼륨 : VOLUME = 숫자 (최대값 100) • 자동 연주 : AUTOSTART = TRUE • 반복 연주 : LOOP = TRUE • 오디오 세트(Audio Set)32감추기 : HIDDEN = TRUE 6장 HTML의 구조와 사용 6.5.1 비디오 파일의 종류 MPEG • Motion Picture Expert Group의 약자 • 압축률이 좋음 • 눈이나 귀로 느낄 수 없을 정도의 에러를 허용하여 압축 • 기종에 관계 없이 사용 가능 • 확장자 : mpg Quicktime • 본래 매킨토시 운영 체제에서 제공되는 동화상 규약 • 최근에 Windows용인 QuickTime for Windows가 있음 • Lossy 압축으로 어느정도의 에러 허용 • 확장자 : mov 33 6장 HTML의 구조와 사용 AVI • Audio Video Interleaved의 약자 • Windows에서 기본으로 제공되는 동화상 • 특정한 하드웨어가 필요하지 않음 • 사용은 편리하지만 압축률이 낮음 • 확장자 : avi 비디오의 삽입 • <EMBED> 태그 사용 <EMBED SRC=”비디오 파일의 URL"> • 링크(Link)로 연결 • 앵커(Anchor) 태그의 HREF를 비디오 파일의 URL로 지정 34 6장 HTML의 구조와 사용 6.6 HTML 문서에서 CGI의 활용 6.6.1 CGI의 작동원리 • Common Gateway Interface의 약자 • 웹 서버와 응용프로그램을 연결하기 위한 표준 • CGI의 동작과정 35 6장 HTML의 구조와 사용 • CGI를 이용하면 사용자의 요구에 따라 웹 문서를 만들어 낼 수 있음 • 대표적인 예 : 웹 문서 검색 시스템 1. 사용자가 질의어를 입력 2. 웹 서버가 질의어를 CGI 프로그램에 전달 3. CGI 프로그램은 질의어를 데이터베이스 시스템에 서찾아냄 4. 결과에 따라 HTML 문서를 만들어냄 5. 브라우저를 통해 결과를 볼 수 있음 36 6장 HTML의 구조와 사용 6.6.2 FORM의 활용 Form의 개요 <FORM>...</FORM> • ACTION : 데이터가 전달될 URL (보통 CGI 프로그램) • METHOD : 메시지의 전달 방법 (GET과 POST) <INPUT>...</INPUT> • TYPE : 입력 필드의 형식을 결정 (TEXT, PASSWORD, SUBMIT, RESET, CHECKBOX, RADIO) • NAME : 입력 필드의 데이터가 CGI 프로그램으로 넘어 갈 때 입력필드의 이름 • VALUE : 해당 입력필드에 나타나는 기본값 37 6장 HTML의 구조와 사용 텍스트와 암호 입력 양식 <INPUT TYPE="TEXT" MAXLENGTH="n" SIZE="n"> : 텍스트 입력 양식 <INPUT TYPE="PASSORD" MAXLENGTH="n” SIZE="n"> : 암호 입력 양식 • 이름이나 ID를 입력받을때나 암호를 입력 받을 때 사용 • 암호 입력 양식은 입력된 내용을 '*'로 표시함 • MAXLENGTH : 입력 받을 수 있는 최대 길이의 문자 수 • SIZE : 텍스트 박스의 수평크기로 문자 수로 결정 38 6장 HTML의 구조와 사용 버튼 <IMG S<INPUT TYPE="SUBMIT" VALUE="버튼 이름 "> <INPUT TYPE="RESET" VALUE="버튼 이름"> • SUBMIT 버튼은 양식 안에 입력된 내용을 <FORM>태 그 안에서 지정된 곳으로 보냄 • RESET 버튼은 양식 안에 입력된 내용을 모두 지움 • VALUE는 버튼 위에 보여지는 이름을 지정 39 6장 HTML의 구조와 사용 라디오 버튼 <INPUT TYPE="RADIO" NAME="..." VALUE="..."> • 여러 항목들 중에서 하나만 선택 가능한 버튼 • 같은 선택군의 같은 NAME 값을 갖고 각각의 항목은 고 유의 VALUE값을 갖음 체크박스 <INPUT TYPE="CHECKBOX" NAME="...” VALUE="..."> • 라디오 버튼은 선택군에서 하나만 선택가능하지만 체 크박스는 여러개 선택 가능 • 같은 선택군의 같은 NAME 값을 갖고 각각의 항목은 고 유의 VALUE값을 갖음 40 6장 HTML의 구조와 사용 긴 텍스트 입력받기 <TEXTAREA NAME="..." ROWS="n” COLS="n">...</TEXTAREA> • 위의 텍스트 입력 받기 보다 긴 텍스트를 입력 받을 때 사용 • NAME은 지정된 곳(보통 CGI프로그램)으로 넘어갈 때 필드의 이름 • ROWS : 입력 영역 행의 글자수 • COLS : 입력 영역 열의 글자수 41 6장 HTML의 구조와 사용 선택 목록 만들기 <SELECT NAME="...">...</SELECT> • 선택 목록은 풀 다운 메뉴(Full Down Menu)를 말함 • <SELECT> 와 </SELECT>사이에 <OPTION> 태그 로 항목을 만든다. • <SELECT> 태그의 속성 • NAME : 지정된 곳(보통 CGI프로그램)으로 넘어 갈 때 필드의 이름 • MULTIPLE : 하나 이상의 선택이 가능 • SIZE : 드롭다운 항목에 표시되는 옵션의 수 • <OPTION> 태그의 속성 • SELECTED : 그 항목이 초기 선택 값으로 결정 42 6장 HTML의 구조와 사용 6.6.3 CGI 프로그램의 기초 웹 서버의 종류에 따른 사용 가능한 CGI 프로그래밍 언어 • UNIX 계열 : Perl, C/C++, 쉘 스크립트 언어 • 윈도우즈 계열 : Perl, C/C++, 비주얼 베이직 • 매킨토시 계열 : Perl, C/C++, 애플 스크립트 HTML 문서에서 CGI 실행 시키기 <A HREF="CGI 프로그램?NAME=VALUE">...</A> <FORM ACTION="CGI 프로그램" ...>...</FORM> 43 6장 HTML의 구조와 사용 데이터 받기 <FORM METHOD="GET 또는 POST" ...>...</FORM> • GET QUERY_STRING 이라는 환경변수를 통해 입력 받음 길이의 제한이 있슴 • POST • 표준 입력방법에 따라 입력 받음 • 길이의 제한이 없슴 • 입력양식의 정보를 NAME=VALUE 의 형태로 보냄 • 2개 이상의 정보일 경우 '&'로 연결 • 공백(Space) : '+'로 변환 • 'CR+LF' : %아스키코드 로 변환 • CGI 프로그램에서 다신 원래대로 변환 해야함 44 6장 HTML의 구조와 사용 데이터 보내기 • 헤더 •웹 브라우저에게 어떤 종류의 데이터인지 명시 • HTML : content-type: text/html 텍스트 : text/plain MPEG : video/mpeg JPEG : image/jpeg • Location: 문서의 위치와 이름 : 웹 브라우저에 출력할 문서를 직접 보여줌 • 헤더를 출력한 다음 한 줄을 띄어 헤더가 끝났음을 브라우저에게 알려야 함 • 데이터 : 헤더에서 정의된 문서의 종류에 따라 맞는 형식을 출력 45 6장 HTML의 구조와 사용 환경 변수 • 웹 서버에서 환경변수 설정 • 환경 변수의 예 46 6장 HTML의 구조와 사용 6.6.4 CGI로 방명록 만들기 우선 방명록의 입력양식 이름 : 방문자의 이름 E-mail : 방문자의 저자 우편(E-mail)주소 홈페이지: 방문자의 홈페이지 URL 남기고 싶은 말 : 방문자의 의견 입력양식으로부터 넘겨 받은 데이타를 파라메타 별로 나누고 원래의 데이터로 복원하는 작업이 필요 방문자의 기록을 HTML 문서 형태로 파일로 저장 방문자의 요구가 있을 경우 방문록 파일을 볼 수 있도록 함 데이터 베이스 시스템과 연계할 수 있다면 좀더 좋은 방명록 을 만들 수 있음 47