diff --git a/doc/html5/51_HTML Elements.md b/doc/html5/51_HTML Elements.md new file mode 100644 index 0000000..f14c2e8 --- /dev/null +++ b/doc/html5/51_HTML Elements.md @@ -0,0 +1,219 @@ +# HTML + +## 기본 구조 + +| **태그** | **설명** | +|----|----| +| `html` | HTML 문서의 루트 요소로, 모든 콘텐츠를 감싸는 최상위 태그입니다. 다른 모든 요소는 이 요소의 자손이어야 합니다. | +| `head` | 문서의 메타데이터(문서 정보)와 외부 리소스(스타일시트, 스크립트 등)를 포함합니다. | +| `body` | 사용자에게 표시되는 실제 콘텐츠(텍스트, 이미지, 링크 등)를 포함합니다. 문서에는 이러한 요소가 하나만 있을 수 있습니다. | + +## 메타 데이터 + +| **태그** | **설명** | +|----|----| +| `title` | 브라우저 탭에 표시될 문서의 제목을 정의합니다. 텍스트만 포함합니다. 요소 내의 태그는 무시됩니다. | +| `meta` | 문서의 메타데이터(문자 인코딩, 설명, 뷰포트 등)를 제공합니다. | +| `link` | 외부 리소스(예: CSS 파일, 파비콘 등)를 문서에 연결합니다. | +| `style` | 문서 내에 CSS 스타일을 직접 정의합니다. | +| `base` | 문서 내 모든 상대 URL의 기준 경로를 지정합니다. 문서에는 이러한 요소가 하나만 있을 수 있습니다. | + +## 섹션 + +| **태그** | **설명** | +|---|----| +| `h1`~`h6` | 제목을 정의하며, `h1`이 가장 중요하고 `h6`가 덜 중요합니다. | +| `header` | 문서나 섹션의 헤더(제목, 로고, 검색 폼, 작성자 이름, 내비게이션 등)를 정의합니다. | +| `footer` | 가장 가까운 섹션 콘텐츠나 섹션의 푸터(하단 정보, 저작권 등)를 정의합니다. | +| `main` | 문서 ``의 주요 콘텐츠를 나타냅니다. 한 문서에 하나만 사용됩니다. | +| `article` | 독립적인 콘텐츠(블로그 포스트, 뉴스 기사 등)를 정의합니다. | +| `nav` | 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 내비게이션 링크(메뉴, 목차, 색인 등)를 포함하는 섹션을 정의합니다. | +| `aside` | 주요 콘텐츠와 간접적으로 관련된 부수적인 콘텐츠(사이드바 등)를 나타냅니다. | +| `address` | 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보(예: 이메일, 전화번호, 주소)를 나타냅니다. | +| `section` | 문서 내 주제별 섹션(장 또는 구획)을 정의합니다. HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. | + + +## 텍스트 +| **태그** | **설명** | +|---|----| +| `p` | 단락(paragraph)을 정의합니다. 일반 텍스트 콘텐츠에 사용됩니다. | +| `pre` | 미리 서식을 지정한(preformatted) 텍스트를 정의하며, 텍스트는 보통 고정폭 글꼴을 사용해 렌더링하고, 공백과 줄 바꿈을 유지합니다. | +| `div` | 콘텐츠를 묶는 블록 단위 컨테이너로, 스타일링이나 레이아웃에 사용됩니다. CSS를 사용하여 어떤 식으로든 스타일을 지정할 때까지 콘텐츠나 레이아웃에 영향을 미치지 않습니다. | +| `blockquote` | 인용문을 나타내며, 다른 출처에서 가져온 긴 텍스트를 표시합니다. 인용문의 출처 URL은 cite 속성으로, 출처 텍스트는 `` 요소로 제공할 수 있습니다. | +| `hr` | 수평선(horizontal rule)을 삽입하여, 이야기 장면 전환, 구획 내 주제 변경 등 주제나 섹션을 구분합니다. | +| `figure` | 이미지, 다이어그램 등 독립적인 콘텐츠를 그룹화합니다. `
` 요소를 사용해 설명을 붙일 수 있습니다. | +| `figcaption` | `figure` 요소 내에서 캡션(설명 혹은 범례)을 제공합니다. | + + +### 목록 +| **태그** | **설명** | +|----|----| +| `ul` | 순서 없는(unordered) 목록을 정의합니다. (기본적으로 글머리 기호 사용) | +| `ol` | 순서 있는(ordered) 목록을 정의합니다. (기본적으로 숫자 사용) | +| `menu` | 명령 메뉴나 콘텍스트 메뉴를 정의합니다. | +| `li` | 목록 항목(list item)을 정의합니다. (`ul`, `ol`, `menu`의 하위 요소) | +| `dl` | 정의 목록(description list)을 정의합니다. `
`은 `
`로 표기한 용어와 `
` 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용합니다. | +| `dt` | 정의 목록에서 용어(term)를 정의합니다. `
` 요소 안에 위치해야 합니다. 보통 `
` 요소가 뒤따르지만, 여러 개의 `
` 요소를 연속해 배치하면 바로 다음 `
` 요소로 한꺼번에 서술할 수 있습니다. | +| `dd` | 정의 목록에서 설명(description)을 정의합니다. `
` 요소 안에 위치해야 합니다. `
`에서 `
`에 대한 설명, 정의 또는 값을 제공합니다. | + + +## 인라인 텍스트 +| **태그** | **설명** | +|----|----| +| `span` | 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 특정 텍스트를 묶어 스타일링이나 스크립팅을 적용할 때 사용합니다. 적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 합니다. | +| `a` | 하이퍼링크를 생성합니다. `href` 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다. `` 안의 콘텐츠는 링크 목적지의 설명을 나타내야 합니다. | +| `abbr` | 약어(abbreviation)를 정의합니다. 선택 속성인 `title`을 사용하면 준말의 전체 뜻이나 설명을 제공할 수 있습니다. `title` 속성은 전체 설명만을 가져야 하며 다른건 포함할 수 없습니다. | +| `cite` | 인용된 출처(책, 영화 제목 등)를 나타냅니다. 제목을 반드시 포함해야 합니다. | +| `code` | 컴퓨터 코드 조각을 표시합니다. 기본 스타일은 사용자 에이전트의 고정폭 글씨체입니다. | +| `kbd` | 키보드 입력을 나타냅니다. 사용자 에이전트의 고정폭 글꼴로 표시하지만, HTML 표준은 그런 점을 강제하지 않습니다. | +| `samp` | 프로그램 출력 샘플(혹은 인용문)을 표시합니다. 보통 브라우저의 기본 고정폭 글씨체를 사용해 렌더링합니다. | +| `var` | 변수(프로그래밍 또는 수학)를 나타냅니다. 보통 현재 글씨체의 기울임꼴로 표시하지만, 브라우저마다 다를 수 있습니다. | +| `q` | 짧은 인용문을 나타냅니다. 대부분의 브라우저에서는 앞과 뒤에 따옴표를 붙여 표현합니다. 긴 인용문은 `
` 요소를 사용하세요. | +| `small` | 부수적인 텍스트(작은 글씨, 저작권 등)를 표시합니다. | +| `dfn` | 현재 맥락이나 문장에서 정의하고 있는 용어를 나타냅니다. ``에서 가장 가까운 `

`, `

`/`
` 쌍, `
` 조상 요소를 용어 정의로 간주합니다. | +| `em` | 강조된 텍스트를 표시합니다. `` 요소를 중첩하면 더 큰 강세를 뜻하게 됩니다. (기본적으로 기울임꼴) | +| `i` | 텍스트에서 어떤 이유로 주위와 구분해야 하는 부분을 나타냅니다. 기울임꼴 텍스트를 표시합니다. 기술 용어, 외국어 구절, 등장인물의 생각 등을 예시로 들 수 있습니다. (시맨틱 의미 없음, 스타일용) | +| `mark` | 하이라이트된 텍스트를 표시합니다. (HTML5에서 추가) | +| `strong` | 강한 중요성을 가진 텍스트를 표시합니다. (기본적으로 굵게) | +| `b` | 독자의 주의를 요소의 콘텐츠로 끌기 위한 용도로 사용합니다. 굵은 텍스트를 표시합니다. (시맨틱 의미 없음, 스타일용) | +| `s` | 글자에 취소선, 즉 글자를 가로지르는 선을 그립니다. 더 이상 정확하지 않거나 삭제된 텍스트를 표시합니다. 상황에 따라 ``과 `` 요소를 대신 사용하세요. | +| `u` | 글자로 표현하지 않는 주석을 가진 것으로 렌더링 해야 하는 텍스트를 나타냅니다. 밑줄이 그어진 텍스트를 표시합니다. (시맨틱 의미 없음, 스타일용) | +| `sub` | 아래첨자(subscript)를 표시합니다. | +| `sup` | 위첨자(superscript)를 표시합니다. | +| `data` | 기계가 읽을 수 있는 데이터를 텍스트와 연결합니다. 콘텐츠가 시간 혹은 날짜 관련 정보라면 대신 `