2025-03-07T20:29:01

2025-03-07 20:29:01 +09:00
parent 129046ec26
commit d481cb3b80
12 changed files with 1701 additions and 163 deletions
--- a/doc/html5/51_HTML
+++ b/doc/html5/51_HTML
@@ -0,0 +1,219 @@
+# HTML
+
+## 기본 구조
+
+| **태그** | **설명** |
+|----|----|
+| `html` | HTML 문서의 루트 요소로, 모든 콘텐츠를 감싸는 최상위 태그입니다. 다른 모든 요소는 이 요소의 자손이어야 합니다. |
+| `head` | 문서의 메타데이터(문서 정보)와 외부 리소스(스타일시트, 스크립트 등)를 포함합니다. |
+| `body` | 사용자에게 표시되는 실제 콘텐츠(텍스트, 이미지, 링크 등)를 포함합니다. 문서에는 이러한 요소가 하나만 있을 수 있습니다. |
+
+## 메타 데이터
+
+| **태그** | **설명** |
+|----|----|
+| `title` | 브라우저 탭에 표시될 문서의 제목을 정의합니다. 텍스트만 포함합니다. 요소 내의 태그는 무시됩니다. |
+| `meta` | 문서의 메타데이터(문자 인코딩, 설명, 뷰포트 등)를 제공합니다. |
+| `link` | 외부 리소스(예: CSS 파일, 파비콘 등)를 문서에 연결합니다. |
+| `style` | 문서 내에 CSS 스타일을 직접 정의합니다. |
+| `base` | 문서 내 모든 상대 URL의 기준 경로를 지정합니다. 문서에는 이러한 요소가 하나만 있을 수 있습니다. |
+
+## 섹션
+
+| **태그** | **설명** |
+|---|----|
+| `h1`~`h6` | 제목을 정의하며, `h1`이 가장 중요하고 `h6`가 덜 중요합니다. |
+| `header` | 문서나 섹션의 헤더(제목, 로고, 검색 폼, 작성자 이름, 내비게이션 등)를 정의합니다. |
+| `footer` | 가장 가까운 섹션 콘텐츠나 섹션의 푸터(하단 정보, 저작권 등)를 정의합니다. |
+| `main` | 문서 `<body>`의 주요 콘텐츠를 나타냅니다. 한 문서에 하나만 사용됩니다. |
+| `article` | 독립적인 콘텐츠(블로그 포스트, 뉴스 기사 등)를 정의합니다. |
+| `nav` | 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 내비게이션 링크(메뉴, 목차, 색인 등)를 포함하는 섹션을 정의합니다. |
+| `aside` | 주요 콘텐츠와 간접적으로 관련된 부수적인 콘텐츠(사이드바 등)를 나타냅니다. |
+| `address` | 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보(예: 이메일, 전화번호, 주소)를 나타냅니다. |
+| `section` | 문서 내 주제별 섹션(장 또는 구획)을 정의합니다. HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. |
+
+
+## 텍스트
+| **태그** | **설명** |
+|---|----|
+| `p` | 단락(paragraph)을 정의합니다. 일반 텍스트 콘텐츠에 사용됩니다. |
+| `pre` | 미리 서식을 지정한(preformatted) 텍스트를 정의하며, 텍스트는 보통 고정폭 글꼴을 사용해 렌더링하고, 공백과 줄 바꿈을 유지합니다. |
+| `div` | 콘텐츠를 묶는 블록 단위 컨테이너로, 스타일링이나 레이아웃에 사용됩니다. CSS를 사용하여 어떤 식으로든 스타일을 지정할 때까지 콘텐츠나 레이아웃에 영향을 미치지 않습니다. |
+| `blockquote` | 인용문을 나타내며, 다른 출처에서 가져온 긴 텍스트를 표시합니다. 인용문의 출처 URL은 cite 속성으로, 출처 텍스트는 `<cite>` 요소로 제공할 수 있습니다. |
+| `hr` | 수평선(horizontal rule)을 삽입하여, 이야기 장면 전환, 구획 내 주제 변경 등 주제나 섹션을 구분합니다. |
+| `figure` | 이미지, 다이어그램 등 독립적인 콘텐츠를 그룹화합니다. `<figcaption>` 요소를 사용해 설명을 붙일 수 있습니다. |
+| `figcaption` | `figure` 요소 내에서 캡션(설명 혹은 범례)을 제공합니다. |
+
+
+### 목록
+| **태그** | **설명** |
+|----|----|
+| `ul` | 순서 없는(unordered) 목록을 정의합니다. (기본적으로 글머리 기호 사용) |
+| `ol` | 순서 있는(ordered) 목록을 정의합니다. (기본적으로 숫자 사용) |
+| `menu` | 명령 메뉴나 콘텍스트 메뉴를 정의합니다. |
+| `li` | 목록 항목(list item)을 정의합니다. (`ul`, `ol`, `menu`의 하위 요소) |
+| `dl` | 정의 목록(description list)을 정의합니다. `<dl>`은 `<dt>`로 표기한 용어와 `<dd>` 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용합니다. |
+| `dt` | 정의 목록에서 용어(term)를 정의합니다. `<dl>` 요소 안에 위치해야 합니다. 보통 `<dd>` 요소가 뒤따르지만, 여러 개의 `<dt>` 요소를 연속해 배치하면 바로 다음 `<dd>` 요소로 한꺼번에 서술할 수 있습니다. |
+| `dd` | 정의 목록에서 설명(description)을 정의합니다. `<dl>` 요소 안에 위치해야 합니다. `<dl>`에서 `<dt>`에 대한 설명, 정의 또는 값을 제공합니다. |
+
+
+## 인라인 텍스트
+| **태그** | **설명** |
+|----|----|
+| `span` | 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 특정 텍스트를 묶어 스타일링이나 스크립팅을 적용할 때 사용합니다. 적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 합니다. |
+| `a` | 하이퍼링크를 생성합니다. `href` 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다. `<a>` 안의 콘텐츠는 링크 목적지의 설명을 나타내야 합니다. |
+| `abbr` | 약어(abbreviation)를 정의합니다. 선택 속성인 `title`을 사용하면 준말의 전체 뜻이나 설명을 제공할 수 있습니다. `title` 속성은 전체 설명만을 가져야 하며 다른건 포함할 수 없습니다. |
+| `cite` | 인용된 출처(책, 영화 제목 등)를 나타냅니다. 제목을 반드시 포함해야 합니다. |
+| `code` | 컴퓨터 코드 조각을 표시합니다. 기본 스타일은 사용자 에이전트의 고정폭 글씨체입니다. |
+| `kbd` | 키보드 입력을 나타냅니다. 사용자 에이전트의 고정폭 글꼴로 표시하지만, HTML 표준은 그런 점을 강제하지 않습니다. |
+| `samp` | 프로그램 출력 샘플(혹은 인용문)을 표시합니다. 보통 브라우저의 기본 고정폭 글씨체를 사용해 렌더링합니다. |
+| `var` | 변수(프로그래밍 또는 수학)를 나타냅니다. 보통 현재 글씨체의 기울임꼴로 표시하지만, 브라우저마다 다를 수 있습니다. |
+| `q` | 짧은 인용문을 나타냅니다. 대부분의 브라우저에서는 앞과 뒤에 따옴표를 붙여 표현합니다. 긴 인용문은 `<blockquote>` 요소를 사용하세요. |
+| `small` | 부수적인 텍스트(작은 글씨, 저작권 등)를 표시합니다. |
+| `dfn` | 현재 맥락이나 문장에서 정의하고 있는 용어를 나타냅니다. `<dfn>`에서 가장 가까운 `<p>`, `<dt>`/`<dd>` 쌍, `<section>` 조상 요소를 용어 정의로 간주합니다. |
+| `em` | 강조된 텍스트를 표시합니다. `<em>` 요소를 중첩하면 더 큰 강세를 뜻하게 됩니다. (기본적으로 기울임꼴) |
+| `i` | 텍스트에서 어떤 이유로 주위와 구분해야 하는 부분을 나타냅니다. 기울임꼴 텍스트를 표시합니다. 기술 용어, 외국어 구절, 등장인물의 생각 등을 예시로 들 수 있습니다. (시맨틱 의미 없음, 스타일용) |
+| `mark` | 하이라이트된 텍스트를 표시합니다. (HTML5에서 추가) |
+| `strong` | 강한 중요성을 가진 텍스트를 표시합니다. (기본적으로 굵게) |
+| `b` | 독자의 주의를 요소의 콘텐츠로 끌기 위한 용도로 사용합니다. 굵은 텍스트를 표시합니다. (시맨틱 의미 없음, 스타일용) |
+| `s` | 글자에 취소선, 즉 글자를 가로지르는 선을 그립니다. 더 이상 정확하지 않거나 삭제된 텍스트를 표시합니다. 상황에 따라 `<del>`과 `<ins>` 요소를 대신 사용하세요. |
+| `u` | 글자로 표현하지 않는 주석을 가진 것으로 렌더링 해야 하는 텍스트를 나타냅니다. 밑줄이 그어진 텍스트를 표시합니다. (시맨틱 의미 없음, 스타일용) |
+| `sub` | 아래첨자(subscript)를 표시합니다. |
+| `sup` | 위첨자(superscript)를 표시합니다. |
+| `data` | 기계가 읽을 수 있는 데이터를 텍스트와 연결합니다. 콘텐츠가 시간 혹은 날짜 관련 정보라면 대신 `<time>` 요소를 사용하세요. (HTML5에서 추가) |
+| `time` | 시간, 날짜를 나타내며 기계가 읽을 수 있는 형식을 제공합니다. `datetime` 특성의 값을 지정해 보다 적절한 검색 결과나, 알림 같은 특정 기능을 구현할 때 사용할 수 있습니다. (HTML5에서 추가) |
+| `br` | 줄 바꿈(line break)을 삽입합니다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용합니다. |
+| `wbr` | 단어 내에서 줄 바꿈이 가능한 위치를 제안합니다. 현재 요소의 줄 바꿈 규칙을 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타냅니다.(HTML5에서 추가) |
+
+### 수정사항
+
+| **태그** | **설명** |
+|----|----|
+| `del` | 삭제된 텍스트를 나타냅니다. 문서나 소스 코드의 변경점 추적 등에 사용할 수 있습니다. (기본적으로 취소선 표시) |
+| `ins` | 삽입된 텍스트를 나타냅니다. (기본적으로 밑줄 표시) |
+
+### 텍스트 방향
+| **태그** | **설명** |
+|----|----|
+| `bdi` | 텍스트의 방향성을 주변 텍스트와 독립적으로 설정합니다. (Bi-Directional Isolation) 웹 사이트가 일부 텍스트를 동적으로 삽입하고 삽입되는 텍스트의 방향성을 모를 때 특히 유용합니다. |
+| `bdo` | 텍스트의 방향을 강제로 지정합니다. (Bi-Directional Override) |
+
+### 루비
+| **태그** | **설명** |
+|----|----|
+| `ruby` | 루비 주석을 나타냅니다. 동아시아 언어에서 발음이나 주석(루비)을 표시합니다. |
+| `rp` | 루비 주석을 지원하지 않는 브라우저에서 대체 텍스트(괄호 등)를 제공합니다. |
+| `rt` | 루비 주석의 텍스트(발음, 뜻 등)를 정의합니다. |
+
+
+## 표
+
+| **태그** | **설명** |
+|----|----|
+| `table` | 표 전체를 정의합니다. |
+| `tbody` | 여러 행(`<tr>`)을 묶어서 표의 본문(body) 데이터를 그룹화합니다. |
+| `thead` | 표의 머리글(header) 부분을 그룹화합니다. |
+| `tfoot` | 표의 바닥글(footer) 부분을 그룹화합니다. |
+| `caption` | 표의 제목이나 설명을 제공합니다. |
+| `th` | 표의 머리글 셀(header cell)을 정의합니다. 이 그룹의 정확한 특성은 `scope` 및 `headers` 속성으로 정의됩니다. (기본적으로 굵고 중앙 정렬) |
+| `td` | 표의 데이터 셀(data cell)을 정의합니다. |
+| `tr` | 표의 행(row)을 정의합니다. 그런 다음 `<td>` 및 `<th>` 요소를 혼합하여 행의 셀을 설정할 수 있습니다. |
+| `col` | 표의 열을 나타내며, 열에 속하는 칸에 공통된 의미를 부여할 때 사용합니다. 표의 열(column)에 스타일을 적용하기 위해 사용됩니다. `<colgroup>` 안에서 찾을 수 있습니다. |
+| `colgroup` | 표의 열 그룹을 정의하고 스타일을 적용합니다. |
+
+
+## 이미지 / 멀티미디어
+
+| **태그** | **설명** |
+|----|----|
+| `img` | 이미지를 삽입합니다. |
+| `map` | `<area>` 요소와 함께 이미지 맵을 정의하며, 클릭 가능한 영역을 지정합니다. |
+| `area` | 이미지 맵 내의 특정 클릭 가능한 영역을 정의합니다. `<map>` 요소 안에서만 사용할 수 있습니다. |
+| `picture` | 반응형 이미지(화면 크기나 해상도에 따라 다른 이미지 제공)를 정의합니다. 0개 이상의 `<source>` 요소와 하나의 `<img>` 요소를 포함하여 다양한 디스플레이/장치 시나리오에 대한 이미지의 대체 버전을 제공합니다. |
+| `source` | `picture`, `audio`, `video`에 사용할 미디어 리소스를 지정합니다. 일반적으로 이미지 파일 형식과 미디어 파일 형식에 대한 서로 다른 지원을 제공하는 광범위한 브라우저와의 호환성을 제공하기 위해 여러 파일 형식으로 동일한 미디어 콘텐츠를 제공하는 데 사용됩니다. |
+| `audio` | 오디오 콘텐츠(음악, 음성 등)를 삽입합니다. src 특성 또는 `<source>` 요소를 사용해 한 개 이상의 오디오 소스를 지정할 수 있으며, 다수를 지정한 경우 가장 적절한 소스를 브라우저가 고릅니다. (HTML5에서 추가) |
+| `video` | 비디오 콘텐츠(영상)를 삽입합니다. (HTML5에서 추가) |
+| `track` | `<audio>`, `<video>`의 자식으로서, 자막 등 시간별 텍스트 트랙(시간 기반 데이터)를 지정할 때 사용합니다. 트랙은 WebVTT(.vtt) 또는 Timed Text Markup Language(TTML)형식을 사용해야 합니다. (HTML5에서 추가) |
+
+
+## 컨텐츠 삽입
+| **태그** | **설명** |
+|----|----|
+| `embed` | 외부 콘텐츠(플러그인, 미디어 등)를 삽입합니다. |
+| `iframe` | 다른 HTML 문서를 현재 문서 내에 삽입합니다. |
+| `object` | 외부 리소스(이미지, PDF, 플래시 등)를 삽입합니다. |
+| `portal` | 다른 HTML 페이지로의 원활한 전환을 제공합니다. (실험적, 제한적 지원) |
+| `canvas` | JavaScript를 사용해 동적으로 그래픽을 그립니다. |
+| `svg` | 벡터 그래픽(Scalable Vector Graphics)을 정의합니다. |
+| `math` | 수학 공식을 표현합니다. (MathML 사용) |
+
+
+## 양식
+
+| **태그** | **설명** |
+|-----|----|
+| `button` | 클릭 가능한 버튼을 정의합니다. |
+| `datalist` | `input`에 대한 자동완성 옵션 목록을 제공합니다. 다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 `<option>` 요소 여럿을 담습니다. |
+| `fieldset` | 폼 내 관련 여러 컨트롤과 레이블들을 그룹화합니다. |
+| `form` | 사용자 입력을 수집하는 폼을 정의합니다. 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다. |
+| `input` | 다양한 유형의 사용자 입력을 받습니다. |
+| `label` | 입력 요소에 대한 설명(레이블)을 제공합니다. |
+| `legend` | `fieldset`의 제목을 정의합니다. |
+| `meter` | 특정 범위 내의 값을 시각적으로 표시합니다. (예: 게이지) |
+| `optgroup` | `select` 내에서 옵션을 그룹화합니다. |
+| `option` | `select`, `optgroup` 또는 `datalist` 내의 개별 선택 항목을 정의합니다. |
+| `output` | 계산 결과나 사용자 행동의 출력 값을 표시합니다. |
+| `progress` | 작업 진행 상황을 시각적으로 표시합니다. |
+| `select` | 드롭다운 목록을 생성합니다. |
+| `textarea` | 여러 줄의 텍스트 입력을 받습니다. |
+
+## 대화형 요소
+
+| **태그** | **설명** |
+|----|----|
+| `details` | "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다. 요약이나 레이블은 `<summary>` 요소를 통해 제공할 수 있습니다. |
+| `summary` | `details` 요소의 요약 또는 제목을 제공합니다. `<summary>` 요소를 클릭하면 부모 `<details>` 요소의 상태가 열리거나 닫힌다. |
+| `dialog` | 대화 상자(모달 또는 팝업)를 정의합니다. |
+
+## 스크립트
+| **태그** | **설명** |
+|----|----|
+| `script` | JavaScript 등의 스크립트를 삽입하거나 연결합니다. |
+| `noscript` | 스크립트가 비활성화된 경우 표시할 대체 콘텐츠를 정의합니다. |
+
+## 웹 컴포넌트
+| **태그** | **설명** |
+|----|----|
+| `slot` | 웹 컴포넌트에서 사용자 정의 콘텐츠를 삽입할 위치를 지정합니다. |
+| `template` | 페이지 로드 시 렌더링되지 않는 HTML 콘텐츠를 저장하고 재사용합니다. |
+
+## 폐기됐거나 사용하지 않는 요소들
+다음은 HTML 태그 중 더 이상 사용이 권장되지 않는(deprecated) 요소들입니다. 이러한 요소들은 HTML5에서 대부분 제거되었거나 더 나은 대체 요소 및 CSS로 대체되었기 때문에 현재 웹 개발에서 사용하지 않는 것이 좋습니다.
+
+| **태그 이름** | **설명** | **대체 방법** |
+|---|-----|-----|
+| `acronym` | 약어를 정의하는 데 사용되었음. | `<abbr>` 태그 사용 |
+| `applet` | Java 애플릿을 삽입하는 데 사용되었음. | `<object>` 태그 또는 현대적인 JS 사용 |
+| `bgsound` | 배경 음악을 삽입하는 데 사용되었음(IE 전용). | `<audio>` 태그 또는 CSS/JS 사용 |
+| `big` | 텍스트를 더 크게 표시하는 데 사용되었음. | CSS `font-size` 속성 사용 |
+| `center` | 콘텐츠를 중앙 정렬하는 데 사용되었음. | CSS `text-align: center` 또는 Flexbox 사용 |
+| `content` | `<shadow>`와 함께 사용되던 태그로, Shadow DOM 콘텐츠 정의에 사용됨. | Shadow DOM API 사용 |
+| `dir` | 디렉토리 목록을 표시하는 데 사용되었음. | `<ul>` 태그 사용 |
+| `font` | 텍스트의 글꼴, 크기, 색상을 지정하는 데 사용되었음. | CSS `font` 속성 사용 |
+| `frame` | 프레임셋 내 개별 프레임을 정의하는 데 사용되었음. | `<iframe>` 또는 현대적인 레이아웃 사용 |
+| `frameset` | 여러 프레임을 포함하는 창을 정의하는 데 사용되었음. | `<iframe>` 또는 CSS/JS 기반 레이아웃 |
+| `image` | 이미지 삽입에 사용되었으나, 잘못된 이름의 태그였음. | `<img>` 태그 사용 |
+| `marquee` | 텍스트나 이미지를 스크롤하거나 움직이게 하는 데 사용되었음. | CSS 애니메이션 또는 JS 사용 |
+| `menuitem` | 컨텍스트 메뉴 항목을 정의하는 데 사용되었음(실험적 기능). | `<menu>` 또는 커스텀 JS 사용 |
+| `nobr` | 텍스트가 줄 바꿈되지 않도록 강제하는 데 사용되었음. | CSS `white-space: nowrap` 사용 |
+| `noembed` | `<embed>`를 지원하지 않는 브라우저용 대체 콘텐츠를 제공하는 데 사용됨. | `<object>` 태그 사용 |
+| `noframes` | 프레임을 지원하지 않는 브라우저용 대체 콘텐츠를 제공하는 데 사용됨. | 프레임 대신 현대적인 레이아웃 사용 |
+| `param` | `<object>` 또는 `<applet>`에 매개변수를 전달하는 데 사용되었음. | `<object>` 내 속성 사용 |
+| `plaintext` | 모든 후속 텍스트를 그대로 표시하도록 강제하는 데 사용되었음. | `<pre>` 태그 사용 |
+| `rb` | 루비 주석에서 기본 텍스트를 정의하는 데 사용되었음(한중일 텍스트용). | `<ruby>`와 함께 대체 구조 사용 |
+| `rtc` | 루비 주석에서 추가 주석을 정의하는 데 사용되었음. | `<ruby>`와 함께 대체 구조 사용 |
+| `shadow` | Shadow DOM의 콘텐츠 삽입 지점을 정의하는 데 사용되었음. | Shadow DOM API 사용 |
+| `spacer` | 공백을 삽입하는 데 사용되었음(Netscape 전용). | CSS `margin` 또는 `padding` 사용 |
+| `strike` | 텍스트에 취소선을 표시하는 데 사용되었음. | `<s>` 또는 `<del>` 태그 사용 |
+| `tt` | 텍스트를 고정폭(타이프라이터) 스타일로 표시하는 데 사용되었음. | CSS `font-family: monospace` 사용 |
+| `xmp` | HTML 태그를 이스케이프하지 않고 텍스트로 표시하는 데 사용되었음. | `<pre>` 또는 `<code>` 태그 사용 |