xtring.dev

[HTML] HTML의 빈 요소(Empty Element)? - HTML 파헤치기 본문

Front-End/HTMLL & CSS

[HTML] HTML의 빈 요소(Empty Element)? - HTML 파헤치기

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

developer.mozilla.org/ko/

poiemaweb.com/html5-syntax

 

반응형
Comments