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 등등...