-
<div>는 html 속의 수많은 엘리먼트들(h1, h2, p, img 등)에 대한 논리적 구분 및 그룹을 위해 존재하는 엘리먼트입니다. 이제 곧 엘리먼트들의 레이아웃과 포지셔닝에 관한 내용에 대해 배우게 될 텐데요... 만약 논리적으로 같은 그룹에 속하는 엘리먼트들을 하나의 그룹으로 묶을 수 없다면 각각의 엘리먼트들을 일일이 모두 위치를 잡아주어야 하므로 매우 불편하겠죠? div 엘리먼트를 잘 활용하면 엘리먼트들의 레이아웃과 포지셔닝을 쉽게 할 수 있을 뿐만 아니라 구조적으로도 깔끔한 html 문서를 작성할 수 있게 됩니다. 그럼 div의 사용법을 한번 살펴보겠습니다.
위 에서 보듯이 div 역시 다른 일반적인 블록 엘리먼트들과 마찬가지 방법으로 사용하면 됩니다. 위 HTML 문서의 결과물은 다음과 같습니다.
<span>은 문자열 또는 인라인 엘리먼트들을 위한 <div>라 고 생각하면 됩니다. <div> 안에는 블록 엘리먼트들이 들어가 있다면 <span> 안 에는 문자열이나 인라인 엘리먼트들이 들어간다는 것이 차이점입니다. 그럼 <span>은 언제 필요할까요? 여러분이 만드려는 웹 페이지에서 만약 사람 이름은 본문의 다른 글자들과는 다른 색으로 표시하고 싶다면 어떻게 해야 할까요? 이런 경우 필요한 것이 바로 <span> 입니다. 사람 이름이 나오면 그 앞 뒤를 <span class="name">이름</span>으로 묶어주고 CSS에서 .name에 대한 스타일을 정해주면 본문의 다른 글자들은 영향을 받지 않고 있고 오직 <span>으로 name이라는 class를 지정해준 이름들에만 스타일이 적용되는 것입니다. 그럼 이름 앞 뒤에 <span> 대신 <div>를 쓰면 안되느냐 할 수도 있겠지만 <div>는 블록 엘리먼트이기 때문에 그 속의 이름이 하나의 블록으로 간주되어 줄바꿈이 되어버리므로 우리가 원하는 바를 이룰 수 없습니다.
