HTML 기초 - 8 | DIV 태그와 SPAN 태그

특별한 기능이 없는 태그

우리는 HTML 기초의 마지막 파트로 아무런 기능도 없는 태그 에 대해서 배워볼 것이다.

아무 기능이 없는 태그라고? 아니 그런 걸 굳이 왜 쓰는 거지?

나도 HTML 까지만 공부했을 때 까지는 이해가 안됐다. 하지만 CSS 를 공부하면서 이 태그들의 필요성이 느껴졌다.

 

HTML 이 건물의 뼈대라고 비유한다면, CSS 는 건물의 인테리어라고 볼 수 있다.

HTML 의 여러 태그들을 이용해 각각 건물에 필요한 역할을 만들어 내고 CSS 로 꾸미는 것이다.

이때 아무런 기능이 없는 태그들이 건물의 벽면 같은 역할을 한다고 생각하자.

 

이제 아무런 기능이 없는 태그인 DIV 태그와 SPAN 태그에 대해 알아보자.

---

DIV 태그

<div></div>

DIV 태그는 Division(나누다) 의 약자로 영역을 나누는 데 사용한다.

 

아래는 이미지(img)영역과 폼(form)영역을 DIV 태그로 나눠보는 예시이다.

<div>
  <img src="image.png" alt="Example">
  <p>Image Example</p>
</div>

<div>
  <form action="#" method="get">
    <label for="nameInput">Name</label>
    <input type="text" id="nameInput" />
    <input type="submit" value="Enter" />
  </form>
</div>

사실 CSS 를 사용하지 않는 이상 DIV 태그가 눈에 보이는 웹페이지의 형태를 바꾸진 않을 것이다. 다만 이런 식으로 태그의 전반적인 기능에 따라 영역을 나누어 레이아웃을 설계하는 데 사용된다고 생각하자.

---

SPAN 태그

<span></span>

SPAN 태그 역시 DIV 태그와 똑같다. 다만 한 가지 다른 점이 있다.

DIV 태그는 줄 바꿈이 일어나지만 SPAN 태그는 줄바꿈이 일어나지 않는다.

(정확하게 설명하자면 CSS 에서 DIV 태그의 display 속성은 block 이지만, SPAN 태그의 display 속성은 inline 이다.)

 

그렇기에 DIV 태그는 보통 영역을 나누어 레이아웃을 구성할 때 사용하고, SPAN 태그는 텍스트를 담는 빈용기 같은 느낌으로 쓰인다.

---

이렇게 HTML 의 기본적인 태그에 대해서는 모두 익혔다. 이제 CSS 만 익히면 웬만한 웹페이지의 형태는 다 따라 할 수 있을 것이다.

 

다음 글에서는 VSCode 에디터의 Emmet 기능 사용방법을 배워봄과 동시에 HTML 복습을 해보며 HTML 기초를 끝내도록 하겠다.