1. HTML 기초
1. HTML (Hyper Text MarkUp Language)
- HTML (Hyper Text MarkUp Language) : 태그를 사용하여 웹문서를 구조적으로 표현하기 위한 언어
- 브라우저 엔진에 의해 해석되어 실행되는 언어
- 태그를 사용하여 웹문서 작성
- 시작태그와 종료태그가 하나의 짝으로 구성
=> HTML 태그에는 독립태그 존재 - 시작태그와 종료태그 사이에 하위태그 또는 태그내용 표현
- 시작태그에는 속성과 속성값을 사용하여 태그를 다양하게 표현
- 크기 또는 위치를 표현하는 단위 : px (기본, 절대값), % (백분율, 상대값)
- id 속성 : 태그를 구분하기 위한 식별자를 속성값으로 설정
- name 속성 : 태그의 이름을 속성값으로 설정
2. 최상위 태그
- <!DOCTYPE html> : 웹문서의 종류 및 버전을 표현
- <html> : HTML 문서를 작성하기 위해 사용되는 최상위 태그
- 하위 태그 : head, body
3. head 태그
- head 태그 : HTML 문서에 대한 정보를 제공하기 위한 태그
- 하위태그 : meta, title. style, script, link
4. body 태그
- body 태그 : 웹문서의 내용을 출력하기 위한 영역을 제공하기 위한 태그
- 하위태그 : header, navi, section, article, aside, footer, h1, p, img, form 등
- body 태그의 하위태그를 박스모델 태그로 표현할 수 있으며 블럭 레벨 태그와 인라인 레벨 태그로 구분
- 블럭 레벨 태그 (Block Level Tag) : 하나의 태그가 전체 라인을 모두 사용하는 태그
=> div, h1, p, ol, ul 등 - 인라인 레벨 태그 (Inline Level Tag) : 하나의 태그가 라인의 일부분을 사용하는 태그
=> span, img, input, select 등 - 인라인 레벨의 하위태그로 블럭 레벨의 태그 사용 불가능
2. head 태그
1. meta 태그
- meta 태그 : HTML 문서에 대한 부가적인 정보(Meta Data)를 태그 속성과 속성값으로 제공하는 태그
- charset 속성 : HTML 문서의 문자형태(CharacterSet - Encoding)를 속성값으로 제공
- 브라우저가 HTML 문서를 해석하여 실행하기 위한 문자의 인코딩 방식을 제공
- 기본 속성값 : ISO-8859-1 (서유럽어)
- 한글 관련 캐릭터 셋 : euc-kr (완성형), utf-8 (조합형)
2. title 태그
- title 태그 : HTML 문서의 제목을 설정하기 위한 태그
3. style 태그
- style 태그 : HTML 문서에 CSS를 사용하여 스타일 시트를 적용하기 위한 태그
4. link 태그
- link 태그 : 외부파일을 불러와 내용을 연결하는 기능을 제공하는 태그
- href 속성 : HTML 문서에 연결할 외부파일의 URL 주소를 속성값으로 설정
- type 속성 : HTML 문서에 연결할 외부파일의 파일형태(MineType)를 속성값으로 설정
- rel 속성 : 파일 연결 관계를 속성값으로 설정
3. body 태그 (블럭 레벨 태그)
1. hn 태그
- hn 태그 : 태그내용을 문단의 제목으로 출력하기 위한 태그
- n : 1 ~ 6의 제목 크기
- align 속성 : 태그내용을 정렬하기 위한 속성 (left, right, center, justify)
- title 속성 : 태그의 툴팁 기능을 이용하여 설명문을 제공하는 속성
2. hr 태그
- hr 태그 : 수평선을 출력하기 위한 태그
- width 속성 : 태그의 폭을 변경하기 위한 속성
3. p 태그
- p 태그 : 태그내용을 문단으로 출력하기 위한 태그
- 태그내용이 박스모델의 폭을 벗어날 경우 자동으로 줄바꿈 처리
- HTML 문서에서 엔터로 줄바꿈 처리 불가능하며 다수의 공백을 하나의 공백으로 취급
4. br 태그
- br 태그 : 줄바꿈 처리하기 위한 태그
5. div 태그
- div 태그 : 범위를 설정하기 위한 태그
6. li 태그
- li 태그 : 목록을 출력하기 위한 태그
- ol 또는 ul 태그의 하위태그로 사용
- ul 태그 : 목록에 불릿(기호)을 제공하여 출력하기 위한 태그
- ol 태그 : 목록에 순값을 제공하여 출력하기 위한 태그
7. dl 태그
- dl 태그 : 정의목록(Definition List)을 출력하기 위한 태그
- dt 또는 dd 태그를 하위태그로 사용
- dt 태그 : 정의 용어(Definition Term)를 출력하기 위한 태그
- dd 태그 : 정의 설명(Definition Description)을 출력하기 위한 태그
8. table 태그
- table 태그 : 표(Table)를 출력하기 위한 태그
- border 속성 : 0 (외곽선 미출력) or 1 (외곽선 출력)을 속성값으로 설정
- summary 속성 : 표에 대한 설명을 속성값으로 설정
- rowspan 속성 : 병합할 행의 개수를 속성값으로 설정
- 상위태그에 적용된 디자인 속성을 하위태그로 상속되어 적용
- 모든 tr 태그의 셀의 개수는 같도록 설정하는 것을 권장
- tr 태그를 하위태그로 사용
- tr 태그 : 행(Row)를 출력하기 위한 태그
=> th 또는 td 태그를 하위태그로 사용
=> th or td 태그 : 열(Column)을 출력하기 위한 태그
9. audio 태그
- audio 태그 : 소리파일을 제공받아 재생하는 태그
- autoplay 속성 : 자동재생 기능을 제공하는 속성
=> 속성값 생략 가능 - controls 속성 : 재생 관련 제어판을 제공하는 속성
- loop 속성 : 반복재생 관련 기능을 제공하는 속성
- preload 속성 : none, metadatam auto 중 하나를 속성값으로 설정
10. video 태그
- video 태그 : 동영상 파일을 제공받아 재생하는 태그
- 동영상 파일 : mp4, ogg, vebm 파일 등
11. form 태그
- form 태그 : 웹프로그램을 요청하여 사용자로부터 입력값을 전달하는 태그
- 하위태그로 반드시 사용자로부터 값을 입력받기 위한 입력태그와 제출 이벤트(Submit Event)를 발생하는 태그를 작성
- Submit Event (제출 이벤트) : form 태그를 사용하여 웹프로그램을 요청하기 위한 이벤트
=> 제출 이벤트가 발생되면 form 태그가 동작되어 브라우저의 주소창이 action 속성값으로 설정된 URL 주소로 변경되어 웹프로그램을 요청하며 입력태그에 입력된 값을 전달하여 실행 결과를 제공받아 출력 - action 속성 : form 태그를 사용하여 요청할 웹프로그램의 URL 주소를 속성값으로 설정
- method 속성 : 웹프로그램을 요청하는 요청방식(GET, POST)을 속성값으로 설정
- GET 방식 : 사용자 입력값을 URL 주소의 질의문자열(QueryString)으로 전달
- POST 방식 : 사용자 입력값을 리퀘스트 메시지의 몸체부에 저장하여 전달
12. fieldset 태그
- fieldset 태그 : 입력태그의 영역을 구분하기 위한 태그
- 하위태그 : legend, input, textarea, select 등
- legend 태그 : 입력태그의 영역에 대한 제목을 제공하기 위한 태그
4. body 태그 (인라인 레벨 태그)
1. span 태그
- span 태그 : 범위를 설정하기 위한 태그
2. img 태그
- img 태그 : 이미지 파일을 제공받아 출력하기 위한 태그
- 웹에서 사용하는 이미지 파일 : GIF 파일, PNG 파일, JPEG 파일 등
- alt 속성 : 출력 이미지에 대한 설명을 속성값으로 설정
- src 속성 : 이미지 파일의 경로(URL 주소)를 속성값으로 설정
- 이미지의 폭을 변경하면 높이는 자동 변경
3. a 태그
- a 태그 : 클릭 이벤트로 다른 웹문서를 요청하기 위한 태그
- 하이퍼링크 기능을 제공하는 태그
- href 속성 : 클릭 이벤트가 발생될 경우 요청한 웹문서의URL 주소를 속성값으로 설정
=> 태그내용을 클릭한 경우 클라이언트 브라우저의 주소청의 URL 주소가 href 속성값으로 변경되고 URL 주소의 웹문서의 결과를 응답받아 출력 - 질의문자열 (QueryString) : 요청 URL 주소 뒤에 ? 기호를 붙이고 [이름 = 값 & 이름 = 값 &...] 형식으로 요청 웹프로그램에게 값 전달 가능
- target 속성 : _self (현재 브라우저), _blank (새로운 브라우저), _top (최상위 브라우저)ㅡ _parent (부모 브라우저), _child (자식 브라우저), 내부 브라우저 (iframe 태그의 name 속성값)
- anchor : a 태그의 href 속성값으로 URL 주소 뒤에 #기호를 사용하여 태그 식별자를 설정하면 해당 식별자의 태그로 출력위치를 이동
4. map 태그
- map 태그 : 하나의 이미지에서 영역을 구분해 하이퍼링크 기능을 제공하기 위한 태그
- area 태그가 반드시 있어야 함
- area 태그 : 이미지에서 영역을 구분하기 위한 태그
- shape 속성 : 영역을 구분하기 위한 도형을 속성값으로 설정
=> rect, circle, poly 등 - coords 속성 : 영역을 구분하기 위한 도형의 좌표값을 속성값으로 설정
- usemap 속성 : map 태그의 이름을 속성값으로 설정
5. iframe 태그
- iframe 태그 : 브라우저에 내장 부라우저를 생성하여 다른 웹문서를 출력하기 위한 기능을 제공하기 위한 태그
- src 속성 : 내장 브라우저로 요청할 웹문서
6. button 태그
- button 태그 : 버튼을 출력하는 태그
- type 속성 : button, submit, reset 중 하나를 속성값으로 설정
=> type 속성값을 submit으로 설정한 경우 버튼을 클릭하면 제출 이벤트 발생
7. input 태그
-
input 태그 : 사용자로부터 값을 입력받기 위한 태그
-
type 속성 : 값을 입력받기 위한 형태를 속성값으로 설정
=> hidden : 입력태그를 숨겨 사용자로부터 값을 입력받지 않고 요청 웹프로그램에게 필요한 값 전달
=> text : 문자값을 입력받아 전달
=> password : 문자값을 입력받아 전달 (입력값이 특정문자로 변환되어 표시)
=> radio 속성 : name 속성값이 같은 입력태그 중 하나를 선택하여 전달
=> checkbox : name 속성값이 같은 입력태그 중 한개 이상을 선택하여 전달
=> file : 파일을 입력받아 전달
=> email : 이메일을 입력받아 전달
=> number : 숫자 형식의 문자값을 입력받아 전달 (증가 또는 감소 버튼 제공, max/min으로 최대/최소값 설정 가능)
=> tel : 전화번호를 입력받아 전달
=> url : URL 형식의 문자값을 입력받아 전달
=> search : 검색 관련 문자값을 입력받아 전달 (스마트기기의 자동 완성 기능)
=> color : 색을 선택하여 색상값을 입력받아 전달
=> range : 등급을 선택하여 등급값 전달 (max/min 속성으로 등급의 범위 설정)
=> date : 날짜 형식의 문자값을 입력받아 전달 (날짜를 선택할 수 있는 박스모델 제공)
=> time : 시간 형식의 문자값을 입력받아 전달 (시간을 선택할 수 있는 박스모델 제공)
=> datetime-local : 날짜와 시간 형식의 문자값을 입력받아 전달 (날짜와 시간을 선택할 수 있는 박스모델 제공)
=> submit : 태그를 클릭한 경우 제출 이벤트 발생
=> reset : 태그를 클릭한 경우 초기화 -
name 속성 : 태그의 이름을 속성값으로 설정
-
value 속성 : 입력태그의 초기값을 속성값으로 설정
-
size 속성 : 입력태그의 크기를 속성값으로 설정
-
maxlength 속성 : 최대 입력 가능한 문자의 개수를 속성값으로 설정
-
autofocus 속성 : 입력태그에 입력초점(Focus)을 제공하는 속성
-
required 속성 : 필수입력값을 설정하기 위한 속성 (입력값이 없는 경우 form 태그 미동작)
-
placeholder 속성 : 입력태그의 입력값에 대한 설명을 속성값으로 설정 (입력값이 입력되면 설명문 자동 소멸)
-
readonly 속성 : 입력태그를 읽기 전용으로 사용하기 위한 속성
-
disabled 속성 : 입력태그를 비활성화 처리하기 위한 속성
-
checked 속성 : 우선 선택을 제공하기 위한 속성
-
min 속성 : 입력 가능한 최소값을 속성값으로 설정
-
max 속성 : 입력 가능한 최대값을 속성값으로 설정
8. label 태그
- label 태그 : 입력태그에 입력초점(Focus)을 제공하기 위한 태그
- label 태그를 사용하지 않은 경우 입력태그를 직접 클릭해야만 입력초점 제공
- for 속성 : 태그를 구분하는 식별자를 속성값 설정
=> label 태그를 클릭한 경우 속성값으로 설정된 태그에 입력초점 제공
9. textarea 태그
- textarea 태그 : 다수행의 문자값을 입력받기 위한 태그
- row 속성 : 입력태그의 행의 개수(높이)를 속성값으로 설정
- cols 속성 : 입력태그의 열의 개수(폭)를 속성값으로 설정
- 태그내용이 textarea 태그의 초기값으로 설정
10. select 태그
- select 태그 : 목록에서 값을 선태하여 입력받기 위한 태그
- 하위 태그 : option, optgroup
- 기본적으로 하나의 값만 선택하여 전달되지만 select 태그 속성에 의해 다중값 선택 가능
- option 태그 : 선택 가능한 아이템을 제공하여 값을 전달하는 태그
=> selected 속성 : 우선 선택 기능을 제공하는 속성 - optgroup 태그 : option 태그로 표현된 아이템을 하나의 그룹으로 표현하기 위한 태그
=> label 속성 : 그룹의 이름을 속성값으로 설정
