HTML HTML Hyper Text Markup Language Hyper Text

HTML ª ª ª Hyper Text Markup Language Hyper Text : Link Markup :

Meta Tag ª ª p 46 한글폰트 지정 n n ª <META http-equiv=“content-type” content=“text/html;

Meta Tag ª Description 지정 n ª HTML 문서 이동 n n ª <META

스크립트 영역 ª ª <style type=“text/css”> <!-p {font-size: 9 pt} --> </style> <script language=“javascript”>

TEXT ª <HR width=“” size=“” align=“” color=“”> n n n n 수평선 Horizontal Rule

TEXT ª <CENTER>. . </CENTER> n n ª 글자, 이미지, 표 등을 중앙에 정렬

TEXT ª n n ª non-breaking spaces 띄어 쓰기, 스페이스 항상 소문자로 기술

TEXT ª <MARQUEE>. . </MARQUEE> n n n n 특정 영역내에서 스크롤되는 문자열 생성

TEXT ª <MARQUEE>. . </MARQUEE> n n n n direction : 글자의 움직이는 방향(left,

LIST ª 비순차적 목록 n n n <UL> <LI type=“”> </UL> unordered list /

LIST ª 순차적 목록 n n n <OL> <LI type=“”> </OL> ordered list Sample

Image ª <IMG src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src=“이미지명” align=“”> n n ª 이미지 정렬 align : left, right,

Image ª <BR clear=“”> n n n ª 이미지 옆 문자 삽입 중지 clear

Sound ª <BGSOUND src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src=“파일명” loop=“”> n n n ª <EMBED src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src=“파일명” autostart=“” hidden=“”> n

TABLE ª <CAPTION>. . </CAPTION> n n ª 표 상단의 제목 표시 align :

TABLE ª <TABLE cellpadding=“” cellspacing=“”> n n n cellpadding : 내용과 cell 사이의 간격

TABLE ª <TABLE bordercolor=“”> <TABLE bordercolorlight=“” bordercolordark=“”> n n ª 테이블 외각선의 색상 지정

TABLE ª <TABLE background=“”> <TD background=“”> n n ª 각 요소의 배경 이미지(IE-TR은 제외)

TABLE ª <TD width=“” height=“”> n n ª width : 셀의 너비 height :

FRAME ª 중복 프레임 n n ª <FRAMESET> </FRAMESET> Sample <FRAME src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src=“” noresize> n

FRAME ª <FRAME src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src=“” scrolling=“”> n n n ª 스크롤바 제어 scrolling : auto,

FRAME ª <FRAMESET frameborder=“”> n n n ª 프레임 간격 밑 테두리 설정 Sample

FRAME ª <IFRAME>. . </IFRAME> n n 문서내에 원하는 위치에 원하는 크기로 프레 임

FORM ª ª <INPUT type=“text” name=“” size=“” maxlength=“”> <INPUT type=“password” name=“” size=“” maxlength=“”> n

FORM ª <INPUT type=“submit” value=“”> <INPUT type=“reset” value=””> n n n ª 폼의 내용을

FORM ª <SELECT name=“”> <OPTION value=“”>항목. . </SELECT> n n n ª <INPUT type=“file”

Slides: 57

Download presentation

HTML

HTML ª ª ª Hyper Text Markup Language Hyper Text : Link Markup : <tag> 전용 브라우저(IE, Netscape, Opera. . ) 프로그램 + 실행 환경(실행기)

Meta Tag ª ª p 46 한글폰트 지정 n n ª <META http-equiv=“content-type” content=“text/html; charset=euc-kr”> 브라우저의 인코딩 문제 해결 keywords 지정 n n n <META name=“keywords” content=“키워드 내용 ”> <META name=“keywords” content=“쇼핑, 상품판 매, 마트”> ‘, ’ 를 제외한 256자까지 기술 가능

Meta Tag ª Description 지정 n ª HTML 문서 이동 n n ª <META name=“Description” content=“문서 내용 설명”> <META http-equiv=“refresh” content=“time; url=이 동할주소”> Sample 제작자 명 지정 n <META name=“author” content=“제작자명”>

스크립트 영역 ª ª <style type=“text/css”> <!-p {font-size: 9 pt} --> </style> <script language=“javascript”> <!-document. write(“hello~”); //--> </script>

TEXT ª <HR width=“” size=“” align=“” color=“”> n n n n 수평선 Horizontal Rule width : 숫자 또는 퍼센트 size : 선의 두께, pixel align : 정렬방식(left, center, right) color : 색상 Sample

TEXT ª <CENTER>. . </CENTER> n n ª 글자, 이미지, 표 등을 중앙에 정렬 Sample <DIV>. . </DIV> n n n 단락을 나누는 태그 align : left, center, right Sample - <P>. . </P> Sample - <DIV>. . </DIV>

TEXT ª n n ª non-breaking spaces 띄어 쓰기, 스페이스 항상 소문자로 기술 Sample p 75

TEXT ª <MARQUEE>. . </MARQUEE> n n n n 특정 영역내에서 스크롤되는 문자열 생성 height, width : 영역 Sample bgcolor : 영역 배경색 Sample behavior : 스크롤 형태(Alternate, Scroll, Slide) Sample

TEXT ª <MARQUEE>. . </MARQUEE> n n n n direction : 글자의 움직이는 방향(left, right, up, down) Sample loop : 움직일 횟수 Sample scrolla. Mount : 한번에 움직일 거리 Sample scrolldelay : 움직이는 속도, 밀리초(1/1000초) Sample

LIST ª 비순차적 목록 n n n <UL> <LI type=“”> </UL> unordered list / listed item Sample type : 불릿형태(disc, circle, square) Sample – type 적용

LIST ª 순차적 목록 n n n <OL> <LI type=“”> </OL> ordered list Sample type : 번호형식(A, a, I, i, 1) Sample – type 적용 Sample - 일괄적용

Image ª <IMG src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src=“이미지명” align=“”> n n ª 이미지 정렬 align : left, right,

Image ª <IMG src=“이미지명” align=“”> n n ª 이미지 정렬 align : left, right, top, middle, bottom Sample – 가로정렬 Sample – 세로정렬 <IMG src=“이미지명” HSPACE=“” VSPACE=“”> n n 이미지와 텍스트 사이 간격 Sample

Image ª <BR clear=“”> n n n ª 이미지 옆 문자 삽입 중지 clear : left, right, all Sample <IMG src=“이미지명” lowsrc=“초기이미지 명”> n Sample

Sound ª <BGSOUND src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src=“파일명” loop=“”> n n n ª <EMBED src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src=“파일명” autostart=“” hidden=“”> n

Sound ª <BGSOUND src=“파일명” loop=“”> n n n ª <EMBED src=“파일명” autostart=“” hidden=“”> n n ª 배경음악 loop : 반복횟수 Sample 음악, 플래시등 삽입 autostart : true, false hidden : true, false Sample p 186

TABLE ª <CAPTION>. . </CAPTION> n n ª 표 상단의 제목 표시 align : top, bottom <TABLE>태그 바로 아래 기술 Sample <TABLE witdh=“” height=“” align=“”> n n width : 테이블 전체 너비, pixel 또는 % height : 테이블 높이, pixel 또는 % align : 테이블 가로 정렬, left, right, center Sample

TABLE ª <TABLE cellpadding=“” cellspacing=“”> n n n cellpadding : 내용과 cell 사이의 간격 cellspacing : cell 사이의 간격 Sample – cellspacing=10 Sample – cellspacing=0, cellpaading=0

TABLE ª <TABLE bordercolor=“”> <TABLE bordercolorlight=“” bordercolordark=“”> n n ª 테이블 외각선의 색상 지정 Sample <TABLE bgcolor=“”> <TR bgcolor=“”> <TD bgcolor=“”> n n 각 요소의 배경색 지정 Sample

TABLE ª <TABLE background=“”> <TD background=“”> n n ª 각 요소의 배경 이미지(IE-TR은 제외) Sample <TD rowspan=“n” colspan=“n”> n n n 복수의 셀 합치기 colspan : 가로의 셀들을 합칠 때 rowspan : 세로의 셀들을 합칠 때 Sample – colspan Sample - rowspan

TABLE ª <TD width=“” height=“”> n n ª width : 셀의 너비 height : 셀의 높이 Sample p 234 <TD align=“” valign=“”> n n cell 내부의 정렬 align : left, center, right valign : top, middle, bottom Sample

FRAME ª 중복 프레임 n n ª <FRAMESET> </FRAMESET> Sample <FRAME src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src=“” noresize> n

FRAME ª 중복 프레임 n n ª <FRAMESET> </FRAMESET> Sample <FRAME src=“” noresize> n n 프레임 고정 Sample

FRAME ª <FRAME src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src=“” scrolling=“”> n n n ª 스크롤바 제어 scrolling : auto,

FRAME ª <FRAME src=“” scrolling=“”> n n n ª 스크롤바 제어 scrolling : auto, yes, no Sample <FRAME src=“” marginwidth=“” marginheight=“”> n n marginwidth : 프레임 왼쪽 여백 marginheight : 프레임 상단 여백 Sample – 여백 값 0 Sample – 여백 값 無

FRAME ª <FRAMESET frameborder=“”> n n n ª 프레임 간격 밑 테두리 설정 Sample – frameborder=“no”, border=“ 0” Sample – frameborder=“no”, border=“ 1” <FRAME name=“프레임 이름”> <A href=“url” target=“프레임 이름”>. . </A> n Sample

FRAME ª <IFRAME>. . </IFRAME> n n 문서내에 원하는 위치에 원하는 크기로 프레 임 생성 <BODY> 태그 안에 삽입 width, height, marginwidth, marginheight, frameborder, scrolling Sample

FORM ª ª <INPUT type=“text” name=“” size=“” maxlength=“”> <INPUT type=“password” name=“” size=“” maxlength=“”> n n n n 텍스트 입력 상자 type : 입력 양식의 종류 name : 변수명 size : 입력창의 크기 maxlength : 입력 텍스트 최대 길이 Sample

FORM ª <INPUT type=“submit” value=“”> <INPUT type=“reset” value=””> n n n ª 폼의 내용을 서버로 전송 폼의 내용을 초기화 Sample <INPUT type=“image” src=“” border=“ 0”> n n 이미지 전송 버튼 Sample

FORM ª <SELECT name=“”> <OPTION value=“”>항목. . </SELECT> n n n ª <INPUT type=“file” name=“” size=“”> n n ª Sample – selected Sample – multiple 첨부 파일 입력 상자 Sample Question