본문 바로가기
프론트엔드/HTML, CSS

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

by H.초보개발자 2023. 10. 19.
반응형

인라인 요소

  • 한 줄에 줄 바꿈이 되지 않고 여러 개 배치 가능
  • value값에 따라 width값이 결정됨
  • width과 heigh값을 주어도 적용 x
  • 상하 margin는 적용 x(좌우는 가능)
  • audio, b, br, del, em, span, small, strong, sub, sup, u, video, audio, mark, sup ...

블록요소

  • 한 줄에 한 개만 배치 가능
  • 기본 고정으로 너비값은 100%
  • width heigh 값 적용 가능
  • 상하좌우 margin 가질 수 있음
  • 전체적인 레이아웃을 잡는데 많이 쓰임
  • div, hr, h1~6, table, figure, header, nav, footer, section, article, aside, p, ol, ul, li, td, th, form, figcation, caption...

인라인블록요소

  • 한 줄에 여러 개 배치
  • value값에 따라 width값이 결정됨
  • width heigh 값 적용 가능
  • 상하 margin 적용 가능
  • button, input, img..

display 속성이란? 각각의 고유 요소를 다른 요소로 변경시켜 주는 역할을 함 

 

반응형