들어가기 전에

웹이 발전하면서 현재 웹페이지는 문서 형태보다는 시각적으로 정보를 표현하는 방향으로 많이 발전했습니다.

HTML은 애초 문서를 위한 언어였기 때문에, 대부분의 태그들이 문서에 적합한 의미를 갖고 있는데요.

이런 태그들로는 현재의 다양한 콘텐츠를 표현하기에는 부족한 부분이 있습니다.

새로운 콘텐츠를 표현하기 위해 적합한 의미를 갖는 태그들이 생기기도 하는데요.

하지만 콘텐츠를 표현하기에 적합한 태그가 없는 경우에는 주로 의미 없는 태그들을 사용합니다.

또, 문서의 스타일이나 데이터 전송 등과 같은 부가적인 기능을 위해서도 종종 사용됩니다.

이 태그들에 대하여 살펴보겠습니다.

핵심키워드

• div
• span
  

학습하기 

의미가 없는 컨테이너 요소

태그 자체에 아무 의미가 없으며, 단순히 요소들을 묶기 위해 사용되는 태그입니다.

스타일을 주거나 서버에 보내는 데이터를 담기 위한 용도로 이런 의미 없는 요소들이 사용됩니다.

이런 의미 없는 태그의 사용빈도는 매우 높습니다.

그 이유는 html 태그들은 문서를 웹에 나타내기 위해 제작되어 기본적으로 문서에

최적화되어있는의미를 지니는데,

현재 웹의 형태는 문서 형태에서 많이 벗어났기 때문입니다.

다행히 HTML 버전이 업그레이드되면서 웹에 알맞은 태그들이 많이 생겼습니다.

가장 대표적으로 많이 쓰이는 의미가 없는 태그는 <div>, <span>입니다.

<div>태그와 <span>태그

div(division) 태그는 블록 레벨 태그입니다.

블록 레벨 요소는 기본적으로 한 줄을 생성해서 내용을 표현합니다.

반면, span 태그는 인라인 레벨 태그입니다.

인라인 레벨 요소들은 블록 레벨 요소의 한 줄 안에서 표현되는 요소들입니다.

이전에 배운 <p>는 블록 레벨 태그이며,

그 안에서 텍스트를 꾸며주는 <b>, <i>, <u>, <s>는 모두 인라인 레벨 태그입니다.

<div>
    <span>Lorem</span> ipsum dolor sit.
</div>

<div>, <span>는 모두 아무 의미가 없으므로 실제 브라우저도 별다른 스타일을 적용하지 않습니다.

참고링크