[html] 블록 요소, 인라인요소, 인라인블록

 

블록 요소 Block Element

div p ul ol li dl dt dd h1~h6 table form blockquote address fieldset pre nosecipt

• 줄 바꿈이 일어난다. (가로사이즈가 100%차이한다고 보면 된다.)
• 블록요소 안에 블록요소,인라인요소를 포함할 수 있다.
• width, height 값을 적용 할 수 있다.
• padding, margin을 모든 방향에 적용할 수 있다.

 

인라인 요소 Inline Element

span a img input strong b q strong em i textarea samp var cite addr sub select ins u

• 줄 바꿈이 일어나지 않고 한줄로 나열된다.
• 인라인 요소안에는 인라인 요소만 포함한다.(인라인 요소안에 블록요소 포함할 수 없다,)
• width, height 값을 적용할 수 없다.
• padding, margin은 좌,우측만 적용된다.
• 일부 요소는 적용가능하다. (input, textarea, select, img)
• 부모요소의 가로보다 자식요소의 가로폭이 길면 다음 줄로 넘어간다.

 

위 사진에서 첫번째 줄에 나열되어 있는것을 인라인요소 라고 하고,

아래줄부터 가로가 길게(100%)있는 것을 블록 요소라고 한다.

 

 

인라인블록 Inline-Block

인라인요소처럼 나열되지만 width, height 값을 적용 할 수 있다.