UX·UI - FrontEnd Dev. Story

프론트엔드/HTML

[HTML] 기본 카테고리 콘텐츠 정리

클로이겅쥬 2019. 12. 20. 14:53
반응형

 

HTML 카테고리(Content Categories)


카테고리 설명
1. 메타데이터 콘텐츠(Metadata Content) 문서의 메타 정보와 관련된 요소입니다.
2. 플로우 콘텐츠(Flow Content) 대분분 body요소 안에서 사용하는 요소들입니다.
3. 섹션 콘텐츠(Section Conetnt) 웹 문서의 섹션 영역을 정의하는 요소입니다.
4. 헤딩 콘텐츠(Heading Content) 섹션의 제목과 관련된 요소입니다.
5. 프레이징 콘텐츠(Phrasing Content) 문장과 텍스트가 관련된 요소입니다.
6. 임베디드 콘텐츠(Embedded Content) 다른 소스를 가져오거나 삽입시키는 컨텐츠와 관련된 요소입니다.
7. 인터랙티브 콘텐츠(Interactive Content) 상호작용을 위한 컨텐츠 요소입니다.

 

 

 

 

 

1. 메타데이터 콘텐츠 (Metadata Content)

: 웹 문서와 관련된 정보를 표현하는 콘텐츠와 다른 문서와의 관계를 유지하는 콘텐츠입니다.


 

 

 

 

 

2. 플로우 콘텐츠(Flow Content)

: 대분분 body요소 안에서 사용하는 요소들입니다.


요소 설명  
<address> 연락처 정보를 설정합니다. 블록요소
<embed> 외부 어플리케이션을 연결합니다. 인라인요소
<command> 사용자가 호출 할 수 있는 명렁어를 설정합니다.  
<datalist> <input> 요소의 미리 정의된 옵션의 리스트를 정의합니다.  
<del> 문서의 삭제된(delete) 텍스트를 정의합니다. 인라인요소
<details> 컨텐츠를 숨기거나 보여줄 수 있습니다. (펼치기/접기) 인라인요소
<dfn> 전문적인 용어를 정의할 때 사용합니다. 인라인요소
<dl> 설명 목록을 정의합니다. 인라인요소
<em> 텍스트를 강조하는데 사용합니다. 인라인요소
<span> 인라인 요소 그룹화를 정의합니다. 인라인요소
<small> 저작권 또는 법적인 텍스트를 정의합니다. 인라인요소
<b> 글씨를 두껍게 표현할 때 사용합니다.
인라인요소
<strong> 중요한 의미를 갖는 텍스트를 정의합니다.
인라인요소
<i> 기술적인 구문, 다른 언어 및 사상, 선박이름에 정의합니다. 인라인요소
<mark> 참조용 표시를 정의합니다. 블록요소
<q> 짧은 인용을 정의합니다. 인라인요소
<u> 밑줄을 표시할 때 사용합니다. 인라인요소
<blockquote> 긴 문장의 인용문을 정의합니다. 블록요소
<hr> 단란간의 주제별 구분을 나타냅니다.  
<fieldset> 폼 요소의 그룹 내부 영역을 설정합니다. 인라인요소
<input> 데이터를 입력할 수 있는 폼 컨트롤을 정의합니다. 인라인요소
<menu> 메뉴 리스트를 정의합니다. 블록요소
<nav> 웹 문서 내에 네비게이션 링크를 정의합니다. 블록요소
<object> 문서내에 포함된 멀티미디어 요소를 정의합니다. 블록요소
<sub> 텍스트 아래첨자(subscript)를 정의합니다. 인라인요소
<sup> 텍스트 위첨자(superscript)를 정의합니다. 인라인요소
<textarea> 여러줄의 텍스트를 편집할 수 있는 컨트롤을 정의합니다. 인라인요소
<time> 날자와 시간을 정의합니다. 블록요소
<noscript>  스크립트를 지원하지 않는 브라우저를 위한 대체 태그입니다. 블록요소

 

 

 

※ 참고

 

1. 텍스트

- 글씨를 특별한 이유로 평범한 글자와 구분하기 위해서<i> 태그를 사용합니다. 
- 글씨를 중요성과 관련성을 전달하지 않고, 다른 텍스트와 구별 할 때 <b> 태그를 사용합니다. 
- 글씨를 강조하고 싶다<em> 태그를 사용합니다. 
- 글씨의 중요성을 강조하고 싶다면 <strong> 태그를 사용합니다. 
- 글씨의 중요성과 강조를 고려하지 않는 단순 참고용 표시를 사용한다면 <mark> 태그를 사용합니다. 
- 글씨의 전문적인 용어를 정의할 때는 <dfn> 태그를 사용합니다. 
- 글씨의 맞춤법이 틀린 단어를 표현하고 싶다면 <u> 태그를 사용합니다.

 

 

2. 목록

<dl> 태그는 용어를 설명하는 목록형 태그입니다.

<dt> 태그는 용어의 제목을 설명하는 목록형 태그입니다.

<dd> 태그는 용어를 설명하는 태그입니다.

<ul> 태그는 순서가 없는 목록형 태그입니다.

<ol> 태그는 순서가 있는 목록형 태그입니다.

<li> 태그는 목록의 항목 태그입니다.

 

 

 

 

 

 

3. 섹션 콘텐츠(Section Conetnt)

: 웹 문서의 제목 영역을 정의하는 요소입니다.


요소 설명
<article> 웹 문서 내에 독립적인 컨텐츠를 정의합니다. (HTML5)
<aside> 웹 문서 내에 사이드 컨텐츠를 정의합니다. (HTML5)
<nav> 웹 문서 내에 네비게이션 링크를 정의합니다.
<section> 주제별 그룹의 콘텐츠 섹션을 정의합니다.

 

 

 

 

 

 

 

헤드 콘텐츠 (Heading content)

: 웹 문서의 제목 영역을 정의하는 요소입니다.


 

 

 

 

 

 

5. 프레이징 콘텐츠 (Phrasing content)

: 프레이징 콘텐츠는 문장과 텍스트가 관련된 요소입니다.


요소 설명
<code> 마크업 코드를 정의합니다.
<data> 주어진 내용을 기계가 읽을 수 있도록 설정합니다.
<progress> 작업의 진행상태를 정의합니다.
<output> 계산의 결과를 보여줍니다.

 

 

 

 

 

 

6. 임베디드 콘텐츠 (Embedded content)

: 다른 소스를 가져오거나 삽입시키는 컨텐츠와 관련된 요소입니다.


 

 

 

 

 

 

7. 인터렉티브 콘텐츠 (Interactive content)

: 상호작용을하기 위한 컨텐츠 요소입니다.


요소 설명
<label> <input> 요소의 라벨을 지정합니다.

 

 

 

 

 

 

[참고사이트]

https://bit.ly/2ECpWwA

반응형