<br>
(Line Break)
텍스트 또는 인라인 요소에 대해 시각적인 줄바꿈이 필요할 때 사용되며, 일반적으로 단락을 구분하기 위해 사용되지는 않습니다.
단일 요소 또는 빈 요소 - by. UXKM
요약 설명단일 요소(또는 빈 요소, self-closing element)는 내용을 포함하지 않고 열기 태그만으로 의미를 가지는 HTML 요소를 말합니다.
이러한 요소는 종료 태그 없이도 독립적으로 동작하며, 일반적으로 브라우저가 자체적으로 처리하는 기능이나 시각적 표시를 위한 간단한 태그입니다.
대표적으로<br>,<img>,<hr>,<input>,<meta>,<link>등이 있으며, HTML5에서는 슬래시(/) 없이<br>,<img>처럼 작성해도 유효합니다. 단일 요소는 자체적으로 닫히기 때문에 중첩 구조가 필요 없는 경우에 사용됩니다.
단일 요소의 종류
<hr>
(Horizontal Rule)
HTML에서 시각적인 수평선을 삽입하는 데 사용됩니다.
여러 줄의 텍스트를 구분하거나 섹션을 나눌 때 유용하게 쓰입니다.
기본적으로 스타일이 적용되지 않고, CSS를 사용하여 스타일을 추가할 수 있으며,
주로 단락의 변경, 콘텐츠의 구분, 주제의 전환 등을 나타내는 데 사용됩니다.
<img>
(Image)
웹 페이지에 이미지를 삽입하는 데 사용됩니다. src 속성으로 이미지 파일의 경로를 지정하고, alt 속성으로 이미지의 대체 텍스트를 지정합니다.
<input>
(Input Field)
사용자로부터 입력을 받는 필드를 생성하는 데 사용됩니다. type 속성으로 입력 유형을 지정할 수 있습니다.
(예: text, password, radio, checkbox 등)
<meta>
(Metadata)
문서에 대한 메타데이터를 제공하는 데 사용됩니다. 일반적으로 <head> 요소 안에 위치합니다.
<link>
(Link to External Resource)
외부 리소스(예: CSS 파일)를 문서에 연결하는 데 사용됩니다. 주로 <head> 요소 안에 위치합니다.
<base>
(Base URL)
모든 상대 URL에 대한 기본 URL을 설정하는 데 사용됩니다. 주로 <head> 요소 안에 위치합니다.
<source>
(Media Source)
<video> 또는 <audio> 요소 안에서 사용할 수 있는 다양한 미디어 파일을 지정하는 데 사용됩니다.
<area>
(Image Map Area)
이미지 맵에서 클릭 가능한 영역을 정의하는 데 사용됩니다. shape, coords, href 등의 속성을 통해 정의할 수 있습니다.
단일 요소의 특징
요약 설명단일 요소(Self-closing element)는 시작 태그만 존재하고 종료 태그 없이 스스로 닫히는 태그로, 내용을 포함하지 않으며 주로 속성을 통해 기능이나 표시 방식이 정의됩니다.
자체 닫힘
단일 요소는 자체적으로 닫히며 별도의 종료 태그가 필요하지 않습니다.
또한, 일부 단일 요소는 doctype에 따라 슬래시(/) 사용 여부가 달라집니다.
내용 없음
단일 요소는 내용(content)을 가지지 않습니다. 이 요소들은 속성(attributes)을 통해 필요한 정보를 전달합니다.
속성으로 기능 지정
단일 요소의 기능과 동작은 주로 속성을 통해 정의됩니다.
아래 예제에서
<link> 요소는 속성을 통해 외부 스타일시트를 문서에 연결하고,
<source> 요소는 속성을 통해 비디오 소스를 지정합니다.
DOM 구조의 단순화
단일 요소는 DOM 트리를 단순하게 유지합니다. 불필요한 중첩을 피하고, 명확한 구조를 유지합니다.