[HTML] 인라인(Inline) & 블록(Block)

 

인라인(Inline) & 블록(Block)

화면에 출력되는 특성.

 

인라인(Inline)

= 글자 , 왼쪽에서 오른쪽으로 수평으로 쌓임.

= span 태그는 글자로 글자로 취급한다.

= 콘텐츠의 크키만듬 자동으로 줄어준다.(높이,너비)

= 글자는 가로사이즈와 세로 사이즈를 지정할 수 없다. height, width 안먹음.

= 여백(padding, margin)의 경우에도 좌우로만 가능하고 위아래로는 불가능하다.

= 인라인요소 안에는 블록요소를 담을 수 없고, 인라인 요소는 담을 수 있다.

cf) span, img, a, label

 

블록(Block)

= 상자, 위에서 아래로 수직으로 쌓임

= 대표적인 div 태그. 

= 부모 요소의 크기만큼 가로 너비가 자동으로 늘어남. 세로 요소는 인라인처럼 자동으로 맞춤으로 됨.

= 인라인요소와 다르게 블록요소는 가로,세로 사이즈를 지정할 수 있다.

= 인라인요소와 다르게  여백(padding, margin)을 이용할 수 있다.

= 시각적으로 제어하기에는 인라인요소보다 유용하다.

= 자식으로 블록요소를 포함할 수 있고, 인라인요소도 가능하다.

= 인라인은 제약사항이  블록보다 많다.

cf)  div, heading tag(h1~), p, ul, li, ol,

 

인라인 + 블록(inline-block)

= 인라인처럼 수평으로 쌓이고, 블록처럼 높이,여백처리가 가능하다.

cf) input