HTML 실용가이드
작성자 정보
- 웹관리자 작성
- 작성일
컨텐츠 정보
- 7,412 조회
- 0 추천
-
목록
본문
|
HTML은 Hyper Text Markup Language의 약어 입니다. 웹문서를 만들기 위해서는 먼저 HTML을 알아야 합니다. 그럼 이 HTML이 뭣에 쓰는 물건인지는 알아야 겠지요. 인터넷의 웹(WWW)에서 쓰이는 표준언어라고 생각하시면 됩니다. 예를 든다면 우리가 넷스케이프나 익스플로러등의 웹브라우즈를 통해서 보는 인터넷 웹문서는 모두 이 HTML언어로 되어 있습니다.
그럼 HTML은 어떻게 구성이 되며 무엇으로 표현이 되어 있을까요? 이에 대한 궁금증은 의외로 간단히 풀 수가 있습니다. 지금 쓰고계신 웹브라우즈를 열어서 아무 홈페이지나 방문해 보세요.. 그런다음 인터넷익스플로러에서는 “보기-> HTML보기”를 눌러서 보시고, 넷스케이프를 사용하시는 분들은 “보기-> 페이지소스”를 선택해 보시면 창이 하나 뜨면서 우리가 알아볼 수 있는 문자들과 이상한 문자(“< >”)로 구성되어 있다는 것을 보실 수 있습니다.
여기서 말씀드리고자 하고자 하는 것은 이 “< >”기호에 대한 것입니다. HTML에서는 이 “< >”문자를 태그(Tag)라고 합니다. 다시말해서 HTML은 “< >”라는 태그로 구성되어 있으며, 웹브라우즈에서는 이 태그로 구성된 문서(*.html)를 태그가 의미하는 대로 보여줄 뿐입니다. 물론 HTML에서 보여주기 어려운 것들은 CGI나 JAVA등을 이용해서 다양한 웹문서도 가능하지만 여기서는 HTML에 대해서만 설명을 하겠습니다.
HTML로 작성된 문서는 html(또는 htm)이란 확장자로 저장이 되며 이 html로 작성된 문서를 웹문서라고 합니다. 이 웹문서는 웹브라우즈에서 바로 볼 수가 있습니다.
이 웹문서를 만드는 방법에는 크게 두가지가 있습니다. 첫 번째로 윈도우의 메모장등을 이용해서 직접 태그를 사용하여 만들어 주는 것과 일반 워드프로세서처럼 문서를 작성하고 저장만 하면 자동으로 웹문서형식으로 저장(만들어)을 해주는 웹에디터가 있습니다. 이런 웹 에디터에는 국내의 나모(NAMO)라는 회사에서 개발한 나모웹에디터, 마이크로소프트에서 만든 프론트페이지등이 있습니다. 이외에도 HomeSite, Hot Java등 여러 가지가 있지만 가장 많이 사용되는 것이 나모웹에디터와 프론트페이지입니다.
웹에디터를 사용해서 간편히 만들 수는 있지만 홈페이지를 만들어 주는 기본에 대해서는 알고 계셔야 합니다. 홈페이지를 만들고 난후에 수정할 일이 많습니다. 수정을 하려면 웹문서를 열어서 HTML 태그를 바로 수정해 주는 것이 가장 효율적인데 이 때 이 HTML 태그를 모르면 수정할 수 없습니다. 따라서 웹에서 홈페이지를 만들려고 하시는 분들은 HTML태그를 반드시 알아야 합니다. 비유가 적당 할는지 모르겠지만, 산수를 알아야 수학을 할수 있다는 논리와 비슷 하다고나 할까요. 그럼 다음장부터 HTML이 어떻게 구성 되었나에 대해서 알아보도록 하겠습니다.
|
|
제목이나 목차에 따른 항목나열 등에 쓰이는 목록은 워드프로세서로 문서를 작성할 때와 마찬가지로 HTML문서를 작성할 때도 매우 중요합니다. 목록에는 몇가지가 있습니다. 순서없는 목록을 정의하는 <UL> ~ </UL> 태그와 순서있는 목록을 정의하는 <OL>~</OL>태그가 있으며, 정의목록을 나타내 <DL>~</DL>태그와 메뉴목록을 정의해 주는 <MENU>~</MENU>태그와 <DIR>~</DIR>가 있습니다. 이를 표로 정리해 보면 다음과 같습니다.
목록을 작성 할 때는 정의태그로 먼저 목록의 종류를 정의해 주고 사이에 <LI>라는 항목태그로 필요한 항목을 적어주면 됩니다.. UL은 Unordered List의 약어이며, OL은 Ordered List의 약어이며, 그리고 DL은 Definition List의 약어이며 DIR은 Directory의 약어입니다.
그럼, 먼저 순서없는 목록의 예를 들어보겠습니다.
 <LI>의다양한옵션 <LI>태그에는 TYPE=disc, circle, square를 붙여서 다양한 모양을 낼 수 있습니다.
<LI TYPE=disc>를 했을 경우
<LI TYPE=circle>를 했을 경우
<LI TYPE=square>를 했을 경우
|
|
어떤 홈페이지에 가보면 여러 가지 그림들로 예쁘게 꾸며 놓은 것을 많이 보았을 것입니다. 홈페이지에서 그림을 불러 오는 것은 의외로 간단합니다. 하지만 이 그림들을 어떻게 배치하고 넓이와 길이는 어떻게 할 것인지는 지정하기에 따라서 달라질 수 있습니다. 원본그림의 크기가 큰 것이라도 작게 보이도록 할 수 있고, 작은것도 크게 보일 수 있습니다. 물론 해상도는 다소 달라지지만, 어쨌든 여기서는 이미지를 불러서 홈페이지에 삽입함에 있어서 여러 가지 옵션에 대해서 알아보고 또한 이미지와 글자와의 관계에 대해서도 알아보겠습니다.
위와 같이 해주면 해당위치에 지정한 이미지(image.gif)가 들어 갑니다. 간단하죠… 웹에서 사용할 수 있는 이미지는 두가지가 있습니다. gif와 jpg가 그것인데, gif는 아이콘 같은 적은용량의 이미지에 많이 쓰이며 jpg는 압축효율이 좋아 비교적 큰이미지에 쓰이며 주로 압축해서 사용합니다. |
|
워드프로세서로 문서를 작성할 때 표를 작성해야 할 경우가 많습니다. 워드프로세서에는 표를 만들고 표의 형태와 색깔등 다양하게 꾸밀 수가 있습니다. HTML 코드로도 워드프로세서로 문서를 작성하는 것처럼 다양하게 표를 꾸밀 수가 있습니다.
테이블 즉 표를 사용하는 이유는 다음과 같은 경우입니다.
먼저, 기본 테이블을 만들어 보겠습니다.
위의 예처럼 테이블을 작성 할 때는 먼저 테이블임을 알리는 <TABLE> ~ </TABLE>태그를 테이블의 처음과 마지막에 적어둬야 합니다. 즉, 테이블의 모든 요소는 이 태그안에 들어가게 됩니다. 그리고, <TR> ~ </TR>은 하나의 행을 선언한 것입니다. 위의 예에서는 이 태그가 두가가 있으니 두 개의 행으로 된 테이블임을 알 수 있습니다. 또한, 한 행안에서 열을 표시하기 위한 태그는 <TD> ~ </TD> 입니다.
따라서 위의 행은 2행 2열로 된 테이블임을 알 수가 있습니다.
정리해 보면 다음과 같습니다.
표를 만들때는 정확하게 몇행 몇열로 표를 만들 것인지를 정하고 표의 전체모양(행과열)을 먼저 잡아주신 다음에 각종옵션과 내용을 채워주시는 것이 좋습니다. 테이블과 셀의 크기 지정하기
이번에는 테이블과 테이블 내의 셀의 크기를 바꾸는 것에 대해서 알아보도록 하겠습니다. 셀의 크기를 지정하지 않았을 때는 셀내문장의 크기에 따라 정해집니다. 가로크기를 지정할 때는 WIDTH=n을 사용하고 세로크기는 HEIGHT=n 으로 지정합니다.
n을 숫자로 지정했을 경우는 픽셀단위가 되고, %로 지정했을 경우는 전체화면이 100%라는 가정하에서 상대적인 비율(%)로 지정됩니다. 다음의 예는 표의 크기를 전체창의 가로 100%, 세로 50%의 크기로 지정한 것입니다.
표의크기와 셀의크기 지정하기
전체 브라우즈의 창의크기를 100으로 보았을 때 표의 크기는 반(50%)이며, 표내의 2개의 셀의 크기는 각각 30%와 70%로 지정한 것입니다. |
|
한 페이지가 좌우로 나뉘거나, 상하로 나뉜 페이지를 만들어 보도록 하겠습니다. 프레임의 개념은 이렇습니다. index.html문서를 웹브라우즈에서 불러오면 a.html은 왼쪽의 메뉴로 사용되는 문서이고, b.html은 각메뉴에 해당하는 상세정보를 보여주는 문서 입니다. a.html이나, b.html은 보통의 웹문서 입니다. 단지 프레임으로 나뉜 문서를 불러오기 위해서는 index.html에서 프레임으로 나뉜 다는 것을 지정해 주기만하면 됩니다. 프레임으로 나뉜 웹문서(index.html)를 보통 MasterPage라고도 합니다.
다음은 간단한 프레임으로 된 index.html입니다.
예1) 좌,우로 나누기 위한 index.html
예2) 상,하로 나누기 위한 index.html
마스터페이지에는 일반 HTML문서와는 달리 <BODY> ~ </BODY>태그가 없습니다. 대신 <FRAMESET> ~ </FRAMESET>태그가 있습니다. 이 태그안에서 웹브라우즈창을 어떻게 나눌것이지와 나누고 난 후에 어떤문서를 불러올 것인지를 지정해 줍니다. 위의예1)과 예2)처럼 웹브라우즈를 좌우로 나누려면 COLS라는 옵션을 쓰고, 상하로 나누려면 ROWS라는 옵션을 사용합니다. COLS와 ROWS에 각각 몇 개로 나눌것인지를 지정해주는 것입니다. 위의 예1)에서는 30%와 70%로 창을 좌우로 나눈것이며, 예2)에서는 상하로 30%와 70%로 나눈 것입니다. 두 개의 프레임문서로 불러온 후에는 <FRAME SRC=”불러올문서”>로 나뉘어진곳에 불러올 문서를 지정해 주면 됩니다. 간단하죠….
이것이 프레임의 가장 기본이며, 전부다라고 할 수 있습니다. 여기서 프레임에 대한 구현방법만 조금 더 배우면 됩니다. 또한 이프레임들을 좀 더 다양하고 이쁘게 그리고 방문자들을 위한 해상도를 고려해주는 프레임을 만들수가 있습니다.
위에서는 창을 %로 나누는 것만 배웠습니다. %는 전체브라우즈의 창을 100으로 보았을 때 각각의 프레임문서를 몇%로 나눌것인가를 지정하는 것입니다. 그러나 %로 해두면 만들기는 편리하나 프레임을 만들 컴퓨터의 해상도와 방문자의 해상도가 다를 경우에는 다르게 보일 수 있습니다. 이 문제를 해결하기 위해서는 %대신에 고정된 크기로 지정 할 수 있는 Pixel로 지정해 주면 됩니다.
예3) 픽셀로 프레임나누기
위의 프레임은 픽셀로 지정된 것입니다. "a는 50픽셀의 크기로 나누고, 나머지 공간을 2개로 분할하여 c가 b의 2배로 되게 나누어라"하는 것입니다.
이번에는 좌우로(COLS) 나뉜 프레임을 다시 상하(ROWS)로 나누어 보겠습니다.
예4) 복잡한 프레임
위의 마스터페이지는 좌우로 먼저 3개의 프레임으로 나눈 뒤에 마지막 3번째 프레임문서를 다시 상하 2개의 문서로 나뉜 것입니다. 한가지 주의할 것은 문서는 프레임을 나눈 순서대로 들어가게 된다는 것만 주의해 주시면 별 어려움없이 프레임으로 된 웹페이지를 만드실 수 있을 것입니다. |
|
FORM 태그로 여러분의 웹문서에 방명록, 게시판등의 입력양식을 만들 수 있습니다.
HTML Form의 기본양식은 다음과 같습니다....
다음은 Form tag에서 입력받은 데이터를 어디로 보낼 것인가에 대한 것입니다. Form tag에서 입력받은 데이터는 크게 두곳으로 지정하여 보낼 수가 있습니다.
먼저 EMAIL로 보내는 것은 다음과 같이 구현합니다.
입력받은 홈변수값(데이터)를 지정한 email로 보내는 방법의 예로써 mailto: 뒤에 E-Mail주소를 넣어주면 됩니다.
둘째로 CGI Script로 보내는 방법인데, 일반적으로 CGI 프로그래밍을 할 때 대부분 이런 방법을 사용합니다. 위에서 email주소 대신에 CGI프로그램이름을 기술해 주면 되는 것입니다.
CGI Script로 넘겨진 변수의 처리는 test.cgi라는 스크립트(프로그램)로 넘겨져서 처리됩니다.
이제 본격적으로 FORM태그의 다양한 옵션지정방법과 사용법에 대해서 알아 보겠습니다.
TYPE=TEXT
FORM <INPUT>의 가장 일반적인 TYPE은 TEXT입니다.
결과보기
예처럼, TEXT옵션은 주소나 EMAIL등을 입력 받고자 할 때 주로 사용됩니다. SIZE라는 옵션은 입력할 수 있는 창(FORM 입력창)의 크기를 지정한 것입니다. 크기를 지정하지 않으면 기본크기는 20입니다.
TYPE=PASSWORD
TYPE=TEXT와 아주 비슷한 것이 TYPE=PASSWORD 입니다. 실제 입력된 문자 대신에 ***을 보여 준다는 것을 제외하고는 TEXT옵션과 같습니다. 여러분에게는 웹브라우저에 입력된 그대로를 보내 주지만, 웹브라우저에서는 입력부분을 안보여 준다는 것 뿐입니다.
결과보기
TYPE=RADIO
다음은 라디오 버튼과 체크박스에 관한 예입니다. 편의상 HTML문서의 <HEAD>부분과 <BODY>부분의 태그는 생략하도록 하고 <FORM>태그 부분만을 보여드릴 것입니다.
Radio 버튼은 사용자가 여러 가지 선택사항중에 하나만을 선택할 수 있습니다. 우선 Radio 버튼을 몇 개 만들어 봅시다.
결과보기
예로서 설문조사를 하는 홈페이지에서는 여러 가지 선택사항중 한가지를 미리 선택되어있는 경우가 있습니다. 이것은 다음의 예처럼 INPUT 태그안에 CHECKED라는 옵션을 주면 지정된 항목이 미리 선택되어 보여지게 됩니다.
결과보기
사용자는 하나의 선택사항 만을 선택할 수 있습니다. 선택한 것은 (누구를선택하든) 여러분에게 "친한친구=승희"라는 NAME/VALUE값으로 ACTION=test.cgi에 의해 test.cgi라는 프로그램의 변수값으로 넘겨지게 됩니다.
TYPE=CHECKBOX
다음은 Check box를 만들어 보도록 하겠습니다. Radio button과 방법은 거의 같습니다. 각각의 Check 박스는 똑같은 VALUE를 가집니다.
결과보기
주의 할것은 Check박스에서는 NAME이 변수이며 VALUE는 같은 반면 Radio 버튼은 VALUE가 변수이고 NAME은 같습니다. 분명히 구분해야 합니다. FORM태그가 존재하는 이유는 CGI프로그램으로 변수값을 넘겨서 내부적인 처리를 하기위한 것인데, 어떤값이 CGI 프로그램으로 넘어 가느냐는 대단히 중요한 것입니다.
결과보기
사용자는 선택사항중에서 1, 2, 또는 하나도 선택하지 않거나 모두를 선택할 수 있을 것입니다. 선택한 것은 CGI프로그램(test.cgi)으로 name/value로 보내집니다.
승희=YES 희선=YES
물론선택을 하지 않으면 널값(NULL값, 값이없음)이 넘겨집니다.
PULLDOWN 리스트
다음의 입력형식은 Pull Down 리스트입니다.
결과보기
역삼각형으로 된 버튼을 클릭하게 되면 승희, 재욱, 희선, 동건이란 이름이 나오며 이를 선택할 수 있습니다. 기본값이 처음에 게시된 항목이므로 “승희”가 보이는 것입니다.
물론 다음과 같이 리스트에 있는 첫째항목 이외의 것도 기본값으로 지정할 수 있습니다.
결과보기
SCROLLING 리스트
Scrolling 리스트는 Pull Down 리스트와 비슷하게 만들어 집니다. 몇 개의 이름을 더 추가 합시다. 역시 기본값은 첫번째 <OPTION>이고, 아무거나 선택해서 바꿀수 있습니다.
결과보기
TEXTAREA
다음은 textarea 입니다. 방명록 등에서 소감이나, 설문조사에서 의견등을 입력 받을 때 비교적 많은 텍스트를 입력 받을 때 사용하는 것입니다.
결과보기
|
관련자료
-
이전
-
다음
