개발자를 위한 웹 표준 HTML의 이해 2(Block elements, Inline elements)

2011/02/15 - [Developer/웹개발 기초] - 개발자를 위한 웹 표준 HTML의 이해 1(DTD[Document Type Definition]) 

이번 시간에는 HTML Tag 중

Block-Level Element(이하 block), Inline-Level Element(이하 inline)

에 대해서 알아보도록 하겠습니다.

 

단순히 태그는 어떤 것이고.. 어떤 건 어떻게 쓰는 것이다 라는 것은 아래 링크를 참고 하여 주십시오.

http://www.w3schools.com/tags/ref_byfunc.asp

 

block는 말 그대로 하나의 틀이 될 수 있는 Tag를 말합니다.

inline는 block안에 포함되어 Data, Object를 포함 할 수 있으며, block을 포함 할 수 없는 Tag입니다.

 

1. block의 경우 width, height를 포함 할 수 있으나, inline의 경우 포함 할 수 없습니다.

 

<div style="background-color:#999999; width:100px; height:100px;">
	block</div>
<span style="background-color:#555; width:100px; height:100px;">
	inline</span>

 

 

2. inline의 경우 block안에서 1byte문자열이 아닌 경우에는 영역을 벗어나지 않고 줄 바꿈이 됩니다.

 

<div style="border:solid 1px red; width:100px; height:100px;">
	<span>가나다라마 바사아자차카 타파하</span></div>

 

3. block의 경우에는 한 라인에 하나씩 표시되고, inline의 경우에는 block의 범위 안에서 표시 될 수 있는 만큼 표시됩니다.

 

<div style="border:solid 1px red;">div1</div>
<div style="border:solid 1px red;">div2</div>
<br />
<div style="border:solid 1px red;">
	<span>span1</span>
	<span>span2</span>
	<span>span3</span>
	<span>span4</span></div>

 

 

여기까지가 block과 inline의 가장 큰 차이점입니다.

아래는 block-level elements, inline-level elements tag입니다.

 

block-level elements

• p
• h1~h6
• ul
• ol
• pre
• dl
• div
• noscript
• blockquote
• form
• hr
• table
• fieldset
• address

inline-level elements

• samp
• kbd
• var
• cite
• abbr
• acronym
• a
• img
• object
• br
• script
• map
• q
• sub
• sup
• span
• bdo
• input
• select
• textarea
• label
• button

 

2011/02/16 - [Developer/웹개발 기초] - 개발자를 위한 웹 표준 HTML의 이해 3(Web Content Accessibility Guidelines 1.0)

감사합니다.