웹 개발을 위한 HTML 가이드 3편 - 태그의 유형

웹 개발을 위한 HTML 가이드 3편 시작합니다. 이번 글의 주제는 태그의 유형에 대한 이야기입니다. 태그의 특징이라고도 할 수 있겠습니다. HTML에서 태그는 크게 두가지의 유형으로 나뉘게 됩니다. 어떤 유형인가 하면 태그의 성질을 말하는 것이라고 보면 됩니다. 모든 태그들은 후술할 두가지의 유형 중에서 반드시 한가지의 유형으로 분류됩니다.

그 유형들이 무엇인가 하면! 블럭 태그와 인라인 태그 혹은 블럭 요소와 인라인 요소라고 부릅니다. 이번 글에서 다루는 블럭 태그와 인라인 태그는 태그의 이름이 아니라 성질, 특징, 유형이며 이걸 잘 파악하고 있어야지만 태그들을 적재적소에 잘 활용할 수 있습니다.

중요한 것이지만 그렇게 어려운 개념은 아닙니다. 그러니 혹시라도 벌써부터 어려워서 못따라가면 어떡할까 같은 생각은 접어두셔도 됩니다! 혹 이해가 가지 않는다고 해도 여러번 보다보면 이해가 될 겁니다. 그럼 이번 글도 저와 함께 달려 봅시다.

블럭 태그(블럭 요소)

블럭 태그, 정확히는 블럭 레벨 태그는 영어권에선 Block-level Elements라고 표현합니다. 이 가이드에서는 편하게 줄여서 블럭 태그라고 하겠습니다. 이 블럭 태그의 특징은 브라우저 화면의 가로 너비 전체를 차지한다는 것에 있습니다.

겉보기에 따라서는 줄바꿈이 된다고도 이해할 수 있습니다. 대표적인 블럭 태그들은 div태그와 p태그가 있습니다. 아래의 코드와 이미지처럼 나타나게 됩니다. 이 두가지 태그가 뭔지 지금은 몰라도 됩니다. 어떤 일이 일어날지만 지켜보시면 되겠습니다.

<div>IU - Blueming</div><div>IU - LILAC</div>

크게 보기 (새 창)

이런 모양이 나타나게 됩니다. 위에서 아래로 쌓이는 것을 볼 수 있습니다.

처음부터 이렇게 말하면 이해가 안되겠죠. 이렇게 생각을 해볼까요? 위의 블럭 태그의 예시 코드는 div태그를 두개를 이어서 적었습니다. 보통 이렇게 하면 이어서 나올 것이라고 생각을 합니다. 하지만 이어서 나오지 않았죠. 디자인을 배제하고 한 번 볼까요?

크게 보기 (새 창)

이렇게 나타납니다. 즉 HTML에서는 에디터에서 줄바꿈을 한다고 브라우저에서도 적용되는 게 아니라 태그들의 특성에 따라서 결정이 된다고 이해하시면 됩니다.

인라인 태그(인라인 요소)

영어권에서는 Inline Elements라고 부르는 인라인 태그들은 브라우저의 가로 너비 전체를 차지하는 것이 아니라 자신들만의 영역을 차지하는 태그들입니다. 줄바꿈이 되지 않고 계에에속 옆으로 나열된다고 보시면 됩니다.

인라인 태그 유형인 태그들은 a태그 span태그 등등이 있습니다.

<span>IU - Blueming</span>
<span>IU - LILAC</span>

이번에는 어떻게 나올지 한 번 봅시다. 에디터 상에서 엔터를 통해서 줄바꿈을 했습니다. 결과는 어떨까요?

크게 보기 (새 창)

이렇게 나타납니다. 줄바꿈이 되지 않았죠? 이어서 적지 않았는데도 이어서 나타나게 됩니다. 이게 바로 인라인 태그의 특성입니다. 즉, 인라인 태그들은 자신들의 실질적인 내용물에 따른 면적을 차지한다는 것입니다.

또 한가지의 특징이 있는데 인라인 태그의 안에는 블럭 태그가 들어갈 수 없다는 점입니다. 이 말이 어떤 의미인지는 지금 모를겁니다. 하지만 추후에 이해하게 될테니 걱정은 하지 않으셔도 됩니다. 중요한 것은 인라인 태그의 안에는 블럭 태그가 들어가지 않는다. 라는 것입니다.

태그의 유형이자 특징인 블럭 태그와 인라인 태그에 대해 알아봤습니다. 기억해야 할 것은 두가지 정도입니다. 블럭 태그는 위에서 아래로 나열한다. 인라인 태그는 왼쪽에서 오른쪽으로 나열한다. 라는 것 말입니다. 또한 블럭 태그는 내용과 상관 없이 가로 너비 전체를 차지한다는 것과 인라인 태그는 내용에 따라 너비를 가진다는 것. 이것을 이해했다면 이번 글의 목표는 달성입니다.

이번 가이드에서 다룬 내용은 중요한 내용입니다. 이러한 특성을 모르고 레이아웃을 건드리게 되면 상당히 애를 먹을 것이기 때문이죠. 그러니 여러분들은 애를 먹을 가능성이 조오오금은 줄어들었다고 보시면 됩니다!

물론 앞으로 CSS를 익히게 되면 블럭 태그은 인라인 태그든 다 같은 형태로 조정할 수 있게 됩니다. 하지만 인라인 태그와 블럭 태그로 굳이 나뉘어진 이유는 존재합니다. 인위적으로 태그들의 특성을 바꾸기보다 주어진대로 사용하는 것이 더 좋을 수도 있습니다.

이번 가이드는 여기까지 입니다. 다음 가이드에서는 여러가지의 태그를 사용해야만 하는 HTML에서 태그 간의 관계에 대해 다뤄보도록 하겠습니다.