HTML
Hyper Text Markup Language Hyper Text : Link Markup : 전용 브라우저 (IE, Netscape, Opera..) 프로그램 + 실행 환경 ( 실행기 )
HTML Editor 일반 편집 문서기 완성형 아스키 (ASCII) 방식 Notepad, Editplus, Homesite 등.. HTML 전용 에디터 WYSIWYG(What You See Is What You Get) 여러 작업을 기능화 시킨 전용 에디터 나모 웹에디터, 프론트페이지, 드림위버 등.. 장, 단점
HTML 특징 태그는 대소문자 구분이 없다 확장자는 html 또는 htm 로 만든다 엔터, 스페이스바, 탭 (white-space) 은 허용 안 한다 → 전용 줄바꿈 요소 사용 태그의 중첩 관계를 지켜야 한다 파일명 또는 디렉토리명 ( 경로명 ) 은 영문으로 사용한다 ( 권장 ) 파일명 또는 디렉토리명에 공백을 제외한다
HTML 구성요소 태그 (Tag) ‘ ’ 로 묶인 HTML 명령어 … 또는 요소 (Elements) 태그에 의해 정의된다 모든것을 알켜주마 속성 (Attributes) 시작 태그가 가지는 특성
HTML 구성요소 속성 (Attributes) 없거나 두 개 이상 기술 가능 지정된 범위의 값을 가진다.. 값 (Value) 속성에 대한 값 속성명 =“ 속성값 ”, 속성명 =‘ 속성값 ’, 속성명 = 속성값
HTML 문서의 기본 골격 .. 문서의 시작과 끝 .. HTML 파일의 각종 정보를 담는 영역 미출력 부분.. Info 부분 .. 웹브라우저 화면에 출력되는 영역..
.. .. 문서의 제목을 나타내는 태그 Sample
Meta Tag p46 한글폰트 지정 브라우저의 인코딩 문제 해결 keywords 지정 ‘,’ 를 제외한 256 자까지 기술 가능
Meta Tag Description 지정 HTML 문서 이동 Sample 제작자 명 지정
스크립트 영역
.. p51 배경색 삽입하기 색상값 : 16 진수 or Well-known color Sample 배경 이미지 삽입하기 Sample – 일반 배경 이미지 Sample – 일반 배경 이미지 Sample – Animate Gif 배경 이미지 Sample – Animate Gif 배경 이미지 Sample – 가로 500pixel 이미지 Sample – 가로 500pixel 이미지 Sample – 가로 2000pixel 이미지 Sample – 가로 2000pixel 이미지 Sample – 배경 이미지 고정 Sample – 배경 이미지 고정
.. 링크 텍스트 색상 지정하기 link : 한 번도 방문한 적이 없는 링크 색상값 vlink : 한 번이라도 방문한 적이 있는 링크 색 상값 alink : 링크를 클릭했을 때 색상값 (Focus) Sample
.. 브라우저 여백 조정하기 Sample – 여백이 있는 경우 Sample – 여백이 있는 경우 Sample – 여백이 없는 경우 Sample – 여백이 없는 경우
주석 프로그램에 영향을 주지 않고 코드에 설명을 달기 위한 영역 Sample Sample
TEXT 화면에 출력되는 글자나 문단에 적용되는 태 그 문단의 크기나 형태, 글자의 크기나 색상 지 정 등의 속성 제공
TEXT … (n=1..6) 주로 문장의 타이틀 제목으로 사용 두꺼운 글자로 표현 header n H1 > H2 … H5 > H6 의 적용없이 자동 줄바꿈이 된다 Sample – 태그 사용 Sample – 태그 사용 Sample - 태그 정렬 Sample - 태그 정렬
TEXT .. 절대 크기 : 1..7, 기본값 3 상대 크기 : 기본값을 중심으로 가감 1..7 범위내에서 적용 Sample .. color : 글자색 face : 서체
TEXT 문서 전체의 글자 형태 지정 Sample
TEXT 물리태그, 문자 장식 태그.. : 굵은 글자.. : 이태릭체.. : 타자체.. : 위첨자.. : 아래첨자.. : 밑줄.. : 취소선 Sample
TEXT 수평선 Horizontal Rule width : 숫자 또는 퍼센트 size : 선의 두께, pixel align : 정렬방식 (left, center, right) color : 색상 Sample
TEXT 문장의 줄바꿈을 적용할 때 사용 단독태그 Line Break Sample
TEXT .. 문단 나누는 태그 를 두번 사용한 것과 같은 효과 Paragraph align : left, center, right Sample Sample - 사용 Sample - 사용 Sample -.. 사용 Sample -.. 사용
TEXT .. 글자, 이미지, 표 등을 중앙에 정렬 Sample .. 단락을 나누는 태그 align : left, center, right Sample Sample -..
TEXT .. 코드 내용 그대로 화면에 출력 공백, 탭, 들여쓰기, 줄바꿈 등 그대로 표현 글자는 고정폭으로 출력 영역내 태그 적용 가능 preformatted text Sample
TEXT non-breaking spaces 띄어 쓰기, 스페이스 항상 소문자로 기술 Sample p75
TEXT .. 특정 영역내에서 스크롤되는 문자열 생성 height, width : 영역 Sample bgcolor : 영역 배경색 Sample behavior : 스크롤 형태 (Alternate, Scroll, Slide) Sample
TEXT .. direction : 글자의 움직이는 방향 (left, right, up, down) Sample loop : 움직일 횟수 Sample scrollaMount : 한번에 움직일 거리 Sample scrolldelay : 움직이는 속도, 밀리초 (1/1000 초 ) Sample
TEXT 특수 문자 출력 표현이 불가능한 문자를 표현하는 문자 특수문자 엔티티 < → < > → > & → & " → “ ' → ‘ Sample
LIST 비순차적 목록 unordered list / listed item Sample type : 불릿형태 (disc, circle, square) Sample – type 적용 Sample – type 적용
LIST 순차적 목록 ordered list Sample type : 번호형식 (A, a, I, i, 1) Sample – type 적용 Sample – type 적용 Sample - 일괄적용 Sample - 일괄적용
LIST 순차적 목록 초기값 설정 설정된 값부터 증가 시작 Sample
Image 이미지 출력 태그 width, height : 이미지 크기 (pixel 또는 %) Sample border : 이미지 테두리 (n : 테두리 굵기 ) Sample alt : 대체 텍스트 Sample Sample – 줄바꿈 도움말 Sample – 줄바꿈 도움말
Image 이미지 정렬 align : left, right, top, middle, bottom Sample – 가로정렬 Sample – 가로정렬 Sample – 세로정렬 Sample – 세로정렬 이미지와 텍스트 사이 간격 Sample
Image 이미지 옆 문자 삽입 중지 clear : left, right, all Sample Sample
Sound 배경음악 loop : 반복횟수 Sample 음악, 플래시등 삽입 autostart : true,false hidden : true, false Sample p186
LINK Anchor 텍스트 또는 이미지에 링크 Sample p206 한 페이지내에서 특정 위치로 이동 Sample
LINK 다른 파일의 원하는 위치로 이동 Sample .. mailto: 메일주소 메일 보내기 Sample Sample
TABLE Table 사용 이유 분할된 이미지 출력 레이아웃 부분 배경 이미지, 색상 적용 ....
TABLE .. 기본 테이블 태그 .. table row 한 행 .. table header 표 내부 제목 ( 컬럼명 ) .. table data 표 안의 셀 실제 데이터가 들어가는 부분 Sample Sample
TABLE .. 표 상단의 제목 표시 align : top, bottom 태그 바로 아래 기술 Sample width : 테이블 전체 너비, pixel 또는 % height : 테이블 높이, pixel 또는 % align : 테이블 가로 정렬, left,right,center Sample
TABLE cellpadding : 내용과 cell 사이의 간격 cellspacing : cell 사이의 간격 Sample Sample – cellspacing=10 Sample – cellspacing=10 Sample – cellspacing=0,cellpaading=0 Sample – cellspacing=0,cellpaading=0
TABLE 테이블 외각선의 색상 지정 Sample 각 요소의 배경색 지정 Sample
TABLE 각 요소의 배경 이미지 (IE-TR 은 제외 ) Sample 복수의 셀 합치기 colspan : 가로의 셀들을 합칠 때 rowspan : 세로의 셀들을 합칠 때 Sample – colspan Sample – colspan Sample – colspan Sample – colspan Sample - rowspan
TABLE width : 셀의 너비 height : 셀의 높이 Sample p234 cell 내부의 정렬 align : left,center,right valign : top,middle,bottom Sample
TABLE cell 내부의 자동 줄바꿈 방지 Sample 문제 Question 1 – 움직이는 점선 테두리 Question 1 – 움직이는 점선 테두리 Question 2 – 테이블 테두리 깔끔하게 Question 2 – 테이블 테두리 깔끔하게 Question 3 – 서류 양식 제작
FRAME 웹 브라우저 화면을 분할하여 사용 분할된 각각의 영역은 독립된 윈도우처럼 사용 프레임 셋의 구조 출력 프레임 2 장 = 출력 문서 2 장 + 프레임 셋 문서 1 장 .. p245 Sample
FRAME 중복 프레임 Sample 프레임 고정 Sample
FRAME 스크롤바 제어 scrolling : auto, yes, no Sample marginwidth : 프레임 왼쪽 여백 marginheight : 프레임 상단 여백 Sample – 여백 값 0 Sample – 여백 값 0 Sample – 여백 값 無 Sample – 여백 값 無
FRAME 프레임 간격 밑 테두리 설정 Sample – frameborder=“no”, border=“0” Sample – frameborder=“no”, border=“0” Sample – frameborder=“no”, border=“1” Sample – frameborder=“no”, border=“1” .. Sample
FRAME .. 문서내에 원하는 위치에 원하는 크기로 프레 임 생성 태그 안에 삽입 width, height, marginwidth, marginheight, frameborder, scrolling Sample
FORM 서버와 클라이언트간의 대화 서버로 클라이언트의 데이터 전송 여러가지 형식으로 데이터 전송 .. 모든 FORM 관련 내용은 태그 내에 포함 되어야 한다 action : 데이터가 전송될 대상 method : 데이터 전송 방식, post,get
FORM 텍스트 입력 상자 type : 입력 양식의 종류 name : 변수명 size : 입력창의 크기 maxlength : 입력 텍스트 최대 길이 Sample
FORM .. 여러줄을 입력할 수 있는 텍스트 상자 태그 사이에 내용을 삽입 Sample
FORM 체크박스 여러 선택 항목을 나열, 원하는 항목 체크 Sample 라디오 버튼 여러 항목 중 단일 선택 name : 같은 값 부여 Sample
FORM 폼의 내용을 서버로 전송 폼의 내용을 초기화 Sample 이미지 전송 버튼 Sample
FORM 항목.. Sample Sample – selected Sample – selected Sample – multiple Sample – multiple 첨부 파일 입력 상자 Sample Question Question