HTML 요소의 블록, 인라인, 인라인-블록 차이

block 요소

  • 블록 요소는 부모 요소의 전체 공간을 차지하여 블록을 만드는 요소다.
  • 좌우 양측으로 최대한 늘어나 가능한 모든 너비를 차지한다.
  • 줄바꿈이 일어난다.
  • 페이지의 구조적 요소를 나타낼 때 사용한다.
  • 블록 요소는 인라인 요소 안에 중첩 될 수 없지만 a태그는 블록 요소 중첩이 가능하다.(특이 케이스)

inline 요소

  • 인라인 요소는 항상 블록 레벨 요소에 포함된다.
  • 콘텐츠에 따라 할당된 공간만 차지한다.
  • width, height 크기 지정을 할 수 없다.
  • padding, border, margin(left, right) 속성을 사용할 수 있지만, 상하 margin 속성은 사용할 수 없다.
  • 줄바꿈이 일어나지 않는다.

inline-block 요소

  • 기본적으로 인라인 요소 속성을 따르면서 width, height 크기를 지정 할 수 있다.
  • 인라인 요소에서는 margin 상하 속성을 사용할 수 없었지만 인라인-블록 요소는 사용 가능하다.
  • ex) button, input, select

'프론트엔드 > HTML' 카테고리의 다른 글

시멘틱 태그  (0) 2025.05.28