본문 바로가기

Developer

개발자를 위한 웹 표준 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)


감사합니다.