WEB UIUX/HTML

[HTML]html의 block요소와 inline요소의 속성

카이아 2022. 8. 28. 17:03

>block요소

  • block요소는 기본값으로 한줄을 차지한다!
  • 그렇기에 block요소 태그를 나열했을때 자동 줄바꿈 현상이 일어난다.
  • width, height, padding(안쪽여백), margin(바깥여백) 값들을 적용할수있다. 
  • 그렇기에 화면구성이나 레이아웃을 짤때 적합하다.
  • block요소는 inline요소를 포함할 수 있고, 다른 block요소 태그들을 포함 할 수 있다.

👉 block속성의 종류로는 h1~h6, div, p, ul, ol, li, header, nav, section, footer, article, aside, hr 등등...

 

>inline요소

  • inline요소는 줄바꿈이 일어나지 않는다.
  • 그렇기에 inline요소들을 나열 했을때 한 행에 위치해 자신의 크기만큼 나열되는 속성을 가진다.
  • width, height, vertical-align(세로정렬)이 적용되지 않는다.
  • inline요소에 스타일을 적용하려면 display: block; 스타일을 주어 inline요소에서 block속성으로 변경할 수 있다.

👉 inline속성의 종류로는 a, img, b, strong, button, input, label, i, mark 등등...