블록 요소와 인라인 요소

블록 요소

• 블록 요소는 모든 인라인 요소를 포함 할 수 있고 다른 블록 요소도 일부 포함할 수 있다.
• 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 되며 width, height, margin, padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있다.
• 블록 요소 다음에는 줄바꿈이 이루어진다.
• display: inline CSS 명령어로 블록 요소를 인라인 요소의 속성으로 변경할 수 있다.

 

address, article, aside, audio, blockquote, canvas, dd, dl, div, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, noscript, ol, output, p, pre, section, table, ul, video

 

 

인라인 요소

• 인라인 요소는 항상 블록 요소 안에 포함되어 있으며 인라인 요소 안에 다른 인라인 요소가 포함될 수 있다.
• 기본적으로 컨텐츠가 끝나는 지점까지를 넓이로 갖기 때문에 임의로 width, height 의 변형을 줄 수 없다.
• 인라인 요소는 line-height로 줄의 높낮이를 조절할 수 있다.
• text-align으로 텍스트의 중앙, 좌/우측 정렬을 할 수 있다.
• 인라인 요소 다음에는 줄바꿈이 없고 우측으로 바로 이어서 표시된다.
• display: block CSS 명령어로 인라인 요소를 블록 요소의 속성으로 변경할 수 있다.
• display: inline-block 으로 인라인 요소와 블록요소의 속성을 모두 갖는 속성으로 변경이 가능하다.

 

a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, small, script, select, span, strong, sub, sup, textarea, tt, var

 

 

 

출처/참고

• HTML5 태그 블록요소와 인라인요소 종류
• HTML 요소