빈 태그(Empty tag)

우리가 지금껏 살펴본 태그들은 열리는 태그와 닫히는 태그가 세트로 존재를 하고, 그 세트를 하나의 요소라고 한다고 살펴봤다.

하지만 meta 태그나 img 태그를 보면 열리는 태그만 존재하고 닫히는 태그는 존재하지 않는데,

내용(Content)이 없다고 해서 빈(Empty) 태그라고 부른다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
  <link rel="stylesheet" href="./main.css">
</head>
<body>
  <img src="" alt="">
</body>
</html>
Colored by Color Scripter

cs

예를 들면 위와 같은 html 코드에서 <meta> 태그나 <img> 태그를 보면 <title></title> 태그와 다르게 태그가 하나만 존재한다.

빈 태그를 작성하는 방식은 크게 두가지로 나뉘는데, 하나는 열리는 태그만 작성하는 방법이고 다른 하나는 열리는 태그 맨 뒤에 슬래시 기호 ( / ) 를 붙이는 방법이다.

두 번째 방법은 닫힌 태그와 비슷하게 생겨서 헷갈릴 수 있지만 닫힌 태그는 태그의 맨 앞에 슬래시 기호가 붙는 반면 빈 태그는 맨 뒤에 슬래시 기호가 붙는다.

지금 대부분이 사용하는 HTML 5버전에서는 두 가지 방법을 모두 지원한다.

어떠한 방식을 사용하던 크게 상관이 없지만 맨 뒤에 슬래시 기호를 붙여줌으로서 빈 태그라는 것을 명확히 표기할 수 있다. 단순히 <태그> 이렇게 빈 태그를 작성하면 만약 해당 태그가 빈 태그라는 것을 인지하지 못하면 닫힌 태그가 어딨는지 찾고있을 가능성이 있다. 그렇기 때문에 맨 뒤에 슬래시 기호를 붙이는 방법을 사용하는 것을 권장한다.

속성, 값

우리는 열리는 태그 부분에 속성과 값을 적용해서 기본적인 태그의 기능에 기능을 더해서 사용할 수 있다.

<img/> 라는 빈 태그만으로는 어떠한 이미지를 넣고 싶은지 알 수가 없다. 그렇기 때문에 속성과 값을 이용해서 이를 표기해줄 수 있다.

여기서 src와 alt가 이미지의 경로와 이미지의 이름을 뜻하는 속성이 되고, "./images/icon.png" 와 "HEROPY"이 각각의 속성에 대한 값이 된다.

빈 태그는 역할만으로 할 수 있는 것이 없기 때문에 대부분의 빈 태그에는 속성과 값을 통해 제 기능을 할 수 있도록 해주어야 한다.

img라는 태그를 작성하고 Tap을 누르면 emmet이 자동적으로 src와 alt를 넣는 칸을 작성해주는 것이 그러한 이유이다.

물론 모든 빈 태그가 그렇다는 것은 아니다. <br> 은 줄바꿈을 해주는 빈 태그인데 <br>은 딱히 속성과 값을 명시해주지 않아도 제 기능을 수행할 수 있다.

728x90

저작자표시

'개발 > HTML, CSS, JS' 카테고리의 다른 글

전역 속성 (0)	2023.01.02
주석 처리 (0)	2023.01.02
HTML 핵심 요소 정리 (0)	2023.01.02
글자와 상자 (1)	2023.01.02
부모요소와 자식요소 (0)	2023.01.02

코북이 🐢 :기록하는 습관

빈 태그(Empty tag)

'개발 > HTML, CSS, JS' 카테고리의 다른 글

티스토리툴바

빈 태그(Empty tag)

'개발 > HTML, CSS, JS' 카테고리의 다른 글

관련글

티스토리툴바