[HTML] HTML의 빈 요소(Empty Element)?

Front-End/HTMLL & CSS

xtring 2021. 1. 29. 11:36

HTML 요소의 종류는 정말 많습니다. 그 중 content를 가질 수 없는 요소를 빈 요소(Empty element or Self-Closing element)라고 합니다. 말 그대로 요소 사이에 Content 없이 동작하는 요소라는 의미죠. 😃

따라서 빈 요소들은 어트리뷰트만을 가집니다. 아래 예시를 볼까요?

React 프로젝트를 시작하면 자동으로 생성되어있는 meta 태그와 link 태그 입니다. 이 처럼 빈 요소가 사용될 때는 Content를 생략하기 때문에 <TagName />의 형태를 보입니다.

빈 요소 중 대표적인 요소는 아래와 같습니다.

<br /> 텍스트 안에 줄바꿈(*Carriage Return)을 생성합니다.
<hr /> 가로방향의 Division Line를 생성합니다.
<img /> 이미지를 생성합니다.
<input /> 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. 다양한 종류의 입력 데이터 유형이 있습니다.
<link /> 현재 문서와 외부 리소스의 관계를 명시합니다.
<meta /> <base>, <link>, <script>, <style>, <title>과 같은 다른 메타 관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다.

*Carriage Return: 현재 위치를 나타내는 커서를 맨 앞으로 이동시킨다는 뜻.

📗Ref