[DOM] - Div 와 Span

Block level Element

- 일반적으로, block은 다른 block과 inline를 포함한다.
- blcok은 inline의 상위구조이다.
- 일반적인 속성의 blcok은 새로운 줄을 만든다.
  (줄 단위의 공간값을 가진다.)
- blcok 태그들은 성격에 따라 Physical, Logical, Group, User-input로 분류가 된다.
    + <p>는 Physical Block 태그이다.
    + <blockquote>, <opre>, <listing>, <xmp>, <plaintext>, <h1>~<hy7>, <cite>는
       Logicl Block 태그이다.
    + <div>는 Grouping Block 태그이다.
    +<form>, <fieldset> 은 User-input Block 태그 이다.



Inline level Element

- text level element라고도 부른다.
- blcok의 내부에 위치하며, 다른 inline과 data, object를 포함한다.
- blcok의 하위구조이며, data, object의 상위구조이다.
- 일반적인 속성의 inline은 새로운 줄을 생성하지 않고, 줄내부에 위치한다.
- blcok 태그들은 성격에 다라 Physical, Logical, Group, Functional 로 분류된다.
   + <font>, <b>, <i>, <u>, <sub>, <sup>, <big>, <small>, <bdo>, <tt>는
      Physical inline 태그 이다.
   + <abbr>, <acronym>, <dfn>, <adress>, <q> , <code>, <kbd>, <samp>, <var>,
     <del>, <ins>, <em>, <string>는 Logical inline 태그이다.
  + <span>은 Grouping inline 태그이다.
  + <a> 는 Functional 태그이다.

Object 개념

Object 개념은 w3c.org에서 따로 규정된 것은 없다.
단, w3c.org의 표준의 여러 규약과 규정, 기준을 종합해보면
사람들이 개별적으로 인식하는 <img>, <applet>, <embed>와 문자 하나의 단위는
같다는 개념이다. IE나 NC에서 시각적으로 보여주는 속성값과 위치값은 모두 같은
단위로서 연산을 하는 것 이다. 또한, 구조적 코딩을 함에 있어서 이들을 같은 object,
한개의 개별적인 단위로서 인식을 해야하며, 논리적으로 이와 같이 인식을 하면 더욱
이해가 쉽다.

div 엘리먼트는 문서의 구조화를 도와주는 엘리먼트입니다. 많은 사람이 div 엘리먼트는 의미가 없다고 오해합니다. 하지만 div는 division의 약자로 문서를 의미있는 영역으로 나누어주는 역활을 합니다. 따라서 문서의 본문 영역을 div로 감싸고 mainContent라는 ID를 부여하면 문서를 구조화하고 의미를 부여한 것이라 할 수 있습니다.

불필요한 마크업을 최대한 줄이려면 작성하려는 내용에 해당하는 엘리먼트가 존재하지 않을 경우에만 div를 사용해야 합니다. 예를 들어 다음과 같은 내비게이션 메뉴바를 위한 리스트는 div를 추가로 감쌀 필요가 없습니다.

[code]<div id="mainNav">
    <ul>
        <li>홈</li>
        <li>회사소개</li>
        <li>연락처</li>
    </ul>
</div>
[/code]

위 코드에서 사용된 div를 빼고 대신 리스트에 ID를 적용하기만 하면 됩니다.

[code]<ul id="mainNav">
    <li>홈</li>
    <li>회사소개</li>
    <li>연락처</li>
</ul>
[/code]

필요이상으로 div를 많이 쓰는 걸 디비투스(divitus)라고 합니다. 이 역시 코드가 제대로 구조화되지 않고 너무 복잡하게 작성됐다는 신호라고 보면 됩니다. CSS를 처음 접한 경우 기존의 테이블 구조를 그대로 div로 대치해보려고 하는 사람들이 있습니다. 하지만 이건 불필요한 기존 태그를 다른 태그로 바꿔 쓰는 데 지나지 않습니다. 이런 방식대신 div는 관련 항목을 묶는 데 써야 합니다. 물론 모양이나 레이아웃이 아니라 의미나 기능에 기반해서 묶어야 하겠죠.

div는 블록 레벨 엘리먼트를 묶는 목적으로 사용하고, 인라인 엘리먼트를 지정하거나 묶을 때는 span을 사용합니다.

[code]<h2>책 소개</h2>
<p> 이 책은 <span class="author">앤디 버드</span>가 작성했으며 <span class="date">2005년 3월 22일</span>에 처음 출간 됐습니다.</p>
[/code]

인라인 엘리먼트를 여러 개 묶는 경우가 일반적으로 흔치 않기 때문에 span은 div보다 적게 사용됩니다. 따라서 이미지 대치 기법(image replacement)같은 효과를 사용할 때 스타일을 지정하기 위한 목적으로 span이 사용되는 것을 볼 수 있습니다.

최대한 깔끔하고 의미를 살린 코드를 유지하는 것이 최종 목표이긴 하지만, 때때로 화면에 원하는 모양을 표시하기 위해서 의미상으로 불필요한 div나 span을 추가해야만 하는 상황을 만나게 됩니다. 이런 경우가 일어나더라도 지나치게 신경을 쓰지는 않길 바랍니다. 현상황은 과도기적인 측면이 있고 CSS3가 나오게 되면 좀더 좋은 기능을 사용할 수 있게 되리라고 봅니다. 그 때까지는 이론적인 측면보다는 실제 적용이 앞설 수밖에 없습니다. 여기서 중요한 건 적절하게 타협을 하는지 타당한 이유가 있는지 스스로 판단할 수 있는 능력입니다.