elex/html-examples
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2025-03-07T20:29:01

Browse Source
This commit is contained in:
Elex
2025-03-07 20:29:01 +09:00
parent 129046ec26
commit d481cb3b80
12 changed files with 1701 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
doc/html5/51_HTML Elements.md Normal file
View File

@@ -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>` 태그 사용 |

62
doc/html5/52_기본 구조.md Normal file
View File

@@ -0,0 +1,62 @@
# 기본 구조
HTML 문서는 항상 `<html>` 안에 `<head>`와 `<body>`를 포함하는 계층 구조를 따릅니다.
## html
| **속성** | **설명** |
|---|----|
| `lang` | 문서의 기본 언어를 지정합니다. (예: `en`은 영어, `ko`는 한국어) |
| `dir` | 텍스트 방향을 지정합니다. (`ltr`: 왼쪽에서 오른쪽, `rtl`: 오른쪽에서 왼쪽) |
| `manifest` | 오프라인 웹 애플리케이션을 위한 캐시 매니페스트 파일의 URL을 지정합니다. (HTML5에서 사용, 현재는 비추천) |
```html
<html lang="ko">
<head>
<title>예시 페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 한국어로 작성된 HTML 문서입니다.</p>
</body>
</html>
```
- 설명: `lang="ko"` 속성을 사용하여 문서의 기본 언어를 한국어로 지정했습니다.
## head
```html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome</h1>
</body>
</html>
```
- 설명:
- `<meta charset="UTF-8">`: 문자 인코딩을 UTF-8로 설정.
- `<meta name="viewport">`: 모바일 디바이스에서 적절히 표시되도록 뷰포트 설정.
- `<link>`: 외부 CSS 파일 연결.
## body
| **속성** | **설명** |
|---|----|
| `onload` | 페이지 로드가 완료될 때 실행할 스크립트를 지정합니다. |
| `onunload` | 페이지가 닫힐 때 실행할 스크립트를 지정합니다. |
```html
<html lang="en">
<head>
<title>Body Example</title>
</head>
<body onload="alert('페이지가 로드되었습니다!')">
<h1>Hello, World!</h1>
<p>This is the content visible to users.</p>
</body>
</html>
```
- 설명: `onload` 속성을 사용하여 페이지 로드 시 경고창이 표시되도록 설정했습니다.

94
doc/html5/53_메타데이터.md Normal file
View File

@@ -0,0 +1,94 @@
# 메타데이터
이 태그들은 모두 `<head>` 안에 배치되며, 문서의 메타데이터나 리소스 연결을 담당합니다.
## title
`title` 태그는 일반적으로 속성을 사용하지 않으며, 단순히 텍스트 콘텐츠만 포함합니다.
```html
<head>
<title>My Awesome Website</title>
</head>
```
- 설명: 브라우저 탭에 "My Awesome Website"라는 제목이 표시됩니다.
## meta
| **속성** | **설명** |
|---|----|
| `charset` | 문서의 문자 인코딩을 지정합니다. (예: `UTF-8`) |
| `name` | 메타데이터의 이름을 정의합니다. (예: `description`, `keywords`) |
| `content` | `name` 또는 `http-equiv`에 대한 값을 지정합니다. |
| `http-equiv` | HTTP 헤더와 유사한 동작을 정의합니다. (예: `refresh`, `content-type`) |
> `meta`의 `viewport` 설정은 모바일 웹에서 필수적이며, `link`는 CSS와 파비콘 연결에 자주 사용됩니다.
```html
<head>
<meta charset="UTF-8">
<meta name="description" content="This is a sample website.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="5;url=https://example.com">
</head>
```
- 설명:
- `charset="UTF-8"`: 문자 인코딩을 UTF-8로 설정.
- `name="description"`: 검색 엔진에 표시될 문서 설명.
- `name="viewport"`: 모바일 친화적 뷰포트 설정.
- `http-equiv="refresh"`: 5초 후 다른 페이지로 리디렉션.
## link
| **속성** | **설명** |
|---|----|
| `rel` | 연결된 리소스와 문서의 관계를 지정합니다. (예: `stylesheet`, `icon`) |
| `href` | 연결할 리소스의 URL을 지정합니다. |
| `type` | 리소스의 MIME 타입을 지정합니다. (예: `text/css`) |
| `media` | 리소스가 적용될 미디어 유형을 지정합니다. (예: `screen`, `print`) |
```html
<head>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
```
- 설명:
- `rel="stylesheet"`: 외부 CSS 파일 연결.
- `rel="icon"`: 브라우저 탭에 표시될 파비콘 연결.
## style
| **속성** | **설명** |
|---|----|
| `type` | 스타일시트의 MIME 타입을 지정합니다. (기본값: `text/css`) |
| `media` | 스타일이 적용될 미디어 유형을 지정합니다. (예: `screen`, `all`) |
| `scoped` | 스타일을 특정 요소에만 적용하도록 제한합니다. (HTML5에서 실험적, 비추천) |
```html
<head>
<style type="text/css" media="screen">
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
</style>
</head>
```
- 설명: `<style>` 태그 내에 CSS를 직접 작성하여 페이지 스타일을 정의.
## base
| **속성** | **설명** |
|---|----|
| `href` | 모든 상대 URL의 기준이 되는 절대 URL을 지정합니다. |
| `target` | 링크의 기본 열기 방식을 지정합니다. (예: `_blank`, `_self`) |
`base`는 한 문서에 하나만 사용할 수 있으며, 모든 상대 URL에 영향을 미칩니다.
```html
<head>
<base href="https://example.com/resources/" target="_blank">
</head>
<body>
<a href="page1.html">Page 1</a>
<img src="image.jpg" alt="Sample Image">
</body>
```
- 설명:
- `href`: 모든 상대 URL의 기준 경로를 "https://example.com/resources/"로 설정.
- `target="_blank"`: 링크가 새 탭에서 열리도록 기본 설정.

100
doc/html5/54_섹션.md Normal file
View File

@@ -0,0 +1,100 @@
# 섹션
콘텐츠 섹션 요소를 사용하면 문서 콘텐츠를 논리적 조각으로 구성할 수 있습니다. 섹션 요소를 사용하여 머리글 및 바닥글 탐색, 콘텐츠 섹션을 식별하는 머리글 요소를 포함하여 페이지 콘텐츠에 대한 광범위한 개요를 만듭니다.
이 태그들은 HTML5에서 주로 사용되며, 시맨틱 마크업(semantic markup)을 통해 문서 구조를 명확히 정의하는 데 유용합니다.
> 대부분의 시맨틱 태그는 고유한 속성을 가지지 않고, 전역 속성(`id`, `class`, `style`, `lang` 등)을 주로 사용합니다.
이 태그들은 주로 구조적 의미를 제공하며, CSS로 스타일을, JavaScript로 동작을 추가하는 것이 일반적입니다. 시맨틱 태그는 스크린 리더와 검색 엔진이 문서 구조를 더 잘 이해하도록 돕습니다.
`article` 안에 `header`, `footer`, `section` 등을 중첩하여 사용할 수 있습니다.
## h1 ~ h6
```html
<h1>가장 중요한 제목</h1>
<h2>부제목</h2>
<h3>소제목</h3>
<h4>더 작은 제목</h4>
<h5>아주 작은 제목</h5>
<h6>가장 작은 제목</h6>
```
- 설명: 계층적 제목 구조를 보여줌.
## header
```html
<header>
<h1>My Website</h1>
<nav>
<a href="#home">Home</a> | <a href="#about">About</a>
</nav>
</header>
```
- 설명: 페이지 상단에 로고와 내비게이션 포함.
## footer
```html
<footer>
<p>&copy; 2025 My Website. All rights reserved.</p>
</footer>
```
- 설명: 페이지 하단에 저작권 정보 표시.
## main
```html
<main>
<h1>메인 콘텐츠</h1>
<p>이곳은 문서의 주요 내용을 담고 있습니다.</p>
</main>
```
- 설명: 문서의 핵심 콘텐츠를 정의.
## article
```html
<article>
<h2>최신 기술 트렌드</h2>
<p>AI와 머신러닝이 2025년을 지배할 것입니다.</p>
</article>
```
- 설명: 독립적인 블로그 포스트나 기사 콘텐츠 정의.
## nav
```html
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#services">서비스</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</nav>
```
- 설명: 내비게이션 메뉴를 구조화.
## aside
```html
<aside>
<h3>관련 링크</h3>
<ul>
<li><a href="#">AI 소개</a></li>
<li><a href="#">머신러닝 가이드</a></li>
</ul>
</aside>
```
- 설명: 주요 콘텐츠 옆에 표시될 사이드바 콘텐츠.
## address
```html
<address>
작성자: <a href="mailto:example@email.com">example@email.com</a><br>
주소: 서울특별시 강남구<br>
전화: 123-456-7890
</address>
```
- 설명: 연락처 정보를 구조화하여 표시.
## section
```html
<section>
<h2>제품 소개</h2>
<p>우리의 제품은 혁신적이고 사용자 친화적입니다.</p>
</section>
```
- 설명: 문서 내 특정 주제의 섹션 정의.

134
doc/html5/55_블록 텍스트.md Normal file
View File

@@ -0,0 +1,134 @@
# 블록 텍스트
## p
```html
<p>이것은 단락입니다. 여러 문장으로 구성된 텍스트를 나타냅니다.</p>
<p>두 번째 단락입니다.</p>
```
- 설명: 일반적인 텍스트 단락을 표시.
## pre
```html
<pre>
function hello() {
console.log("Hello, World!");
}
</pre>
```
- 설명: 코드처럼 공백과 줄 바꿈이 유지된 텍스트 표시.
## div
```html
<div class="container">
<h1>제목</h1>
<p>이 div는 콘텐츠를 묶는 역할을 합니다.</p>
</div>
```
- 설명: 스타일링이나 레이아웃을 위한 컨테이너로 사용.
## blockquote
| **속성** | **설명** |
|----|---|
| `cite` | 인용문의 출처 URL을 지정합니다. (브라우저에 직접 표시되지는 않음) |
```html
<blockquote cite="https://example.com/source">
<p>인생은 한 번뿐이다. 그러니 즐겨라!</p>
</blockquote>
```
- 설명: 다른 출처에서 가져온 인용문을 표시. `cite`로 출처 URL 지정.
## hr
> 과거 `align`, `size`, `width` 등이 있었으나 HTML5에서 비추천됨. CSS 사용 권장.
```html
<p>첫 번째 섹션의 내용입니다.</p>
<hr>
<p>두 번째 섹션의 내용입니다.</p>
```
- 설명: 섹션 간 구분을 위해 수평선 삽입.
## figure, figcaption
```html
<figure>
<img src="image.jpg" alt="풍경 사진">
<figcaption>산과 강이 어우러진 아름다운 풍경</figcaption>
</figure>
```
- 설명: 이미지와 그 캡션을 함께 그룹화하여 표시.
---
## ul
> 과거 `type` 속성(예: `disc`, `circle`)이 있었으나 HTML5에서 비추천. CSS 사용 권장.
> 목록의 모양(글머리 기호, 번호 스타일 등)은 CSS(`list-style-type`)로 조정하는 것이 현대적입니다.
```html
<ul>
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
</ul>
```
- 설명: 순서 없는 목록으로, 기본적으로 글머리 기호(•)로 표시.
## ol
| **속성** | **설명** |
|----|---|
| `start` | 목록의 시작 번호를 지정합니다. (예: `start="3"`) |
| `reversed`| 목록을 역순으로 표시합니다. (HTML5에서 추가, Boolean 속성) |
| `type` | 번호 스타일을 지정합니다. (예: `1`, `A`, `a`, `I`, `i`) |
```html
<ol start="2" type="A">
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li value="5">다섯 번째 항목</li>
</ol>
```
- 설명: 순서 있는 목록. `start="2"`로 2부터 시작, `type="A"`로 대문자 알파벳 사용, `value="5"`로 특정 항목 번호 지정.
## menu
| **속성** | **설명** |
|----|---|
| `type` | 메뉴 유형을 지정합니다. (예: `context`, `toolbar`, HTML5에서 실험적) |
```html
<menu type="context" id="popup">
<li>새로고침</li>
<li>복사</li>
<li>붙여넣기</li>
</menu>
```
- 설명: 컨텍스트 메뉴를 정의. (브라우저 지원 제한적, 실험적 기능)
> `menu`는 현재 브라우저 지원이 제한적이므로 실무에서 잘 사용되지 않습니다. 대신 `ul`이나 `nav`를 활용하세요.
## li
| **속성** | **설명** |
|----|---|
| `value` | `ol` 내에서 항목의 번호를 수동으로 지정합니다. (예: `value="5"`) |
```html
<ul>
<li class="fruit">포도</li>
<li class="fruit">수박</li>
</ul>
```
- 설명: `ul` 내부의 개별 항목을 정의하며, `class`로 스타일링 가능.
## dl, dt, dd
```html
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language의 약자로, 웹 페이지의 구조를 정의합니다.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets의 약자로, 웹 페이지의 스타일을 정의합니다.</dd>
</dl>
```
- 설명: 용어(`dt`)와 그 설명(`dd`)을 쌍으로 구성한 정의 목록.

218
doc/html5/56_인라인 텍스트.md Normal file
View File

@@ -0,0 +1,218 @@
# 인라인 텍스트
## span
```html
<p>이 문장에서 <span style="color: red;">빨간색</span> 부분이 강조됩니다.</p>
```
- 설명: 특정 텍스트에 스타일을 적용.
## a
| **속성** | **설명** |
|---|----|
| `href` | 링크 대상 URL을 지정합니다. |
| `target` | 링크 열기 위치를 지정합니다. (예: `_blank`, `_self`) |
| `rel` | 링크와의 관계를 지정합니다. (예: `nofollow`, `noopener`) |
```html
<a href="https://example.com" target="_blank" rel="noopener">여기를 클릭</a>
```
- 설명: 새 탭에서 링크 열기.
## abbr
| **속성** | **설명** |
|----|---|
| `title` | 약어의 전체 설명을 제공합니다. (마우스 오버 시 툴팁으로 표시) |
```html
<p><abbr title="HyperText Markup Language">HTML</abbr>은 웹의 기본 언어입니다.</p>
```
- 설명: 약어에 툴팁으로 전체 설명 제공.
## cite
```html
<p>이 문장은 <cite>위대한 개츠비</cite>에서 인용되었습니다.</p>
```
- 설명: 책 제목을 인용 출처로 표시.
## code
```html
<p>다음은 JavaScript 코드입니다: <code>console.log("Hello");</code></p>
```
- 설명: 코드 조각 표시.
## kbd
```html
<p>파일을 저장하려면 <kbd>Ctrl</kbd> + <kbd>S</kbd>를 누르세요.</p>
```
- 설명: 키보드 입력 표시.
## samp
```html
<p>프로그램 출력 예시: <samp>Hello, World!</samp></p>
```
- 설명: 샘플 출력 표시.
## var
```html
<p>수학 공식에서 <var>x</var>는 미지수를 나타냅니다.</p>
```
- 설명: 변수 표시.
## q
| **속성** | **설명** |
|----|---|
| `cite` | 인용문의 출처 URL을 지정합니다. (브라우저에 직접 표시되지는 않음) |
```html
<p>그는 <q cite="https://example.com">인생은 짧다</q>라고 말했다.</p>
```
- 설명: 짧은 인용문 표시.
## small
```html
<p>이것은 주요 내용입니다. <small>© 2025</small></p>
```
- 설명: 부수적인 작은 텍스트 표시.
## dfn
```html
<p><dfn>HTML</dfn>은 웹 페이지의 구조를 정의하는 언어입니다.</p>
```
- 설명: 정의되는 용어 표시.
## em
```html
<p>이 부분은 <em>정말 중요합니다</em>.</p>
```
- 설명: 강조된 텍스트 표시.
## i
```html
<p>이 단어는 <i>외국어</i>입니다.</p>
```
- 설명: 기울임꼴로 스타일링.
## mark
```html
<p>검색 결과에서 <mark>이 부분</mark>이 강조됩니다.</p>
```
- 설명: 하이라이트 표시.
## strong
```html
<p>이것은 <strong>매우 중요한</strong> 정보입니다.</p>
```
- 설명: 강한 중요성 표시.
## b
```html
<p>이 단어는 <b>굵게</b> 표시됩니다.</p>
```
- 설명: 굵은 텍스트로 스타일링.
## s
```html
<p>이 가격은 <s>1000원</s>에서 800원으로 변경되었습니다.</p>
```
- 설명: 취소선으로 표시.
## u
```html
<p>이 단어는 <u>밑줄</u>이 있습니다.</p>
```
- 설명: 밑줄로 스타일링.
## sub
```html
<p>물의 화학식은 H<sub>2</sub>O입니다.</p>
```
- 설명: 아래첨자 표시.
## sup
```html
<p>2의 제곱은 2<sup>2</sup>입니다.</p>
```
- 설명: 위첨자 표시.
## data
| **속성** | **설명** |
|---|----|
| `value` | 기계가 읽을 수 있는 데이터 값을 지정합니다. |
```html
<p>제품: <data value="12345">스마트폰</data></p>
```
- 설명: 기계가 읽을 수 있는 데이터 연결.
## time
| **속성** | **설명** |
|---|----|
| `datetime` | 기계가 읽을 수 있는 날짜/시간 형식을 지정합니다. (예: `2025-03-06`) |
```html
<p>다음 회의는 <time datetime="2025-03-06T10:00">3월 6일 오전 10시</time>에 있습니다.</p>
```
- 설명: 기계가 읽을 수 있는 시간 제공.
## br
```html
<p>첫 줄입니다.<br>두 번째 줄입니다.</p>
```
- 설명: 강제로 줄 바꿈 삽입.
## wbr
```html
<p>이것은긴단어입니다: supercalifragilisticexpialidocious<wbr>입니다.</p>
```
- 설명: 단어 내 줄 바꿈 가능 위치 제안.
---
## del
| **속성** | **설명** |
|---|----|
| `cite` | 삭제 이유를 설명하는 URL을 지정합니다. (브라우저에 직접 표시되지 않음) |
| `datetime` | 삭제가 이루어진 날짜와 시간을 지정합니다. (예: `2025-03-06T12:00:00Z`) |
```html
<p>이 가격은 <del datetime="2025-03-06T10:00:00Z">1000원</del>에서 변경되었습니다.</p>
```
- 설명: 삭제된 텍스트를 취소선으로 표시하며, 삭제 시점을 기록.
## ins
| **속성** | **설명** |
|---|----|
| `cite` | 삽입 이유를 설명하는 URL을 지정합니다. (브라우저에 직접 표시되지 않음) |
| `datetime` | 삽입이 이루어진 날짜와 시간을 지정합니다. (예: `2025-03-06T12:00:00Z`) |
```html
<p>새 가격은 <ins datetime="2025-03-06T10:00:00Z">800원</ins>입니다.</p>
```
- 설명: 삽입된 텍스트를 밑줄로 표시하며, 삽입 시점을 기록.
## bdi
```html
<p>사용자 이름: <bdi>محمد</bdi>, <bdi>John</bdi></p>
```
- 설명: 아랍어(오른쪽에서 왼쪽)와 영어(왼쪽에서 오른쪽)가 섞인 텍스트의 방향성을 독립적으로 유지.
## bdo
| **속성** | **설명** |
|---|----|
| `dir` | 텍스트 방향을 강제로 지정합니다. (`ltr`: 왼쪽에서 오른쪽, `rtl`: 오른쪽에서 왼쪽) |
```html
<p>이 텍스트는 <bdo dir="rtl">거꾸로</bdo> 표시됩니다.</p>
```
- 설명: 텍스트 방향을 강제로 오른쪽에서 왼쪽으로 설정.
## ruby, rp, rt
```html
<ruby>
漢<rp>(</rp><rt>kan</rt><rp>)</rp>
字<rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
```
- 설명: "漢字" (한자)에 발음 주석("kan", "ji")을 추가. `rp`는 루비 미지원 브라우저에서 괄호 표시.

170
doc/html5/57_표.md Normal file
View File

@@ -0,0 +1,170 @@
# 표
```html
<table>
<caption>주간 판매 보고서</caption>
<colgroup>
<col style="background-color: #f0f0f0;">
<col span="2">
</colgroup>
<thead>
<tr>
<th scope="col">제품</th>
<th scope="col">판매량</th>
<th scope="col">매출</th>
</tr>
</thead>
<tbody>
<tr>
<td>사과</td>
<td>50</td>
<td>50,000원</td>
</tr>
<tr>
<td>바나나</td>
<td colspan="2">품절</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>합계</td>
<td>50</td>
<td>50,000원</td>
</tr>
</tfoot>
</table>
```
- 설명: 모든 태그를 활용한 완전한 표 구조.
## table
```html
<table>
<tr>
<td>셀 1</td>
<td>셀 2</td>
</tr>
</table>
```
- 설명: 간단한 1행 2열 표 생성.
## tbody
```html
<table>
<tbody>
<tr>
<td>데이터 1</td>
<td>데이터 2</td>
</tr>
</tbody>
</table>
```
- 설명: 표의 본문 데이터를 그룹화.
## thead
```html
<table>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
</table>
```
- 설명: 표의 머리글 부분 정의.
## tfoot
```html
<table>
<tfoot>
<tr>
<td>합계</td>
<td>100</td>
</tr>
</tfoot>
</table>
```
- 설명: 표의 바닥글 부분 정의.
### caption
```html
<table>
<caption>학생 정보</caption>
<tr>
<td>홍길동</td>
<td>20</td>
</tr>
</table>
```
- 설명: 표에 제목 추가.
## th
| **속성** | **설명** |
|---|----|
| `colspan` | 셀이 차지할 열 수를 지정합니다. (예: `colspan="2"`) |
| `rowspan` | 셀이 차지할 행 수를 지정합니다. (예: `rowspan="2"`) |
| `scope` | 셀이 어떤 데이터와 관련 있는지 정의합니다. (예: `row`, `col`, `rowgroup`) |
```html
<table>
<tr>
<th scope="col">제품</th>
<th scope="col">가격</th>
</tr>
</table>
```
- 설명: 머리글 셀로 열 제목 정의.
## td
| **속성** | **설명** |
|---|----|
| `colspan` | 셀이 차지할 열 수를 지정합니다. (예: `colspan="2"`) |
| `rowspan` | 셀이 차지할 행 수를 지정합니다. (예: `rowspan="2"`) |
```html
<table>
<tr>
<td>사과</td>
<td>1000원</td>
</tr>
</table>
```
- 설명: 데이터 셀로 내용 입력.
## tr
```html
<table>
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>
```
- 설명: 표의 행을 정의.
## col
| **속성** | **설명** |
|---|----|
| `span` | 적용될 열 수를 지정합니다. (예: `span="2"`) |
## colgroup
| **속성** | **설명** |
|---|----|
| `span` | 적용될 열 수를 지정합니다. (예: `span="2"`) |
```html
<table>
<colgroup>
<col span="1" style="background-color: lightblue;">
<col span="1" style="background-color: lightgreen;">
</colgroup>
<tr>
<td>첫 번째 열</td>
<td>두 번째 열</td>
</tr>
</table>
```
- 설명: 열 그룹과 개별 열에 스타일 적용.

140
doc/html5/58_이미지, 멀티미디어.md Normal file
View File

@@ -0,0 +1,140 @@
# 이미지, 멀티미디어
```html
<table>
<tr>
<td>
<img src="image.jpg" alt="사진" usemap="#imagemap">
<map name="imagemap">
<area shape="rect" coords="0,0,50,50" href="https://example.com" alt="링크">
</map>
</td>
<td>
<video controls width="300">
<source src="video.mp4" type="video/mp4">
<track src="captions.vtt" kind="captions" srclang="en" label="English Captions" default>
</video>
</td>
<td>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
</table>
```
- 설명: 이미지(맵 포함), 비디오(자막 포함), 오디오를 표 안에 배치.
## img
| **속성** | **설명** |
|---|----|
| `src` | 이미지 파일의 URL을 지정합니다. |
| `alt` | 이미지가 표시되지 않을 때 대체 텍스트를 제공합니다. (접근성 필수) |
| `width` | 이미지의 너비를 픽셀 단위로 지정합니다. (CSS 권장) |
| `height` | 이미지의 높이를 픽셀 단위로 지정합니다. (CSS 권장) |
| `usemap` | 이미지 맵의 이름을 지정합니다. (예: `usemap="#mapname"`) |
```html
<img src="photo.jpg" alt="풍경 사진" width="300" height="200">
```
- 설명: 300x200 크기의 이미지를 삽입.
## map
| **속성** | **설명** |
|---|----|
| `name` | 이미지 맵의 고유 이름을 지정합니다. (`img`의 `usemap`과 연결) |
### area
| **속성** | **설명** |
|---|----|
| `shape` | 영역의 모양을 지정합니다. (예: `rect`, `circle`, `poly`) |
| `coords` | 영역의 좌표를 지정합니다. (모양에 따라 다름, 예: `x1,y1,x2,y2`) |
| `href` | 클릭 시 이동할 URL을 지정합니다. |
| `alt` | 대체 텍스트를 제공합니다. (`href`가 있을 경우 필수) |
| `target` | 링크 열기 위치를 지정합니다. (예: `_blank`, `_self`) |
```html
<img src="map.jpg" alt="지도" usemap="#mymap">
<map name="mymap">
<area shape="rect" coords="0,0,100,100" href="https://example.com" alt="지역 1" target="_blank">
<area shape="circle" coords="150,150,50" href="https://example2.com" alt="지역 2">
</map>
```
- 설명: 이미지 맵에서 사각형과 원형 영역을 정의하여 클릭 시 링크로 이동.
## picture
```html
<picture>
<source srcset="image-large.jpg" media="(min-width: 800px)">
<source srcset="image-small.jpg" media="(min-width: 400px)">
<img src="image-default.jpg" alt="기본 이미지">
</picture>
```
- 설명: 화면 크기에 따라 다른 이미지를 표시.
## source
| **속성** | **설명** |
|---|----|
| `src` | 미디어 파일의 URL을 지정합니다. (`audio`, `video`에서 사용 시) |
| `srcset` | 이미지 파일의 URL과 해상도를 지정합니다. (`picture`에서 사용 시) |
| `media` | 미디어가 적용될 조건을 지정합니다. (예: `(max-width: 600px)`) |
| `type` | 리소스의 MIME 타입을 지정합니다. (예: `image/webp`) |
## audio
| **속성** | **설명** |
|---|----|
| `src` | 오디오 파일의 URL을 지정합니다. |
| `controls` | 재생 컨트롤(재생, 일시정지 등)을 표시합니다. (Boolean 속성) |
| `autoplay` | 페이지 로드 시 자동 재생합니다. (Boolean 속성) |
| `loop` | 오디오를 반복 재생합니다. (Boolean 속성) |
| `muted` | 오디오를 음소거 상태로 시작합니다. (Boolean 속성) |
```html
<audio controls>
<source src="song.mp3" type="audio/mpeg">
브라우저가 오디오를 지원하지 않습니다.
</audio>
```
- 설명: 재생 컨트롤이 있는 오디오 삽입. `source`로 파일 지정.
> `source` 태그를 사용하여 여러 포맷을 제공하면 브라우저 호환성이 높아집니다.
## video
| **속성** | **설명** |
|---|----|
| `src` | 비디오 파일의 URL을 지정합니다. |
| `controls` | 재생 컨트롤을 표시합니다. (Boolean 속성) |
| `autoplay` | 페이지 로드 시 자동 재생합니다. (Boolean 속성) |
| `loop` | 비디오를 반복 재생합니다. (Boolean 속성) |
| `muted` | 비디오를 음소거 상태로 시작합니다. (Boolean 속성) |
| `width` | 비디오의 너비를 픽셀 단위로 지정합니다. (CSS 권장) |
| `height` | 비디오의 높이를 픽셀 단위로 지정합니다. (CSS 권장) |
| `poster` | 비디오 로드 전 표시할 이미지 URL을 지정합니다. |
```html
<video controls width="400" poster="thumbnail.jpg">
<source src="movie.mp4" type="video/mp4">
브라우저가 비디오를 지원하지 않습니다.
</video>
```
- 설명: 400px 너비의 비디오 삽입, 썸네일 이미지와 함께.
## track
| **속성** | **설명** |
|---|----|
| `src` | 자막/캡션 파일의 URL을 지정합니다. (WebVTT 형식 권장) |
| `kind` | 트랙의 유형을 지정합니다. (예: `subtitles`, `captions`, `descriptions`) |
| `srclang` | 자막의 언어를 지정합니다. (예: `en`, `ko`) |
| `label` | 사용자에게 표시될 트랙의 이름을 지정합니다. |
| `default` | 기본 트랙으로 설정합니다. (Boolean 속성) |
```html
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="subtitles_ko.vtt" kind="subtitles" srclang="ko" label="Korean">
</video>
```
- 설명: 비디오에 영어(기본)와 한국어 자막 추가.

98
doc/html5/59_컨텐트 삽입.md Normal file
View File

@@ -0,0 +1,98 @@
# 컨텐트 삽입
## embed
| **속성** | **설명** |
|---|----|
| `src` | 삽입할 리소스의 URL을 지정합니다. |
| `type` | 리소스의 MIME 타입을 지정합니다. (예: `application/x-shockwave-flash`) |
| `width` | 너비를 픽셀 단위로 지정합니다. (CSS 권장) |
| `height` | 높이를 픽셀 단위로 지정합니다. (CSS 권장) |
```html
<embed type="video/mp4" src="movie.mp4" width="300" height="200">
```
- 설명: MP4 비디오를 삽입.
## iframe
| **속성** | **설명** |
|---|----|
| `src` | 삽입할 문서의 URL을 지정합니다. |
| `width` | 너비를 픽셀 단위로 지정합니다. (CSS 권장) |
| `height` | 높이를 픽셀 단위로 지정합니다. (CSS 권장) |
| `name` | iframe의 이름을 지정합니다. (링크 타겟으로 사용 가능) |
| `sandbox` | 보안 제한을 적용합니다. (예: `allow-scripts`, `allow-forms`) |
```html
<iframe src="https://example.com" width="400" height="300" sandbox="allow-scripts"></iframe>
```
- 설명: 외부 웹페이지를 삽입하며 스크립트 실행 허용.
## object
| **속성** | **설명** |
|---|----|
| `data` | 삽입할 리소스의 URL을 지정합니다. |
| `type` | 리소스의 MIME 타입을 지정합니다. |
| `width` | 너비를 픽셀 단위로 지정합니다. (CSS 권장) |
| `height` | 높이를 픽셀 단위로 지정합니다. (CSS 권장) |
```html
<object data="document.pdf" type="application/pdf" width="500" height="600">
PDF를 표시할 수 없습니다.
</object>
```
- 설명: PDF 문서를 삽입하고 대체 텍스트 제공.
## portal
| **속성** | **설명** |
|---|----|
| `src` | 전환할 페이지의 URL을 지정합니다. |
```html
<portal src="https://example.com"></portal>
```
- 설명: 다른 페이지로의 전환 제공 (현재 지원 제한적).
## canvas
| **속성** | **설명** |
|---|----|
| `width` | 캔버스의 너비를 픽셀 단위로 지정합니다. (기본값: 300) |
| `height` | 캔버스의 높이를 픽셀 단위로 지정합니다. (기본값: 150) |
```html
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillRect(50, 25, 100, 50);
</script>
```
- 설명: JavaScript로 사각형을 그림.
## svg
| **속성** | **설명** |
|---|----|
| `width` | SVG의 너비를 지정합니다. |
| `height` | SVG의 높이를 지정합니다. |
| `viewBox` | 표시 영역을 정의합니다. (예: `0 0 100 100`) |
```html
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
```
- 설명: 빨간색 원을 그린 SVG 그래픽.
## math
```html
<math>
<mrow>
<msup><mi>x</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>y</mi><mn>2</mn></msup>
</mrow>
</math>
```
- 설명: MathML로 "x² + y²" 수식 표현.

353
doc/html5/60_양식.md Normal file
View File

@@ -0,0 +1,353 @@
# 양식
```html
<form action="/submit" method="post">
<fieldset>
<legend>사용자 정보</legend>
<label for="name">이름:</label>
<input id="name" type="text" name="name" required>
<br>
<label for="email">이메일:</label>
<input id="email" type="email" name="email" list="emails">
<datalist id="emails">
<option value="user@example.com">
<option value="test@example.com">
</datalist>
<br>
<label>좋아하는 색상:</label>
<select name="color">
<optgroup label="밝은 색">
<option value="yellow">노랑</option>
</optgroup>
</select>
<br>
<label for="bio">소개:</label>
<textarea id="bio" name="bio" rows="3"></textarea>
<br>
<meter value="80" max="100">80%</meter> 완료율
<progress value="50" max="100">50%</progress> 진행률
<br>
<button type="submit">제출</button>
</fieldset>
</form>
```
- 설명: 다양한 폼 요소를 결합한 예시.
## button
| **속성** | **설명** |
|---|----|
| `type` | 버튼 유형을 지정합니다. (예: `button`, `submit`, `reset`) |
| `disabled` | 버튼을 비활성화합니다. (Boolean 속성) |
```html
<button type="button" onclick="alert('클릭됨')">클릭</button>
<button type="submit">제출</button>
```
- 설명: 일반 버튼과 폼 제출 버튼.
## form
| **속성** | **설명** |
|---|----|
| `action` | 폼 데이터를 제출할 URL을 지정합니다. |
| `method` | 제출 방식(`get`, `post`)을 지정합니다. |
| `enctype` | 파일 업로드 시 데이터 인코딩 방식을 지정합니다. (예: `multipart/form-data`) |
```html
<form action="/submit" method="post">
<input type="text" name="username" required>
<button type="submit">제출</button>
</form>
```
- 설명: 사용자 입력을 수집하여 서버로 전송.
## fieldset
| **속성** | **설명** |
|---|----|
| `disabled` | 그룹 내 모든 입력 요소를 비활성화합니다. (Boolean 속성) |
## legend
```html
<fieldset>
<legend>개인 정보</legend>
<label>이름: <input type="text" name="name"></label>
<label>나이: <input type="number" name="age"></label>
</fieldset>
```
- 설명: 관련 입력 필드를 그룹화하고 제목 추가.
## input
| **속성** | **설명** |
|---|----|
| `type` | 입력 유형을 지정합니다. (예: `text`, `checkbox`, `file`, `email`) |
| `name` | 폼 제출 시 사용할 이름입니다. |
| `value` | 기본값을 지정합니다. |
| `placeholder` | 입력 필드에 힌트를 표시합니다. |
| `required` | 필수 입력임을 지정합니다. (Boolean 속성) |
> `required`와 `type` 속성으로 입력 검증 가능.
`input` 태그는 다양한 사용자 입력을 받기 위해 사용되며, `type` 속성에 따라 입력 필드의 기능과 모양이 달라집니다.
| **타입** | **설명** |
|---|----|
| `text` | 한 줄의 일반 텍스트 입력을 받습니다. (기본값) |
| `password` | 비밀번호 입력을 받으며, 입력값이 마스킹됩니다. |
| `checkbox` | 체크박스를 제공하여 다중 선택이 가능합니다. |
| `radio` | 라디오 버튼을 제공하여 단일 선택이 가능합니다. |
| `submit` | 폼을 제출하는 버튼을 생성합니다. |
| `reset` | 폼의 모든 입력을 초기화하는 버튼을 생성합니다. |
| `button` | 기본 동작 없는 일반 버튼을 생성합니다. |
| `file` | 파일 업로드를 위한 입력을 받습니다. |
| `hidden` | 사용자에게 보이지 않는 숨겨진 데이터를 전송합니다. |
| `image` | 이미지를 버튼으로 사용하여 폼을 제출합니다. |
| `number` | 숫자 입력을 받으며, 스피너(화살표)가 포함됩니다. |
| `range` | 슬라이더를 통해 숫자 범위를 선택합니다. |
| `date` | 날짜(연, 월, 일)를 선택합니다. |
| `datetime-local` | 날짜와 시간(연, 월, 일, 시, 분)을 선택합니다. |
| `time` | 시간(시, 분)을 선택합니다. |
| `month` | 연도와 월을 선택합니다. |
| `week` | 연도와 주 번호를 선택합니다. |
| `color` | 색상을 선택하는 컬러 피커를 제공합니다. |
| `email` | 이메일 주소를 입력받으며, 유효성 검사를 지원합니다. |
| `tel` | 전화번호를 입력받습니다. (형식은 브라우저마다 다름) |
| `url` | URL을 입력받으며, 유효성 검사를 지원합니다. |
| `search` | 검색어를 입력받으며, 검색 UI(예: X 버튼)를 제공할 수 있습니다. |
> `date`, `time` 등은 오래된 브라우저에서 텍스트 입력으로 대체될 수 있습니다.
> `email`, `url` 등은 HTML5 유효성 검사를 지원하며, `required`와 조합 가능.
> `button`, `image` 등은 스타일링으로 더 활용 가능.
```html
<input type="text" name="username" placeholder="사용자 이름">
```
- 설명: 일반 텍스트 입력 필드.
```html
<input type="password" name="password" placeholder="비밀번호">
```
- 설명: 입력값이 별표(*)로 표시됨.
```html
<input type="checkbox" name="hobby" value="reading"> 독서
<input type="checkbox" name="hobby" value="gaming"> 게임
```
- 설명: 여러 항목 선택 가능.
```html
<input type="radio" name="gender" value="male"> 남성
<input type="radio" name="gender" value="female"> 여성
```
- 설명: 동일 `name` 내에서 하나만 선택 가능.
```html
<input type="submit" value="제출하기">
```
- 설명: 폼 제출 버튼.
```html
<input type="reset" value="초기화">
```
- 설명: 폼 입력값 초기화.
```html
<input type="button" value="클릭" onclick="alert('버튼 클릭됨')">
```
- 설명: 기본 동작 없는 버튼.
```html
<input type="file" name="upload" accept=".jpg,.png">
```
- 설명: 파일 선택 UI, 특정 확장자 제한.
```html
<input type="hidden" name="user_id" value="12345">
```
- 설명: 사용자에게 보이지 않음, 데이터 전송용.
```html
<input type="image" src="submit-btn.png" alt="제출 버튼">
```
- 설명: 이미지를 제출 버튼으로 사용.
```html
<input type="number" name="age" min="0" max="100" value="20">
```
- 설명: 숫자 입력, 범위 설정 가능.
```html
<input type="range" name="volume" min="0" max="100" value="50">
```
- 설명: 슬라이더로 값 선택.
```html
<input type="date" name="birthdate">
```
- 설명: 날짜 선택 캘린더 제공.
```html
<input type="datetime-local" name="meeting">
```
- 설명: 날짜와 시간 선택.
```html
<input type="time" name="alarm">
```
- 설명: 시간 선택.
```html
<input type="month" name="start-month">
```
- 설명: 연도와 월 선택.
```html
<input type="week" name="vacation-week">
```
- 설명: 주 번호 선택.
```html
<input type="color" name="favorite-color" value="#ff0000">
```
- 설명: 색상 선택기 제공.
```html
<input type="email" name="email" placeholder="이메일 입력" required>
```
- 설명: 이메일 형식 검증.
```html
<input type="tel" name="phone" placeholder="전화번호 입력">
```
- 설명: 전화번호 입력 (형식은 브라우저별로 다름).
```html
<input type="url" name="website" placeholder="https://example.com" required>
```
- 설명: URL 형식 검증.
```html
<input type="search" name="query" placeholder="검색어 입력">
```
- 설명: 검색 입력, 브라우저에 따라 X 버튼 포함.
## label
| **속성** | **설명** |
|---|----|
| `for` | 연결할 입력 요소의 `id`를 지정합니다. |
```html
<label for="username">사용자 이름:</label>
<input id="username" type="text" name="username">
```
- 설명: 입력 필드와 연결된 레이블.
> `label`과 `for`는 스크린 리더 사용자에게 중요합니다.
## select
| **속성** | **설명** |
|---|----|
| `name` | 폼 제출 시 사용할 이름입니다. |
| `multiple` | 다중 선택을 허용합니다. (Boolean 속성) |
| `required` | 필수 선택임을 지정합니다. (Boolean 속성) |
```html
<select name="color" multiple>
<option value="red">빨강</option>
<option value="blue" selected>파랑</option>
</select>
```
- 설명: 다중 선택 가능한 드롭다운.
## option
| **속성** | **설명** |
|---|----|
| `value` | 폼 제출 시 전송될 값을 지정합니다. |
| `selected` | 기본 선택 상태를 지정합니다. (Boolean 속성) |
| `disabled` | 옵션을 비활성화합니다. (Boolean 속성) |
## optgroup
| **속성** | **설명** |
|---|----|
| `label` | 그룹의 이름을 지정합니다. |
| `disabled` | 그룹 내 모든 옵션을 비활성화합니다. (Boolean 속성) |
```html
<select name="food">
<optgroup label="과일">
<option value="apple">사과</option>
<option value="banana">바나나</option>
</optgroup>
<optgroup label="야채">
<option value="carrot">당근</option>
</optgroup>
</select>
```
- 설명: 그룹화된 드롭다운 목록.
## datalist
```html
<input list="fruits" placeholder="과일을 입력하세요">
<datalist id="fruits">
<option value="사과">
<option value="바나나">
<option value="오렌지">
</datalist>
```
- 설명: 입력 필드에 자동완성 옵션 제공.
## output
| **속성** | **설명** |
|---|----|
| `for` | 출력과 관련된 입력 요소의 `id`를 지정합니다. |
```html
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
<input type="number" id="a" name="a" value="5"> +
<input type="number" id="b" name="b" value="3"> =
<output name="result" for="a b">8</output>
</form>
```
- 설명: 입력값의 합계를 실시간 표시.
> `output`, `meter`, `progress`는 JavaScript와 함께 사용하면 효과적입니다.
## meter
| **속성** | **설명** |
|---|----|
| `value` | 현재 값을 지정합니다. |
| `min` | 최소값을 지정합니다. (기본값: 0) |
| `max` | 최대값을 지정합니다. (기본값: 1) |
| `low` | 낮은 범위의 경계를 지정합니다. |
| `high` | 높은 범위의 경계를 지정합니다. |
```html
<meter min="0" max="100" low="30" high="70" value="50">50%</meter>
```
- 설명: 0~100 범위에서 50을 표시.
## progress
| **속성** | **설명** |
|---|----|
| `value` | 현재 진행 값을 지정합니다. |
| `max` | 최대값을 지정합니다. (기본값: 1) |
```html
<progress value="75" max="100">75%</progress>
```
- 설명: 75% 진행 상황 표시.
## textarea
| **속성** | **설명** |
|---|----|
| `name` | 폼 제출 시 사용할 이름입니다. |
| `rows` | 표시할 행 수를 지정합니다. |
| `cols` | 표시할 열 수를 지정합니다. |
| `placeholder` | 입력 필드에 힌트를 표시합니다. |
| `required` | 필수 입력임을 지정합니다. (Boolean 속성) |
```html
<textarea name="message" rows="4" cols="50" placeholder="메시지를 입력하세요"></textarea>
```
- 설명: 여러 줄 텍스트 입력.

113
doc/html5/61_대화형 요소, 웹컴포넌트, 스크립트.md Normal file
View File

@@ -0,0 +1,113 @@
# 대화형 요소, 웹컴포넌트, 스크립트
## details
| **속성** | **설명** |
|---|----|
| `open` | 기본적으로 펼쳐진 상태로 표시합니다. (Boolean 속성) |
## summary
```html
<details>
<summary>자세히 보기</summary>
<p>이곳에 추가 정보가 표시됩니다.</p>
</details>
<details open>
<summary>기본적으로 펼쳐짐</summary>
<p>이 내용은 처음부터 보입니다.</p>
</details>
```
- 설명: 클릭하면 내용을 펼치거나 접을 수 있는 위젯. `open` 속성으로 기본 상태 설정.
## dialog
| **속성** | **설명** |
|---|----|
| `open` | 대화 상자가 열려 있는 상태를 표시합니다. (Boolean 속성) |
```html
<dialog id="myDialog">
<p>이것은 대화 상자입니다.</p>
<button onclick="document.getElementById('myDialog').close()">닫기</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">모달 열기</button>
```
- 설명: JavaScript로 열고 닫을 수 있는 모달 대화 상자. `showModal()`로 모달 표시.
## slot
| **속성** | **설명** |
|---|----|
| `name` | 슬롯의 이름을 지정하여 특정 콘텐츠를 매핑합니다. |
```html
<script>
class MyElement extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `
<div>
<slot name="title">기본 제목</slot>
<slot>기본 콘텐츠</slot>
</div>
`;
}
}
customElements.define('my-element', MyElement);
</script>
<my-element>
<h1 slot="title">커스텀 제목</h1>
<p>커스텀 콘텐츠</p>
</my-element>
```
- 설명: `slot`으로 사용자 정의 콘텐츠를 삽입할 위치 지정.
## template
```html
<template id="myTemplate">
<div>
<h2>템플릿 제목</h2>
<p>이것은 템플릿 콘텐츠입니다.</p>
</div>
</template>
<button onclick="useTemplate()">템플릿 사용</button>
<div id="target"></div>
<script>
function useTemplate() {
const template = document.getElementById('myTemplate');
const clone = template.content.cloneNode(true);
document.getElementById('target').appendChild(clone);
}
</script>
```
- 설명: `template`에 저장된 콘텐츠를 JavaScript로 동적으로 삽입.
## script
| **속성** | **설명** |
|---|----|
| `src` | 외부 스크립트 파일의 URL을 지정합니다. |
| `type` | 스크립트의 MIME 타입을 지정합니다. (예: `text/javascript`) |
| `async` | 스크립트를 비동기적으로 로드합니다. (Boolean 속성) |
| `defer` | 문서 파싱 후 스크립트를 실행합니다. (Boolean 속성) |
```html
<script src="script.js" defer></script>
<script>
console.log("인라인 스크립트");
</script>
```
- 설명: 외부 스크립트 연결 및 인라인 스크립트 작성.
## noscript
```html
<script>
document.write("스크립트가 실행됨");
</script>
<noscript>
<p>스크립트가 비활성화되어 있습니다.</p>
</noscript>
```
- 설명: 스크립트 비활성화 시 대체 콘텐츠 표시.

163
doc/webcomponent/01_webcomponent.md
View File

@@ -1,163 +0,0 @@
# 웹 컴포넌트(Web Components)
## 웹 컴포넌트(Web Components)란?
웹 컴포넌트(Web Components)는 **재사용 가능한 UI 요소를 캡슐화하여 웹 애플리케이션에서 독립적으로 사용할 수 있는 기술**입니다.
HTML, CSS, JavaScript를 **하나의 독립된 컴포넌트**로 묶어, 다른 프레임워크(React, Vue, Angular) 없이도 사용할 수 있습니다.
* 웹 컴포넌트의 핵심 목표
- **재사용성** : 여러 프로젝트에서 동일한 컴포넌트를 재사용
- **캡슐화** : 내부 스타일과 동작을 외부로부터 보호
- **프레임워크 독립적** : React, Vue, Angular 없이도 동작
- **모듈화** : HTML 요소를 조합하여 더 복잡한 UI 요소를 생성
## 웹 컴포넌트를 구성하는 3가지 핵심 기술
웹 컴포넌트는 다음 세 가지 핵심 기술을 기반으로 동작합니다.
### 1. Custom Elements (사용자 정의 요소)
HTML에서 `<my-button>` 같은 새로운 태그를 직접 정의하여 사용할 수 있게 해주는 기술입니다.
#### 새로운 HTML 요소 정의 예시
```javascript
class MyButton extends HTMLElement {
connectedCallback() {
this.innerHTML = `<button>Click Me</button>`;
}
}
customElements.define("my-button", MyButton);
```
사용 방법
```html
<my-button></my-button>
```
➡️ `my-button` 태그가 자동으로 버튼으로 렌더링됨.
### 2. Shadow DOM (캡슐화)
웹 컴포넌트 내부의 스타일과 구조를 **외부 영향 없이 독립적으로 유지하는 기능**입니다.
CSS 충돌을 방지하고, 외부에서 변경할 수 없도록 **컴포넌트 내부를 보호**합니다.
#### Shadow DOM 사용 예시
```javascript
class ShadowButton extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" }); // Shadow DOM 활성화
this.shadowRoot.innerHTML = `
<style>
button {
background: blue;
color: white;
border: none;
padding: 10px;
}
</style>
<button>Shadow Button</button>
`;
}
}
customElements.define("shadow-button", ShadowButton);
```
사용 방법
```html
<shadow-button></shadow-button>
```
> Shadow DOM이 적용되면 외부 CSS가 이 버튼에 영향을 주지 않음.
### 3. HTML Templates (템플릿 & 슬롯)
컴포넌트에서 **반복해서 사용할 HTML 구조를 정의하고, 동적으로 채울 수 있도록 해주는 기능**입니다.
템플릿을 이용한 컴포넌트 예시
```html
<template id="card-template">
<style>
.card {
border: 1px solid #ddd;
padding: 10px;
border-radius: 5px;
}
</style>
<div class="card">
<slot name="title"></slot>
<slot name="content"></slot>
</div>
</template>
<script>
class MyCard extends HTMLElement {
constructor() {
super();
const template = document.getElementById("card-template").content;
this.attachShadow({ mode: "open" }).appendChild(template.cloneNode(true));
}
}
customElements.define("my-card", MyCard);
</script>
<my-card>
<span slot="title"><h2>웹 컴포넌트</h2></span>
<span slot="content"><p>웹 컴포넌트 예제입니다.</p></span>
</my-card>
```
> `slot`을 사용하여 컴포넌트 내부에 동적으로 콘텐츠를 삽입 가능.
## 3. 웹 컴포넌트의 장점 & 단점
* 장점
- **프레임워크 독립적** : 모든 브라우저에서 동작
- **재사용성** : 한 번 만든 컴포넌트를 여러 프로젝트에서 활용 가능
- **스타일 격리** : Shadow DOM을 이용해 CSS 충돌 방지
- **성능 향상** : 네이티브 브라우저 지원으로 최적화됨
* 단점
- **구형 브라우저 지원 부족** : IE11 등에서는 폴리필 필요
- **데이터 바인딩 부족** : React/Vue처럼 상태 관리 기능이 없음 (별도로 구현 필요)
- **초기 학습 비용** : 기존 프레임워크 사용자에게는 생소할 수 있음
## 4. 웹 컴포넌트 vs 프레임워크 비교
| 비교 항목 | 웹 컴포넌트 | React/Vue/Angular |
|-----------|------------|-------------------|
| **기술 종속성** | 없음 | 특정 프레임워크 필요 |
| **재사용성** | 네이티브 지원 | 같은 프레임워크 내에서만 가능 |
| **렌더링 성능** | 브라우저 최적화 | 가상 DOM 사용 (추가 오버헤드) |
| **스타일 격리** | Shadow DOM 사용 | 기본적으로 없음 (Scoped CSS 사용 가능) |
| **데이터 바인딩** | 직접 구현해야 함 | 내장 기능 제공 |
➡️ 웹 컴포넌트는 특정 프레임워크에 종속되지 않는 강력한 기능을 제공하지만, 상태 관리 및 데이터 바인딩이 부족하므로 필요에 따라 프레임워크와 함께 사용할 수도 있음.
---
## 5. 웹 컴포넌트 활용 사례
* 디자인 시스템 (Design System) 구축
* 대규모 프로젝트의 UI 모듈화
* 프레임워크 간 호환이 필요한 경우
## 6. 웹 컴포넌트 배포 및 사용
웹 컴포넌트는 **NPM 패키지**로 배포하거나, **CDN을 통해 웹사이트에서 직접 사용**할 수 있습니다.
### CDN을 활용한 웹 컴포넌트 로드
```html
<script type="module" src="https://your-cdn.com/my-component.js"></script>
<my-component></my-component>
```
### NPM으로 배포 후 사용
```bash
npm install my-web-component
```
```javascript
import "my-web-component";
```
## 7. 결론
웹 컴포넌트는 모든 웹 애플리케이션에서 재사용 가능한 UI 요소를 만들기 위한 표준 기술입니다.
* 프레임워크 독립적이며, 캡슐화된 UI 컴포넌트를 쉽게 만들고 재사용할 수 있음.
* Shadow DOM을 활용하여 스타일 충돌을 방지하고, HTML 템플릿으로 동적 콘텐츠를 관리 가능.
* 프레임워크 없이도 UI 컴포넌트를 사용할 수 있어, 현대적인 웹 개발에서 점점 더 많이 활용됨.
웹 컴포넌트를 활용하면 프로젝트의 유지보수성과 확장성을 크게 높일 수 있습니다!