[html/css] 인라인 요소와 블록 요소

block요소 : 가로폭 전체의 넓이를 가지는 직사각형 형태 입니다.

 

아래에 div요소를 보시면 width와height를 가진 직사각형 형태로 변형할 수 있습니다.

결과문;;)

가로폭의 넓은 직사각형 형태

 - 부모 block요소를 가진 부분에 인라인 요소를 포함시킬 수 있습니다.

결과문;;)

 div요소에 with값과 height값이 포함이 되어있기 때문에 인라인 요소를 포함 시킬 수 있습니다. 

 

 

 - 모든 인라인 요소를 포함할 수 있고 다른 블록 요소도 일부 포함할 수 있습니다.

 - width, height, margin, padding 형태를 변형하여 레이아웃을 수정할 수 있습니다.

 - 줄바꿈이 이루어 집니다.

 

  ※ display:inline CSS명령어로 블록 요소를 인라인 요소의 속성으로 변경할 수 있습니다. ※

결과문;;) display에 속성값 inline요소를 주시면 블록요소에서 인라인 요소 속성으로 변경할 수 있습니다.

HTML5의 블록요소 종류

address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, noscript, ol, output, p, pre, section, table, ul, video

 

inline요소 : 콘텐츠의 넓이 만큼 공간을 차지 합니다(움직일 공간이 없는게 단점 입니다)

결과문;;)

 - 인라인 요소는 항상 블록 요소에 포함 시킬 수 있습니다.

 - 인라인 요소 안에 다른 인라인 요소를 포함 시킬 수 있습니다.

 - width, height으로 변형을 줄 수가 없습니다.

 - text-align으로 center, right, left의 정렬을 할 수 있습니다.

 - 줄바꿈이 없고 우측으로 이어서 표시가 됩니다.

 

 ※ display:block CSS명령어로 인라인 요소를 블록 요소의 속성으로 변경 할 수 있습니다. ※

 

 div {display:block} : 모든 DIV태그를 inline요소로 변경함

 

 div {display:inline-block} : 인라인 요소와 블록요소의 속성을 모두 갖는 속성으로 변경이 가능합니다.

 결과문;;)

HTML5의 인라인 요소 종류

a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, small, script, select, span, strong, sub, sup, textarea, tt, var

 

display

요소를 어떻게 보여줄지 지정함. 4가지 값을 가짐.

• 속성
  none -> 보이지 않음
  block -> 블록 박스 (세로)
  inline -> 인라인 박스 (가로)
  inline-block -> 블록과 인라인의 중간 형태

• none
  요소를 렌더링 하지 않음. visibility 의 hidden과 달리 영역도 차지하지 않음.
  
  
  
• block
  가로 영역을 모두 채우며, 줄 바꿈이 됨
  
  
• inline
  span 태그 처럼 block 과 달리 줄 바꿈이 되지 않음. width와 height를 지정할 수 없다.
  
  
  
• inline-block
  block 과 inline 의 중간 형태이다. 줄 바꿈이 되지 않지만 크기를 지정할 수 있다.