HTML태그 블럭요소와 인라인요소

HTML 태그는 크게 블럭요소와 인라인요소로 나뉩니다. 화면의 레이아웃을 구성하는데 있어서 블럭요소와 인라인요소에 대한 이해가 가장 기본이 되니 블럭요소와 인라인 요소에 대해 꼭 알고 계셔야 합니다.

블럭요소

블럭요소는 하나의 태그가 독립적인 공간을 가지는 요소입니다. 가로폭이 전체 넓이(100%)를 차지한다고 생각하시면 됩니다. 때문에 하나의 블록요소 태그 다음에는 줄바꿈이 발생하게 됩니다. 상하/수직 정렬되는 것이죠.

또한, 블럭요소에서는 width, height, margin, padding 등을 사용하여 컨텐츠가 가지는 영역의 너비, 여백 값 등을 수정할 수 있습니다.
블럭요소는 인라인 요소의 부모계층으로만 사용가능합니다. 블럭요소는 부모태그가 있을 경우 부모태그 넓이를 그대로 상속받습니다.

HTML5의 블럭요소 종류

addressarticleasideaudioblockquotecanvasdddivdlfieldsetfigcaptionfigurefooterformh1h2h3h4h5h6headerhgrouphrnoscriptoloutputppresectiontableulvideo

인라인요소

인라인요소는 하나의 태그가 딱 본인의 크기만큼만 공간을 차지하는 요소입니다. 때문에 인라인 요소 뒤에 다른 인라인 요소들이 가로로 나열될 수 있으며 줄바꿈이 일어나지 않습니다. 물론 인라인 요소들이 전체 너비의 100%를 넘어가게되면 자동적으로 줄바꿈이 됩니다. 좌우/수평 정렬인 것이죠.

인라인요소는 컨텐츠의 영역만큼만 영역을 차지하기 때문에 width나 height값을 변경할 수 없습니다.
인라인요소는 블럭요소의 자식계층으로만 사용가능합니다. 인라인요소끼리는 부모/자식계층 관계가 모두 성립됩니다.

HTML5의 인라인 요소 종류

aabbracronymbbdobigbrbuttoncitecodedfnemiimginputkbdlabelmapobjectqsampsmallscriptselectspanstrongsubsuptextareattvar

인라인요소의 블럭화 / 블럭요소의 인라인화

인라인블럭은 블럭요소와 인라인요소를 합친 하이브리드 속성처럼 작용하는데요. 인라인처럼 한줄에 여러 요소들이 줄바꿈없이 배치되지만, width와 height, margin, padding 값을 설정할 수 있습니다.

인라인요소의 width, height 값 등을 변경하고 싶을때는 인라인요소의 css에서 display 속성값을 inline-block으로 변경해주면 됩니다. 또한 블럭요소의 영역을 컨텐츠가 가지는 영역만큼만으로 변경하고 싶을 때도 display 속성값을 inline-block으로 변경해주면 됩니다. display의 속성값이 inline-block으로 변경되면 해당요소는 블럭속성과 인라인속성을 모두 가지게 됩니다.