단일 요소 또는 빈 요소 - by. UXKM

2024-07-30

요약 설명
단일 요소 또는 빈 요소(empty elements)는 HTML에서 독립적으로 존재할 수 있는 하나의 HTML 태그를 의미합니다. 이러한 요소는 자체적으로 의미를 가지며, 다른 태그와 중첩되지 않고 단일로 사용될 수 있습니다.
대부분의 단일 요소는 빈 태그(empty tag)로, 내용(content)이 없고 스스로 닫히는 특징이 있습니다.

단일 요소의 종류

HTML에서 자주 사용되는 단일 요소의 종류는 다음과 같습니다.

<br> (Line Break)

텍스트 또는 인라인 요소에 대해 시각적인 줄바꿈이 필요할 때 사용되며, 일반적으로 단락을 구분하기 위해 사용되지는 않습니다.

								<p>
									안녕하세요.<br>
									UXKM 입니다.
								</p>

[br 요소] 자세한 설명 보기

<hr> (Horizontal Rule)

HTML에서 시각적인 수평선을 삽입하는 데 사용됩니다. 여러 줄의 텍스트를 구분하거나 섹션을 나눌 때 유용하게 쓰입니다.
기본적으로 스타일이 적용되지 않고, CSS를 사용하여 스타일을 추가할 수 있으며, 주로 단락의 변경, 콘텐츠의 구분, 주제의 전환 등을 나타내는 데 사용됩니다.

<img> (Image)

웹 페이지에 이미지를 삽입하는 데 사용됩니다. src 속성으로 이미지 파일의 경로를 지정하고, alt 속성으로 이미지의 대체 텍스트를 지정합니다.

								<img src="image.jpg" alt="이미지 설명">

[img 요소] 자세한 설명 보기

<input> (Input Field)

사용자로부터 입력을 받는 필드를 생성하는 데 사용됩니다. type 속성으로 입력 유형을 지정할 수 있습니다.
(예: text, password, radio, checkbox 등)

								<form>
									<input type="text" name="username" placeholder="이름을 입력하세요.">
								</form>

[input 요소] 자세한 설명 보기

<meta> (Metadata)

문서에 대한 메타데이터를 제공하는 데 사용됩니다. 일반적으로 <head> 요소 안에 위치합니다.

								<meta charset="UTF-8">
								<meta name="viewport" content="width=device-width, initial-scale=1.0">

[meta 요소] 자세한 설명 보기

<link> (Link to External Resource)

외부 리소스(예: CSS 파일)를 문서에 연결하는 데 사용됩니다. 주로 <head> 요소 안에 위치합니다.

								<link rel="stylesheet" href="styles.css">

<base> (Base URL)

모든 상대 URL에 대한 기본 URL을 설정하는 데 사용됩니다. 주로 <head> 요소 안에 위치합니다.

								<head>
									<base href="https://www.example.com/">
								</head>

<source> (Media Source)

<video> 또는 <audio> 요소 안에서 사용할 수 있는 다양한 미디어 파일을 지정하는 데 사용됩니다.

								<!-- video -->
								<video>
									<source src="movie.mp4" type="video/mp4">
									<source src="movie.ogg" type="video/ogg">
									지원하지 않는 브라우저입니다.
								</video>

[source 요소] 자세한 설명 보기

<area> (Image Map Area)

이미지 맵에서 클릭 가능한 영역을 정의하는 데 사용됩니다. shape, coords, href 등의 속성을 통해 정의할 수 있습니다.

								<img src="planets.jpg" usemap="#planetmap" alt="행성 이미지">
								<map name="planetmap">
									<area shape="rect" coords="34,44,270,350" alt="행성1" href="planet1.html">
									<area shape="circle" coords="120,200,75" alt="행성2" href="planet2.html">
								</map>

[area 요소] 자세한 설명 보기

단일 요소의 특징

단일 요소는 HTML 문서에서 특정한 기능을 수행하며, 주로 속성을 통해 설정됩니다. 이러한 특징 덕분에 단일 요소는 웹 페이지를 보다 효율적이고 구조적으로 명확하게 만드는데 중요한 역할을 합니다.

자체 닫힘

단일 요소는 자체적으로 닫히며 별도의 종료 태그가 필요하지 않습니다.
또한, 일부 단일 요소는 doctype에 따라 슬래시(/) 사용 여부가 달라집니다.

								<!-- html5 (기본) -->
								<br>
								<img src="image.jpg" alt="이미지 설명">

								<!-- xhtml -->
								<br />
								<img src="image.jpg" alt="이미지 설명" />

내용 없음

단일 요소는 내용(content)을 가지지 않습니다. 이 요소들은 속성(attributes)을 통해 필요한 정보를 전달합니다.

								<!-- 내용(content)을 가지는 요소는 반드시 닫는 태그가 있음 -->
								<p>...content...</p>

								<!-- 단일 요소는 닫는 태그가 없기 때문에 내용(content)을 감싸는 마크업 구조를 가질 수 없음 -->
								____error__<img src="image.jpg" alt="이미지 설명">...content...</img>__error____ <!-- 잘못된 예 -->
								<img src="image.jpg" alt="이미지 설명"> <!-- 올바른 예 -->

속성으로 기능 지정

단일 요소의 기능과 동작은 주로 속성을 통해 정의됩니다.
아래 예제에서 <link> 요소는 속성을 통해 외부 스타일시트를 문서에 연결하고, <source> 요소는 속성을 통해 비디오 소스를 지정합니다.

								<!-- link -->
								<link rel="stylesheet" href="styles.css">

								<!-- source -->
								<source src="video.mp4" type="video/mp4">

DOM 구조의 단순화

단일 요소는 DOM 트리를 단순하게 유지합니다. 불필요한 중첩을 피하고, 명확한 구조를 유지합니다.

								<meta charset="UTF-8">
								<base href="https://www.example.com/">