HTML이란?
+ 구성요소: HTML + TAG
+ HTML 전송 프로그램 : HTTPD(http Demon) 즉, 웹서버
웹서버 작동원리
+ 웹서버 설치시 필요사항 : IP주소, Port 번호 + HTML Dir, CGI Dir
+ HTML, 추가 필요 이미지, 멀티미디어파일 요청 후 다 받으면 서버와의 연결 끊음
+ HTTP1.0 : 요청시마다 conn/disconn 반복 but, HTTP1.1:한번의 요청받아 처리
+ 클라이언트가 CGI 요청경우 -> CGI 실행시 입력정보 : 브라우저 정보, 사용자 입력정보, 브라우저에 저장되어 있던 쿠키 정보
+ Cache: CGI는 출력내용을 따로 보관했다가 한꺼번에 전송함 (CGI 종료 또는 캐시가 꽉찰때)
+ 실행권한: Unix에 웹서버 설치시 서버 사용자 이름을 할당해야 한다.
| 서비스 되는 문서 | 읽기권한 |
| 모든 디렉토리 | 접근권한 |
| CGI 파일 | 실행권한 |
HTML 기초
- 전체 구조
+ TAG는 대소문자 구별없다. 문서내부 공백,TAB무시, TAG는 시작/끝으로 구성
+ 태그 종류: HTML, HEAD, BODY, TITLE, H1, <!- comment ->
+ HTML = header(저자, 키워드, 설정정보) + body (화면출력)
- 기본 태그
+ HTML : html 문서포함 의미
+ prologue doc identifier : 맨 상단 분서버전 정보(필수아님)
+ HEAD : 문서정보
++ <base href="url" target="detail"> 문서url, 대상 frm 지정
++ <title/> 윈도 상단 시스템 메뉴표시
++ <meta> svr/client 에서 사용되는 추가정보(저작, 키워드, client pull, image map)
+ BODY : 내용
++ background, bgcolor, text, link(link + vlink + alink), margin : 이 속성들은 문서 전체적으로 적용된다.
+ 속성(attribute) : 일부 tag에 추가되는 정보
- 속성 추가
+ Tag속성 : HTML 스펙에 정의되지 않거나 브라우저가 못알아먹는 속성경우 무시된다. " 열고 닫음에 주의.
- Link/Anchor
+ Link 는 다른 문서보기, Anchor 는 문서 어느 부분에 이름 부여하기(책갈피).
+ Link 는 href 속성, Anchor는 name 속성 지정.
+ 상대경로는 브라우저의 내용 대부분을 자신의 Cache에 가져다 쓰게 되어 빠름(. ..로 시작), 절대경로는 다시 전송 받아서 느림(/로 시작).
+ <a href="../menu.html#UP"> 경우는 Link와 Anchor를 같이 사용한 경우임. Anchor는 로딩시간 따로 없고 문서안에서 이동된다.
+ <a href="mailto:binsolb@daum.net"> 메일보내기(추가기능) : 클릭시 outlook과 같은 메일프로그램이 구동되면서 받는 사람에 설정된다. 실제 메일 전송시에 필요한 세팅은 사용자의 몫이다.
+ <a href="ftp://www.binsolb.com"> anonymous 계정으로 FTP 연결됨.
+ <a href="ftp://userid:password@www.binsolb.com"> userid사용자 password사용자로 FTP로 연결함
+ 브라우저를 이용한 FTP 연결은 login 지속되지 않기 때문에 많이 느리다는 단점 있음.
- 목록 Tag
+ 나열형에 주로 쓰는 tag
+ <OL>: Orderde List(자동으로 번호조정됨), <UL>:Unorderde List, <LI>:List Item, <MENU>:단순들여쓰기, <DL>:Definition List(단어정의), <DT>:Definition Term, <DD>:Definition Description
+ <BLOCKQUOTE/> 들여쓰기 수행
- 문자와 스타일
+ 논리적 스타일(논리적 의미 부여) & 물리적 스타일(화면 출력 모습정의)
+ 논리적 스타일 ( EM, STRONG, CODE, SAMP, KBD, VAR, DFN, CITE )
+ 물리적 스타일 ( B, I, TT, U, PRE, HR, BR, ADDRESS, BLOCKQUOTE )
- 기타 Tag
+ FONT, DIR, CENTER, BLINK, STRIKE
+ BLINK는 브라우저마다 다르게 동작, IE에서는 옵션이 꺼져있음.
- 특수 문자 표기
| < | > | & | " | 공백 | ® | © | ± |
| < | > | & | " | | ® | © | ± |
+ <IMG src="url" align=top alt="image title" border=0>
+ SRC:이미지 위치, ALT:이미지 로딩 대신문자, BORDER:테두리 두께, ALIGN:정렬(left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom), WIDTH,WEIGHT:사이즈(확대/축소/%), HSPACE,VSPACE:이미지 주위요소와의 간격
+ WEB에서 인식되는 이미지 파일: GIF, JPG, PNG 이다. 나머지는 사용자에게 물어봄
+ gif는 gif87, gif89(투명, animation 가능) 형식있다.
+ 서서히 나타나는 이미지 : PSP 저장옵션중에 89a-interlaced로 저장된 gif
+ 압축률 PNG > JPG > GIF 순
HTML 활용
- Table
+ CAPTION : 표 타이틀, 실제로 사용 전무함.
+ Table tag 속성(해당 테이블 전체) : border, width/height, background, align, bgcolor, bordercolor, cellspacing, cellpadding
+ TR tag 속성(해당 열전체) : align(수평)=left/center/right/justify/char, valign(수직)=top/middle/bottom/baseline, bgcolor
+ TD tag 속성(해당 셀) : align, valign, bgcolor, nowrap(내용 초과시 자동줄바꾸기 안함), width, height, colspan(가로병합), rowspan(세로병함)
+ Table in Table 가능
+ 큰 이미지 출력시 나누어 table로 보여줄수 있다.
+ Table은 브라우저가 화면과 Table의 요소들을 계산해서 화면에 뿌리기 때문에 많은 계산이 필요하므로 큰 Table 작성시에는 주의가 필요하다.
- Frame
+ 브라우저 창(client area)를 여러 개로 분리하여 작업가능케 함.
+ body tag 없이 사용.
+ <FRAMESET rows="num/%" cols="num/%">
<FRAME src="url" name="name" scrolling="yes|no|auto"> ... </FRAME>
</FRAMESET>
+ rows, cols는 콤마분리자로 여러개의 프레임으로 나눌 수 있다. 프레임별로 여백 or 스크롤 설정가능.
+ FRAMSET tag : rows, cols, frameborder, bordercolor
+ FRAM tag : name(href의 target으로 지정가능), src, scrolling, noresize, marginwidth(프레임과 내용의 좌우여백), marginheight (상하)
+ 장점: 특정부분 reloading으로 빨라질수 있다. 단점: back, forward 버튼 동작이 이상해질수 있다.
+ Link를 현재 화면 아닌 다른 화면에서 로딩하고 싶을때 frame name을 href의 tartget으로 설정하면 됨. 지정된 이름의 frame 없으면 새창열림.
+ target 키워드 : _top (현재 브라우저 창의 최상위 frame), _blank(새창), _self(현재 frame), _parent(한단계 위 frame)
- Form
+ 버튼, 라디오 버튼, 선택박스 (사용자 입력 받아 ACTION 으로 지정된 서버의 cgi 파일이름 으로 입력정보 전달)
+ METHOD: 웹서버로 전달하는 방식 GET, PUT, HEAD, DELETE ...
+ GET : 코드화 되어 서버에 전달시 환경변수(QUERY_STRING)에 저장되어 서버로 전달된다. but, 길이 한계, 브라우저 창 주소에 입력값이 그대로 노출되어 북마크 될수 있다.
+ POST : 브라우저가 보낸 정보가 표준입력(stdin) 통해 서버로 전달된다. 보편적 방법, 길이제한 없다. 입력값 노출 안됨.
+ INPUT TYPE : text, password, file, radio, button, submit, reset, hidden, image(with src)
+ TEXTAREA, SELECT & OPTION
+ File Upload : FORM 속성중 ENCTYPE 이 있는데 Default로 application/x-www-form-urlencoded 형태의 MIME Type으로 웹서버로 전달된다. 그러나 INPUT의 TYPE=file 경우는 파일이 브라우저로 전달되기 때문에 그 때는 ENCTYPE을 multipart/form-data로 지정해야 파일전송이 제대로 된다.
- Element
+ TEXT : type=text, value=디폴트값, size, maxlength
+ RADIO : type=radio, checked, 중첩경우(name으로 그룹지정, 그룹내에는 하나만 지정가능)
+ CHECKBOX : type=checkbox, checked
+ BUTTON/SUBMIT/RESET : type=button | submit | reset, value=버튼표시내용
+ HIDDEN/PASSWORD/FILE : text type의 변형된 형태, hidden 값은 은 화면에 보이지 않고 서버로 form 내용 전달시 뭍어감, password는 사용자 입력값이 전부 *, file은 파일첨부시 사용
+ SELECT : 처음것이 기본값, option selected=선택됨, size(높이), mutiple(다중선택)
+ TEXTAREA : value(기본값), cols, rows
+ 하나의 폼 태그 안에 있는 요소들 내용만 Action tag에 지정된 곳으로 전달된다. 다른 것 존재시 따로 전달됨.
+ textarea 내용은 브라우저마다 길이제한 다르다.
+ radio 경우 서버로 전달시 value라는 특정값 따로 사용해서 구분해야 한다. 같은 이름가진 것이 같은 그룹으로 동작한다.
+ 전달 대상(action)은 폼당 하나이기 때문에 여러가지 작업경우엔 복잡해 질수 있으나 일부 브라우저에서 자바스크립트 이용해 action 항목을 바꿀 수 있다.
+ 서버 전달시 구분을 위해 이름(name)을 꼭 쓴다.
+ image 경우 서버 전달시 이미지 좌표값이 전달된다. 예. 이미지 이름이 img면 img.x, img.y 값 전달됨
기 타
- MIME Type
+ 웹서버가 브라우저로 전달할때 브라우저는 파일 확장자로 파일을 구분하게 된다. 이런 구분할 파일의 확장자 형식을 MIME type 이라고 한다.
+ type 종류: text/html, text/plain(ASCII 타입 txt), image/gif, image/jpeg, application/postscript(ps확장자파일), video/mpeg
+ 비표준화 (x로 시작) : Excel MIME Type 은 x-application/x-xls
- 이미지 맵
+ image 특정 부분 클릭시 동작 다르게 함 (meta tag이용)
+ <MAP name="abc"> <AREA shape="RECT" coords="10,10,40,40" href="abc.htm"></MAP>
<IMG src="a.gif" usermap="#abc">
+ 요즘은 Table(with border=0)로 대체되는 추세
- 클라이언트 풀
+ 웹페이지는 사용자 요구에만 응답하지만, client pull은 주기적으로 페이지를 가져오게 할수 있다.
+ 방법: mata tag 이용
+ 문법: html header 부분에 위치 <META HTTP-EQUIV="Refresh" CONTENT="12;URL://host.domain/index.html">
++ META : html 3.0 표준태그, 12초 주기
++ CONTENT : 지속시간, 단위는 초
++ URL : 가져올 문서
+ 치명적 단점: Refresh는 한번만 유효 하다 다음화면 불려졌을때 그 문서에 클라이언트 풀 문장이 없다면 다시 요청하지 않는다. 계속 자동으로 할려면 META Tag가 계속 존재하게 구성해야 한다. 더 중요한 건 동접수가 늘어날 경우 서버에 부하가 걸릴 수 있다.
마치며
+ html은 규약이므로 www.w3.org 참고
+ 특정 브라우저만 지원하는 기능은 자제
+ 참고 html Library Help 참고하자
