outline

<DIV>택은 <P>, <H>, <B> 같은 다른 택을 여러개 포함할 수 있는 block element 입니다. <SPAN> 택은 inline element로 <DIV> 택 처럼 여러개의 다른 element를 포함할 수 있지만 <DIV> 택이 택 앞과 뒤에서 줄넘김을 하는 반면에 이것은 줄넘김을 하지 않습니다. 이 줄넘김의 차이가 <div>, <span> 택의 차이이고 나머지 용도는 같습니다.

이 두개의 택은 CSS 사용에서 다른 택보다도 유용하게 사용할 수 있습니다. 이 택의 용도가 단순히 다른 여러개의 택을 가질수 있는 택이기 때문에 style을 사용하면서 style을 지원하지 않는 브라우저와의 호환성있는 페이지 작성을 가능하게 합니다. 그리고 일반적인 다른 택은 택 자체의 구문을 가지고 있습니다. 하지만, span이나 div는 자체의 어떤 기능도 없습니다. 그래서 style을 지정시 지정한 것만 듣습니다. <em> 택에 style을 지정시 지정한 style외에도 글자를 이텔릭체로 만들지만 span, div는 어떠한 기능도 없기 때문에 style을 다루는데 편리합니다.

<div style="font-size:12pt; color:red">div 택입니다.</div>

위의 구문은 css를 지원하는 nn4, ie4로 읽으면 글자의 크기가 12pt이고 빨간색의 글자들을 페이지에 출력합니다. 하지만, style을 지원하지 않는 nn3 같은 경우는 단순히 "div 택입니다." 라는 글자를 페이지에 출력합니다.

 .bluebold {color: blue; font-weight: bold; font-style: italic }
 
<DIV class="bluebold">
	<H1>...text...</H1>
	<SPAN>...text...</SPAN>
</DIV>

로 <div> 택 안의 <H1>, <SPAN> 택에게 일괄적으로 style을 지정합니다. <H1>, <SPAN> 택이 가지고 있는 모든 글자들을 이탤릭체의 굵은 파란색 글자들로 만듭니다.

이 2개의 택으로도 페이지를 충분히 만들 수 있습니다. CSS의 지원이 완전하다면 이라는 전제가 붙지만 이론적으로는 가능합니다. block 택에 적용 가능한 style은 <DIV>택에 지정하고 inline 택에 적용해야 하는 style은 <SPAN> 택에 지정하면 모든 CSS2 을 사용할 수 있기 때문입니다.

inline 택은 <B>, <SPAN> 택 처럼 택의 양쪽에 줄넘김을 하지 않는 택을 말합니다. block 택은 줄넘김을 하는 택입니다. <TABLE>, <DIV>, <P> 등입니다.

각 style 요소는 지정할 수 있는 택이 정해져 있습니다. overflow같은 경우는 block 택에만 지정할 수 있습니다. 그래서 inline택에 지정하면 전혀 효과가 나지 않습니다.

CSS2에서는 CSS1에서 inline, block 으로 작동하는 style이 조금 달라졌습니다. border의 경우 css1에서는 block에 적용이 되지만 css2에서는 inline, block 다 지정할 수 있습니다. 아래는 HTML4에서 block 택의 종류입니다.

Block 택 : ADDRESS BLOCKQUOTE BODY DD DIV DL DT FIELDSET FORM FRAME FRAMESET H1 H2 H3 H4 H5 H6 IFRAME NOSCRIPT NOFRAMES OBJECT OL P UL APPLET CENTER DIR HR MENU PRE LI TABLE TR THEAD TBODY TFOOT COL COLGROUP TD TH CAPTION

Inline 택: block 택 외의 모든 택입니다. 예를들면 EM, I, B, U, BIG, SMALL, SUB, SUP, A, IMG, SPAN, INPUT, SELECT, TEXTAREA 같은 택들입니다.

INS, DEL은 사용하는 식에 따라서 block, inline 둘다 될 수 있습니다.

T O P