HTML의 구조
HTML은 다양한 태그(tag)로 구성되어 있습니다.
HTML을 이루는 태그들은 모여서 요소(element)를 형성합니다.
요소는 태그와는 다른 개념으로, 태그로 구성된 덩어리가 요소라고 보면 되겠습니다.
그리고 이 덩어리는 데이터, 멀티미디어, 글자 등등 많은 것을 포함할 수 있습니다.
그러면 태그는 무엇인가 살펴보겠습니다.
tag의 형태
일반 태그
<여는태그>내용</닫는태그>
태그의 기본 형태입니다.
기본적으로 <> (꺽쇠, 또는 Angle Bracket) 안에 태그의 이름을 넣고, 여는태그와 닫는 태그로 어떤 데이터를 감싸거나 마무리하는 형태가 됩니다.
앞쪽에 위치하는 태그는 여는 태그라 하고, 뒤쪽에 막음질하는 태그는 닫는 태그라고 합니다.
대부분의 태그가 이런 형식을 따릅니다.
그리고 닫는 태그는 꺽쇠의 가장 앞 쪽에 /(슬래시)를 붙여줍니다.
그리고 여는 태그와 닫는 태그 사이에는 또 다른 태그나 글자 등이 들어갈 수 있습니다. 이를 감싼다(wrapping)고 표현합니다.
후에 부모-자식 관계에서 더 자세하게 설명하겠습니다.
태그의 종류는 워낙 많아서 이 포스트에서 한 번에 다 설명드리긴 어렵고, 용도에 따라 포스팅을 나눠 설명드리겠습니다.
빈 태그
그런데 위 형식에 벗어나는 태그 형식이 있습니다.
<태그명 />
위처럼 여는 태그만 존재하고 닫는 태그 없이 끝을 맺어버리는 태그들이 있습니다.
이런 태그를 빈 태그 (empty tag)라고 부릅니다.
빈 태그는 닫는 태그가 존재하지 않습니다.
HTML5 기준으로 빈 태그에 /(슬래시)는 있어도 되고 없어도 됩니다.
<img>도 <img />도 <img/>도 다 됩니다!하지만 저는 일반 태그에서 닫는 태그를 빼먹는 실수 방지 + /가 필수인 문법(JSX, XHTML 등..) 사용시 헷갈리지 않기 위해
<img />위처럼 작성하는 것을 권장합니다.
(정답은 아닙니다. 논쟁의 여지가 있기에, 개인의 판단에 맡깁니다.)
빈태그의 종류로는
<img> <input> <link> <meta> <br> <hr> ...등이 있습니다.
열고 닫을 수 없으니 당연히 다른 태그를 감쌀 수 없습니다.
따라서 부모-자식관계에서 부모 역할을 할 수 없습니다.
