strong

Shared by: YrlP20G
Tags
Stats
views:: 13
posted:: 5/20/2012
language:: Korean
pages:: 47
Public Domain
Document Sample
							7장 HTML의 구조와 사용
                            7장 HTML의 구조와 사용




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




                    2
                            7장 HTML의 구조와 사용




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

                    3
                             7장 HTML의 구조와 사용




 HTML 문서의 기본 구성

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

                         4
                              7장 HTML의 구조와 사용




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

                      5
                                 7장 HTML의 구조와 사용




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




                        6
                                7장 HTML의 구조와 사용




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




                            7
                                    7장 HTML의 구조와 사용




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




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




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




                       10
                             7장 HTML의 구조와 사용




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




                     11
                             7장 HTML의 구조와 사용




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



                     12
                                  7장 HTML의 구조와 사용




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
                              7장 HTML의 구조와 사용




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




                     14
                            7장 HTML의 구조와 사용




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




                    15
                                 7장 HTML의 구조와 사용




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

                        16
                               7장 HTML의 구조와 사용




(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
                                7장 HTML의 구조와 사용




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




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

                        19
                               7장 HTML의 구조와 사용




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


                      20
                                 7장 HTML의 구조와 사용




 테이블에서 <TD> 대신 <TH> 태그를 쓰면 수평, 수직 정렬이 자
  동으로 가운데가 되며, 볼드(bold)체로 표시되는 제목 셀이 된다.

(4) 셀 합치기
 여러 행에 걸치는 셀 : ROWSPAN = 행의 수
 여러 열에 걸치는 셀 : COLSPAN = 열의 수




                     21
                           7장 HTML의 구조와 사용




7.4 프레임을 이용한 화면 분할

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




                   22
                           7장 HTML의 구조와 사용




7.4.1 화면 나누기

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


                   23
                                7장 HTML의 구조와 사용




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




                       24
                               7장 HTML의 구조와 사용




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

                      25
                         7장 HTML의 구조와 사용




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




                  26
                         7장 HTML의 구조와 사용




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



                  27
                                7장 HTML의 구조와 사용




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




                       28
                                  7장 HTML의 구조와 사용




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




                        29
                                 7장 HTML의 구조와 사용




(2) 입력 필드의 형식

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




                        30
                               7장 HTML의 구조와 사용




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



                      31
                                  7장 HTML의 구조와 사용




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




                         32
                             7장 HTML의 구조와 사용




(3) 기타 입력 태그

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



                     33
                              7장 HTML의 구조와 사용




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

                      34
                         7장 HTML의 구조와 사용




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




                  35
                                          7장 HTML의 구조와 사용




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




                              36
                          7장 HTML의 구조와 사용




7.5.2 카운터 달기

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




                  37
                           7장 HTML의 구조와 사용




 무료 CGI 서버 페이지를 방문




                      38
                          7장 HTML의 구조와 사용




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




                   39
                           7장 HTML의 구조와 사용




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




                   40
                                 7장 HTML의 구조와 사용




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




                            41
                          7장 HTML의 구조와 사용




7.5.3 방명록 삽입하기

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




                   42
                                7장 HTML의 구조와 사용




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



                           43
                      7장 HTML의 구조와 사용




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




                 44
                           7장 HTML의 구조와 사용




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




                   45
                           7장 HTML의 구조와 사용




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




                    46
                            7장 HTML의 구조와 사용




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




                  47