HTML 요소 - by. UXKM

2024-07-30

요약 설명
HTML 요소는 웹 페이지를 구성하는 기본적인 부분으로, 시작 태그와 종료 태그로 둘러싸여 있으며, 각 요소는 콘텐츠를 정의하고 필요에 따라 속성을 포함할 수 있습니다.
또한, 요소들은 서로 중첩되어 부모-자식 관계를 형성하고 웹 페이지의 구조를 구성합니다. 이러한 요소들은 브라우저에 의해 해석되어 사용자에게 웹 페이지를 시각적으로 표현합니다.

태그(Tags)와 콘텐츠(Content)

태그(Tags)는 HTML 문서에서 요소(Element)를 정의하는 데 사용되는 마크업 기호입니다. HTML 문서의 구조를 형성하고 콘텐츠를 그룹화하여 웹 페이지를 설계하는 데 사용됩니다.
각 태그는 시작 태그(opening tag: <tag>)와 종료 태그(closing tag: </tag>)로 구성되며, 콘텐츠는 이 두 태그 사이에 위치합니다. 이렇게 콘텐츠를 적절한 태그로 감싸면 웹 브라우저가 문서의 구조를 파악할 수 있습니다.

시작 태그와 종료 태그, 태그 사이에 위치한 내용 및 속성을 모두 포함하는 개념이 요소(Element) 입니다. HTML에서는 다양한 요소(Element)를 사용하여 웹 페이지의 구조와 내용을 정의합니다.
일반적으로 많이 사용되는 HTML 요소들은 다음과 같습니다.

제목 요소(Heading Elements)

왼쪽 가장 큰 제목(h1)부터 가장 작은 제목(h6)까지 있으며, 주로 페이지 제목이나 섹션 제목을 나타내는 데 사용됩니다.

									<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

단락 요소(Paragraph Element)

단락을 나타냅니다. 주로 텍스트 블록을 구분하는 데 사용됩니다.

<p>

링크 요소(Anchor Element)

하이퍼링크를 생성합니다. 다른 페이지로 이동하거나 같은 페이지 내에서 특정 위치로 이동하는 링크를 만들 때 사용됩니다.

<a>

이미지 요소(Image Element)

이미지를 삽입합니다. 웹 페이지에 이미지를 표시할 때 사용됩니다.

									<img>

목록 요소(List Elements)

왼쪽부터 순서가 없는 목록(<ul>), 순서가 있는 목록(<ol>), 목록의 항목(<li>)을 나타냅니다. 주로 항목을 목록으로 구성할 때 사용됩니다.

									<ul>, <ol>, <li>

폼 요소(Form Elements)

사용자 입력을 받는 폼을 만들 때 사용됩니다. 텍스트 입력, 버튼, 드롭다운 목록 등의 요소를 포함합니다.

									<form>, <input>, <button>, <select>, <option>, <textarea>

테이블 요소(Table Elements)

표를 나타냅니다. 행과 열을 나타내는 요소들로 구성됩니다.

									<table>, <tr>, <th>, <td>

구역 요소(Semantic Elements)

문서의 영역을 그룹화하거나 스타일을 적용하기 위해 사용됩니다. 주로 CSS와 함께 사용되어 레이아웃을 조정하거나 스타일을 적용하는 데에 사용됩니다.

									<div>, <span>

속성(Attributes)

HTML 요소의 속성(Attributes)은 해당 요소에 대한 추가 정보를 제공하거나 요소의 동작을 조정하는 데 사용됩니다.
각 속성은 속성 이름과 속성 값으로 구성되며, 일반적으로 여는 태그에 포함됩니다.

							<태그이름 속성이름="속성값">

여러 속성을 추가할 때는 공백으로 구분하여 나열할 수 있습니다.

중요합니다.

HTML 요소의 속성(Attributes)에는 전역 속성(Global Attributes)과 고유 속성(Unique Attributes)이 있습니다.
전역 속성(Global Attributes)은 모든 HTML 요소에서 사용할 수 있는 속성이며, 어느 HTML 요소에도 적용될 수 있습니다.
반면에 고유 속성(Unique Attributes)은 특정한 HTML 요소에서만 사용할 수 있는 속성입니다. 이 속성들은 해당 요소의 특정한 기능을 제어하거나 설정하는 데 사용됩니다.

이 페이지에서는 전역 속성(Global Attributes)에 대한 내용만 다루고 있으며,
고유 속성(Unique Attributes)에 대한 설명은 해당 요소(Element)를 설명하는 페이지에서 확인할 수 있습니다.

class

하나 이상의 클래스를 지정하여 여러 요소를 그룹화하거나 스타일을 적용하는 데 사용되며, JavaScript에서 요소를 선택하고 조작하는 데 사용됩니다.
한 페이지 내에서 같은 className을 사용할 수 있으며, 한 요소에 공백으로 구분하여 여러 className을 지정할 수 있습니다.
소문자로 시작하며, 특수문자는 언더스코어(_)와 하이픈(-)만 사용할 수 있습니다.

									<div class="container main_container global-attributes">
										<!-- contents -->
									</div>

id

id 속성은 HTML 요소를 고유하게 식별하거나 스타일을 적용하는 데 사용되며, JavaScript에서 요소를 선택하고 조작하는 데 사용됩니다.
문서 내에서 유일해야 하며, 동일한 id를 여러 요소에 적용할 수 없습니다.
소문자로 시작하며, 특수문자는 언더스코어(_)와 하이픈(-)만 사용할 수 있습니다.

									<div id="unique-id">
										<!-- contents -->
									</div>

style

인라인 CSS 스타일을 직접 요소에 적용하여 특정 요소에 스타일을 지정합니다.
CSS 우선 순위에서는 1순위에 해당합니다.

									<div style="font-size: 16px; color: red;">
										<!-- contents -->
									</div>

title

요소에 대한 추가 정보를 제공하거나 툴팁으로 표시될 텍스트를 지정합니다.

									<a href="#" title="링크 설명">링크 텍스트</a>

lang

ISO 639 언어 코드로 요소의 언어를 지정합니다. 검색 엔진은 이 정보를 사용하여 페이지를 색인화하고 사용자에게 적절한 언어로 표시합니다.
ISO 639는 언어를 식별하기 위한 국제 표준 코드이며, 각 언어에 고유한 약어를 부여하여 다국어 환경에서 텍스트의 언어를 명확하게 식별하고 처리하는 데 사용됩니다.
예를 들어, 영어는 "en", 한국어는 "ko"로 표시됩니다.

									<html lang="ko">

tabindex

요소의 탭 순서를 지정합니다. 사용자가 탭 키를 눌렀을 때 요소를 포커스하는 순서를 결정합니다.
tabindex 속성은 정수 값으로 지정됩니다.
양의 정수 값은 요소를 탭 순서에 포함시키고 순서에 따라 포커스가 이동하도록 합니다.
0 값은 요소를 탭 가능하게 만들지만 순서에 따라 포커스 이동이 일어나지 않습니다.
음의 값은 요소를 탭 순서에서 제외시킵니다.
tabindex 속성은 접근성을 높이고 사용자 경험을 향상시키기 위해 사용되며, 특정 요소의 키보드 탐색 가능성을 조정하거나 요소 간의 탐색 순서를 제어하는 데 사용됩니다.
하지만 tabindex 속성을 무분별하게 사용하면 키보드 탐색이 복잡해지고 요소 간의 포커스 이동이 예상치 못한 순서로 이루어질 수 있으며, 유지보수가 어려워집니다. 따라서 tabindex 속성은 꼭 필요한 경우에만 사용해야 합니다.

									<div tabindex="1">포커스가 가능하게 적용 / 첫 번째 포커스</p>
									<div tabindex="2">포커스가 가능하게 적용 / 두 번째 포커스</p>
									<div tabindex="-1">포커스 이동 제외</div>
									<div tabindex="0">포커스가 가능하게 적용 / 기본 탭 순서 유지</div>

hidden

hidden 속성은 HTML 요소를 화면에서 숨기는 데 사용되며, CSS의 display: none;과 유사한 기능을 합니다. hidden 속성을 사용하면 요소는 화면에 렌더링되지 않지만, 여전히 다른 요소와 상호 작용하며 스크린 리더 등의 보조 기술에서도 감지됩니다
hidden> 속성은 주로 JavaScript를 사용하여 동적으로 요소를 숨기거나 나타내는 데 사용됩니다.
hidden 속성은 'boolean attribute(불리언 속성)'입니다.
속성 값이 명시되지 않아도 기본적으로 true로 간주되며, hidden 속성이 존재하는 것만으로도 해당 요소가 숨겨진 상태로 처리됨을 의미합니다.

									<div hidden>이 요소는 숨겨집니다.</div>

contenteditable

contenteditable 속성은 HTML 요소를 사용자가 직접 수정 가능한 상태로 만들어주는데, 마우스 클릭 또는 키보드 입력을 통해 텍스트를 편집할 수 있게 합니다.
이는 텍스트 편집기(<textarea>)와 유사한 동작을 제공합니다.
contenteditable 속성은 다양한 HTML 요소에 적용할 수 있으며, <div>, <p>, <span>, <section> 등과 같은 블록 수준 요소나 <a>, <em>, <strong>과 같은 인라인 요소 등에 적용할 수 있습니다.
요소에 contenteditable 속성이 지정되면 해당 요소 내부의 모든 텍스트와 하위 요소가 편집 가능한 상태가 됩니다.

									<div contenteditable="true">
										이 내용은 사용자에 의해 편집 가능합니다.
									</div>

data-*

data-* 속성은 HTML 요소에 사용자 정의 데이터를 저장하는 데 사용됩니다. 이를 통해 JavaScript로 해당 데이터를 읽거나 변경할 수 있으며, CSS 선택자로도 이 데이터에 접근할 수 있습니다. 주로 요소를 선택하고 상호작용하는 데 활용됩니다.
data-* 속성은 개발자가 지정한 이름으로 구성된 임의의 접두사를 가지며, HTML 요소에 문자열 값만을 저장할 수 있습니다.

									<div id="content" data-name="uxkm" data-version="1.2"></div>

									<style>
										[data-name] 또는 [data-name="uxkm"] {
											/* style 정의 */
										}
									</style>

									<script>
										const product = document.getElementById('product');
										const productId = product.dataset.name; // "uxkm"
										const productName = product.dataset.version; // "1.2"
									</script>

draggable

draggable 속성은 HTML5 속성으로 HTML 요소가 드래그 가능한지 여부를 지정하는 데 사용됩니다. 이 속성을 사용하여 사용자가 요소를 드래그하여 새 위치로 이동하거나 다른 목적지로 드래그할 수 있는지를 결정할 수 있습니다.
또한 JavaScript를 사용하여 드래그하는 동작에 대한 추가적인 제어를 할 수도 있습니다.

draggable 속성에는 두 가지 값이 있습니다.

true: 요소를 드래그할 수 있습니다.
false: 요소를 드래그할 수 없습니다.

									<div draggable="true">
										이 요소는 드래그 가능합니다.
									</div>

dir

dir 속성은 HTML 요소의 텍스트 방향(글쓰기 방향)을 지정하는 데 사용됩니다. 이 속성은 주로 언어가 다른 부분이 섞여 있는 다국어 웹 페이지에서 사용됩니다.
dir 속성을 사용하여 텍스트의 방향을 명시적으로 지정함으로써 웹 페이지에서 다국어 텍스트를 올바르게 표시할 수 있습니다.

dir 속성에는 세 가지 값이 있습니다.

ltr (Left-to-Right): 텍스트가 왼쪽에서 오른쪽으로 흐르는 언어를 나타냅니다. 한국어 및 대부분의 서양 언어(영어, 프랑스어, 스페인어 등)가 이 방향을 사용합니다.
rtl (Right-to-Left): 텍스트가 오른쪽에서 왼쪽으로 흐르는 언어를 나타냅니다. 주로 아랍어, 히브리어, 페르시아어와 같은 언어가 이 방향을 사용합니다.
auto: dir 속성의 기본값으로, 텍스트의 방향을 자동으로 결정하도록 브라우저에게 위임하는 역할을 합니다.

									<div dir="ltr | rtl | auto">
										<!-- contents -->
									</div>