1. HTML 구성 요소
ㅇ 요소 (Element) : HTML 문서를 이루는, 모든 종류의 HTML 요소
- 사실상, HTML 문서의 모든 것으로써, 콘텐츠 및 기타 성분들을 담는 틀
. 제목(title),하이퍼링크(link),표(table),리스트(list),단락(p) 등
* 100개 이상의 요소가 있음 ☞ w3schools.com (HTML Element Reference)
ㅇ 속성 (Attribute) : 각 요소의 성격 표현
- 각 요소는 구체적인 표현 정보를 나타내는 1 이상의 속성을 갖음
. `속성이름(attribute) : 속성값(value)`을 한 쌍으로하여 지정
* 150개 이상의 속성이 있음 ☞ w3schools.com (HTML Attribute Reference)
ㅇ 태그 (Tag) : 각 요소의 식별자
- HTML 문서에서 HTML 요소의 의미를 확정하기위해 붙이는 식별자(태그 요소)
. 각 요소 마다 시작태그 및 종료태그로 그 범위를 확정시킴
. 일부 요소(img 요소,br 요소,hr 요소 등)들은 종료태그 없이도 사용 가능
. 속성은 시작태그에 만 사용
. 하나의 시작태그에 여러 속성 지정 가능하나, 그들 사이에는 공백으로 구분
2. HTML 구성 요소들의 종류/구분
ㅇ `HTML 기본 문서 구조`를 위한 요소들
- 기본 구조 정보 : html, head, body
. html 요소 : 문서 형태 선언
. head 요소 : 문서 정보들을 나타내는 곳
. body 요소 : 문서 본문을 나타냄
- 부가 정보 제공 : base, link, meta, noscript, script, style, title
. (head 요소 내 사용 가능 요소들)
.. meta 요소, title 요소, link 요소, base 요소, style 요소, script 요소 등
ㅇ 영역(섹션) 구획 요소들
- (웹페이지 논리 구획) : 웹페이지 전체 또는 일정 영역을 논리적인 구획으로 분할할 때 유용
. header, nav, section, article, aside, footer
- 영역(섹션) 구획 세부사항
. details (세부 설명)
. summary (요약)
. output (출력 결과)
ㅇ 컨텐츠 가독성 제고 (내용 묶기/구분) 요소들
- 제목,표제 (Heading) : h1 ~ h6 (6 단계 구분), hgroup
- 단락 (Paragraph) : p (유사한 주제를 갖는 문자열의 묶음)
- 줄바꿈 (Newline) : br
- 수평선(또는,주제 분리) : hr (horizontal rule)
- 인용문 : blockquote
- 공간 분할
. div 요소 (block 형식으로 공간 분할, 가장 일반적이고 가독성 있는 구조 제공)
. span 요소 (inline 형식으로 공간 분할)
- 띄어쓰기 인식 가능 : pre
. html 문서는 띄어쓰기(스페이스바,탭,엔터 등)를 무시하나,
. pre 요소는 이를 그대로 출력시킴
- 기타 : figure, figcaption
ㅇ 링크(앵커) 요소 : a 요소
ㅇ 목록 요소
- ol (ordered list), ul (unordered list), li (description list)
- dt (정의 목록), dd (정의 글자), dl (정의 설명)
ㅇ 테이블 요소 (table 요소)
- table, tbody, td, tfoot, th, thead, tr
- col (표 열), caption (표 제목), colgroup (표 열 그룹)
ㅇ 논리적 스타일 요소
- abbr (축약형 약어 표시)
- address (우편물 주소 표시)
- cite (인용 작품 제목)
- code (컴퓨터 코드)
- dfn (용어 정의)
- kbd (키보드 입력임을 표시)
- q (짧은 인용구 표시),
- samp (프로그램 샘플 코드)
- var (변수 표시)
- 강조 (중요 내용 표시) : em (EMphasis, 약한 강조), strong (강한 강조)
ㅇ 글자 스타일 요소 ☞ CSS 텍스트 참조
- b (강조)
- i (이탤릭체/기울어진 글자)
- s 또는 del (수평 취소선)
- small (작은 글자)
- sub (아래 첨자)
- sup (위첨자)
- u 또는 ins (밑줄)
ㅇ 멀티미디어 요소
- 플러그인 없이 웹브라우저가 직접/전용 지원
. 비디오 : video 요소
. 오디오 : audio 요소
- 한편, 기존 플래시 처럼 플러그인을 통해 랜더링시키는 마크업/태그 : embed, object
ㅇ 이미지 요소 : img 요소
ㅇ 폼 요소 (form 요소)
- fieldset, form, input, button, select, label,legend, textarea
- 폼 레이블 컨트롤 : label
- 폼 컨트롤 그룹핑 : fieldset (그룹핑 기능), legend (그룹핑에 대한 주석)
ㅇ 스크립트 요소 : script 요소
- 기본적으로 script 태그 내 내용을 자바스크립트 코드로 해석함
ㅇ 기타 요소들
- area
- bdi, bdo
- canvas, command
- datalist
- iframe
- keygen
- map, mark, menu, meter
- option
- param, progress
- rp, rt, ruby
- time, track
- wbr
3. [참고사항]
ㅇ 블록 요소(태그) 및 인라인 요소(태그) 구분
- 블록 요소 : p, h1~h6, div, ol, ul 등
- 인라인 요소 : a, span, img 등